Vlak — Claude Code MCP server: what it does, how to install
MCP server for the Vlak design system. Supplies coding assistants with React component docs and design token references.
claude mcp add --transport http vlak https://vlak.dev/mcpWhat Vlak does
Vlak gives language models structured access to a component registry built on StyleX and web platform standards such as <dialog> and the Popover API. The server delivers component properties, accessibility requirements, and markup snippets directly to your agent. Fetching component documentation requires no authentication credentials.
The library offers multiple consumption tiers: a prebuilt React package, plain CSS classes, or vendored source leaves through shadcn tooling. Interactive controls include automated axe testing alongside 3:1 contrast ratios. Keep in mind that vendoring raw component leaves into your codebase demands StyleX support in your build pipeline.
What it helps with
- inspect React component properties and types from agent context
- retrieve install workflows for npm or shadcn registries
- generate accessible interface patterns tested against APG standards
- look up design token structures for StyleX and DTCG formats
Example prompts for the agent
- Find the dialog component in Vlak and show its TypeScript props
- How do I add the Vlak button into a shadcn project?
- Show the design token values used for spacing and borders in Vlak
How to install Vlak
Platform CLI: remote server
claude mcp add --transport http vlak https://vlak.dev/mcpPlatform CLI: remote server
codex mcp add vlak --url https://vlak.dev/mcpConfig file
{
"mcpServers": {
"vlak": {
"url": "https://vlak.dev/mcp"
}
}
}Config file
{
"servers": {
"vlak": {
"type": "http",
"url": "https://vlak.dev/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http vlak https://vlak.dev/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Vlak
How to install Vlak in Claude Code?
Run claude mcp add --transport http vlak https://vlak.dev/mcp in your terminal. The server connects over HTTP without needing an API token.
What does Vlak do?
It lets coding assistants search the Vlak design system, inspect component properties, and generate accessible UI code.
Do I need a StyleX compiler to use Vlak?
Only when vendoring component source leaves directly into your app. You can instead import @noorddev/vlak-react with plain CSS or apply raw stylesheet classes.
