Getting started
MCP and AI
Point your agent at Junco and it builds with real components instead of guessing.
MCP server#
@junco/mcp is a stdio MCP server. It lets an agent search Junco, read any component's usage at all four levels with its props and source, read the tokens, and get install steps for your framework. It reads the public registry at https://junco.madebytobi.com/r.
claude mcp add junco -- npx -y @junco/mcp{
"mcpServers": {
"junco": { "command": "npx", "args": ["-y", "@junco/mcp"] }
}
}{
"servers": {
"junco": { "type": "stdio", "command": "npx", "args": ["-y", "@junco/mcp"] }
}
}| Tool | Returns |
|---|---|
list_components | Every UI component with a one-line description. |
list_blocks | Blocks and full pages (kind: block, page or all). |
search | Fuzzy matches by name or purpose, typos included (query, limit). |
get_component | Description, usage at all four levels, variants, props, an example, npm and registry dependencies, and the source (includeSource). |
get_tokens | Design tokens as a summary, tokens.css, or W3C JSON (format, filter). |
get_install_instructions | Setup steps for next, vite, remix, astro or html. |
Working on Junco itself? Point it at a local build with --registry ./apps/docs/public/r or the JUNCO_REGISTRY environment variable. In code, createServer(registry) returns an McpServer you can connect to any transport.
llms.txt#
/llms.txt is a plain-text map of the docs and every component, written for language models. /llms-full.txt adds each component's props and usage. Paste either URL into a chat or your agent's context.
Registry JSON#
Each component is served at /r/<name>.json in the shadcn registry format, with its source, dependencies and a content hash. /r/registry.json lists them all. Anything that understands shadcn registries can read Junco directly.
curl https://junco.madebytobi.com/r/registry.json
npx shadcn@latest add https://junco.madebytobi.com/r/dialog.jsonPrompting tips#
- Ask for Junco components by name and level: "use junco's Field and Input, installed".
- Mention tokens instead of colors: "text-muted-foreground", not "gray-500".
- For whole screens, ask for a page from @junco/blocks first, then customize it with props and slots.
- Ask the agent to check its work against the a11y notes on each component page.