Vlak
Accessible React components, tokens, usage guidance, and install commands for product interfaces.
사용해야 할까요
품질 및 안전성
발견 사항 (1)
- LOWTool 'get_workflow' description lacks action verbget_workflow에서
도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.
컨텍스트 비용
이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.
설치
원클릭 설치
`claude_desktop_config.json` 파일에 다음을 추가하세요:
{
"mcpServers": {
"vlak": {
"url": "https://vlak.dev/mcp"
}
}
}원격 엔드포인트
https://vlak.dev/mcpstreamable-http할 수 있는 일
도구 목록
도구 (8)
🟢list_workflows(query)
List bundled workflow kits and recipes. An optional query matches workflow ID, title, description, components, adapters, and states.
입력 스키마
{
"type": "object",
"properties": {
"query": {
"description": "Optional workflow search",
"type": "string"
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"schemaVersion": {
"type": "number",
"const": 1
},
"count": {
"type": "number"
},
"workflows": {
"type": "array",
"items": {
"type": "object",
"properties": {},
"additionalProperties": {}
}
}
},
"required": [
"schemaVersion",
"count",
"workflows"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢get_workflow(id)
Return one bundled workflow manifest and its source files. Authentication, authorization, storage, and deployment remain host responsibilities described by the manifest.
입력 스키마
{
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "Workflow ID, for example record-review"
}
},
"required": [
"id"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"schemaVersion": {
"type": "number",
"const": 1
},
"manifest": {
"type": "object",
"properties": {},
"additionalProperties": {}
},
"files": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"type": "string"
}
}
},
"required": [
"schemaVersion",
"manifest",
"files"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢list_components(category)
Every component in the catalogue with name, title, description, category, and aliases. Filter by category: actions, forms, navigation, feedback, surfaces, content, icons, charts, patterns, ios, android, ai, health, civic, science, creative, engineering, geospatial, robotics, electronics, microbiology.
입력 스키마
{
"type": "object",
"properties": {
"category": {
"description": "Only this category",
"type": "string"
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"version": {
"type": "string"
},
"count": {
"type": "number"
},
"components": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"category": {
"type": "string"
},
"aliases": {
"type": "array",
"items": {
"type": "string"
}
},
"cssOnly": {
"type": "boolean"
}
},
"required": [
"name",
"title",
"description",
"category",
"aliases",
"cssOnly"
],
"additionalProperties": false
}
}
},
"required": [
"version",
"count",
"components"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢get_component(name)
The markdown docs page for a component (install paths, example, props tables, keyboard, accessibility), plus its props as JSON, the CSS-only snippet, the React example, its classes, and aliases. Pass the kebab-case name from list_components or search_components.
입력 스키마
{
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Component name, e.g. \"button\" or \"dropdown-menu\""
}
},
"required": [
"name"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"category": {
"type": "string"
},
"aliases": {
"type": "array",
"items": {
"type": "string"
}
},
"cssOnly": {
"type": "boolean"
},
"docs": {
"type": [
"string",
"null"
]
},
"import": {
"type": [
"string",
"null"
]
},
"example": {
"type": [
"string",
"null"
]
},
"snippet": {
"type": [
"string",
"null"
]
},
"classes": {
"type": "array",
"items": {
"type": "string"
}
},
"usage": {
"anyOf": [
{
"type": "object",
"properties": {
"use": {
"type": "array",
"items": {
"type": "string"
}
},
"avoid": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": [
"use",
"avoid"
],
"additionalProperties": false
},
{
"type": "null"
}
]
},
"keyboard": {
"type": "array",
"items": {
"type": "object",
"properties": {
"keys": {
"type": "string"
},
"does": {
"type": "string"
}
},
"required": [
"keys",
"does"
],
"additionalProperties": false
}
},
"a11y": {
"type": "array",
"items": {
"type": "string"
}
},
"registryDependencies": {
"type": "array",
"items": {
"type": "string"
}
},
"dependencies": {
"type": "array",
"items": {
"type": "string"
}
},
"styles": {
"type": "array",
"items": {
"type": "string"
}
},
"reactImport": {
"type": "string"
},
"props": {
"type": "array",
"items": {
"type": "object",
"properties": {},
"additionalProperties": {}
}
},
"page": {
"type": "string"
},
"registryItem": {
"type": "string"
}
},
"required": [
"name",
"title",
"description",
"category",
"aliases",
"cssOnly",
"docs",
"import",
"example",
"snippet",
"classes",
"usage",
"keyboard",
"a11y",
"registryDependencies",
"dependencies",
"styles",
"reactImport",
"props",
"page",
"registryItem"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢search_components(term)
Find components by name, title, description, alias (AI Elements, shadcn/ui, Radix, and common names such as PromptInput, Chain of thought, Sonner, Drawer, Combobox), or rs-* class. Spacing, punctuation and capitalization do not affect matching. Returns matches ranked by field.
입력 스키마
{
"type": "object",
"properties": {
"term": {
"type": "string",
"description": "Search term, e.g. \"menu\", \"snackbar\", \"rs-input\""
}
},
"required": [
"term"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"term": {
"type": "string"
},
"hits": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"category": {
"type": "string"
},
"aliases": {
"type": "array",
"items": {
"type": "string"
}
},
"cssOnly": {
"type": "boolean"
},
"matched": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": [
"name",
"title",
"description",
"category",
"aliases",
"cssOnly",
"matched"
],
"additionalProperties": false
}
}
},
"required": [
"term",
"hits"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢get_tokens
The design tokens page: every CSS custom property with its light and dark value and StyleX alias, plus the raw token groups (type scale, grid, radius, motion, breakpoints, control sizes).
입력 스키마
{
"type": "object",
"properties": {}
}출력 스키마
{
"type": "object",
"properties": {
"page": {
"type": "string",
"const": "tokens"
},
"markdown": {
"type": "string"
}
},
"required": [
"page",
"markdown"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢get_install(name)
The three ways to install one component (npm package plus import line, Vlak CLI, shadcn CLI) and the CSS-only markup, with its registry dependencies.
입력 스키마
{
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Component name"
}
},
"required": [
"name"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"package": {
"type": "object",
"properties": {
"install": {
"type": "string"
},
"css": {
"type": "string"
},
"import": {
"type": [
"string",
"null"
]
}
},
"required": [
"install",
"css",
"import"
],
"additionalProperties": false
},
"cli": {
"type": "string"
},
"shadcn": {
"type": "string"
},
"cssOnly": {
"type": "object",
"properties": {
"stylesheet": {
"type": "string"
},
"markup": {
"type": "string"
}
},
"required": [
"stylesheet",
"markup"
],
"additionalProperties": false
},
"registryDependencies": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": [
"name",
"package",
"cli",
"shadcn",
"cssOnly",
"registryDependencies"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢get_guide(page)
Read the general guide first for installation and conventions. Select ios or android for browser React components, exact exports and related interface studies; select ai-index for the AI component catalog and optional engine imports, ai for the runnable assistant and integration recipes, ai-parity for AI Elements functional coverage and differences, or agents for machine-readable surfaces and setup.
입력 스키마
{
"type": "object",
"properties": {
"page": {
"description": "Guide to read; defaults to guide",
"type": "string",
"enum": [
"guide",
"agents",
"ios",
"android",
"ai-index",
"ai",
"ai-parity"
]
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"page": {
"type": "string",
"enum": [
"guide",
"agents",
"ios",
"android",
"ai-index",
"ai",
"ai-parity"
]
},
"markdown": {
"type": "string"
}
},
"required": [
"page",
"markdown"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}커뮤니티
증거