MCP server
The example · Kabir asks Claude Code to build the checkout page from Northwind's main.
How it works
The server runs on your machine over stdio and talks to Babul with your token. Agents call its tools to read components, tokens, icons, pages and changes — from main, a branch or a version.
Connect
Log in with the CLI first (babul login), or set BABUL_TOKEN.
Claude Code
$ claude mcp add babul -- npx -y @babul/mcp
Cursor
.cursor/mcp.json
{
"mcpServers": {
"babul": { "command": "npx", "args": ["-y", "@babul/mcp"] }
}
}
Codex
~/.codex/config.toml
[mcp_servers.babul]
command = "npx"
args = ["-y", "@babul/mcp"]
VS Code
.vscode/mcp.json
{
"servers": {
"babul": { "type": "stdio", "command": "npx", "args": ["-y", "@babul/mcp"] }
}
}
Tools
Every tool takes product and ref; both are optional and default to what babul use set, then main.
| Tool | Inputs | Returns |
|---|---|---|
| list_products | — | Products you can open, by slug and name |
| list_components | product, ref | Components with their variants and use counts |
| get_component_spec | component, variant? | The spec: properties, variants, states, layers |
| generate_code | component, framework, styling, variant? | Code in your stack, written from the spec |
| get_tokens | format? | Styles as one file: css, tailwind, scss, w3c, style-dictionary, figma |
| get_icon | name? | One icon as SVG; without a name, the list |
| get_page | page | A page's layout and the components on it |
| list_versions | — | Versions of main and open branches |
| get_diff | from, to | What changed between two refs |
The server only reads. Committing and merging stay with people, in Babul or the CLI.
Example
Build the checkout page from Babul, branch new-checkout
⏺ babul.get_page(page: "Checkout", ref: "new-checkout")
⏺ babul.generate_code(component: "Button", framework: "react", styling: "tailwind")
⏺ babul.get_tokens(format: "tailwind")
Built app/checkout/page.tsx with Button, Input and OrderSummary, using your tokens.
Prompts that work
- "Build the pricing page from Babul main, using our existing components."
- "What changed in Babul between v0.5.0 and main? Update our components to match."
- "Use the Babul tokens for every colour in this file."
Environment
| Variable | Use |
|---|---|
| BABUL_TOKEN | Token, if you have not run babul login |
| BABUL_PRODUCT | Default product |
| BABUL_REF | Default ref |
Troubleshooting
| Problem | Fix |
|---|---|
| "set BABUL_TOKEN…" on start | Run babul login or set BABUL_TOKEN in the server's env |
| The agent picks the wrong product | Run babul use <product>, or name it in your prompt |
| Code uses the wrong framework | Set it in babul.json; the agent asks if none is set |
| Tools do not appear | Restart the agent after adding the server |
Was this page helpful?
Yes
No
Updated Oct 22, 2026