# Vlak

MCP server for the Vlak design system. Supplies coding assistants with React component docs and design token references.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 33
- Author: Noord-Ventures
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Noord-Ventures/vlak
- Updated: 2026-10-15
- HTML: https://affpapa.org/en/nevibecode/mcp/vlak

## What it 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.

## Requirements
- Remote server: `https://vlak.dev/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http vlak https://vlak.dev/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add vlak --url https://vlak.dev/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "vlak": {
            "url": "https://vlak.dev/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "vlak": {
            "type": "http",
            "url": "https://vlak.dev/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http vlak https://vlak.dev/mcp
```

## When to use it
- 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
- 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

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md