Tooling
Agents and MCP
Coding agents are bad at guessing component APIs. VibeUI gives them tools instead: a registry, a CLI and a Model Context Protocol server, so they search, read and install real source.
Three ways in
| Surface | Best for | Entry |
|---|---|---|
| MCP server | Interactive agents (Claude Code, Cursor, Claude Desktop, Codex) | node mcp/server.mjs |
| CLI + --json | Scripts and agents that can run shell commands | npx @agents-npm-packages/vibeui … |
| llms.txt | Agents with no tooling, as a short brief | llms.txt, docs/agents.md |
MCP setup
The server speaks stdio and needs a local copy of the repo, because it reads the source files it hands to the agent.
bash
git clone https://github.com/arjunkshah12345-hash/vibeui.git
cd vibeui && npm installbash
claude mcp add vibeui -- node /absolute/path/to/vibeui/mcp/server.mjsTools
| Tool | Inputs | Returns |
|---|---|---|
| library_info | none | Version, component count, categories, peers. |
| list_components | category? | Name, title, category, description, peers, registryDependencies. |
| search_components | query, category? | Matches with description and dependencies. |
| get_component | name | Full source plus metadata and the generated api table. |
| add_component | names (string | string[]), dir?, tokens? | Per-file results (siblings included) and the peers to install. |
| get_tokens | none | The contents of templates/vibeui.css. |
| get_utils | none | The cn() helper source. |
| get_install_guide | none | A short markdown install guide. |
| list_categories | none | Categories with their component names. |
| refresh_registry | none | Regenerates the registry and returns the new count. |
Resources and prompt
vibeui://registry: the full catalog JSON.vibeui://llms.txt: the agent brief.- Prompt
integrate_vibeui(argumentcomponent): a guided plan for adding one component to the current project.
The recommended loop
search_componentsfor the need ("date picker").get_componentand read the source andapibefore writing code. Do not guess props.- Make sure peers, the tokens file and
cn()exist (get_tokens,get_utils). add_componentinto the project.- Import it and match the project's conventions.
Without MCP
bash
npx @agents-npm-packages/vibeui search "date picker" --json
npx @agents-npm-packages/vibeui get calendar --json
npx @agents-npm-packages/vibeui add calendar --dir ./src/components/uiRules worth giving an agent
- Components live in
src/components/ui/<kebab>.tsxand importcnfrom@/lib/utils. - Use token classes (
bg-surface,text-muted,border-line), never raw hex. - Icons come from
@phosphor-icons/react; use/dist/ssrin files without"use client". - Do not wrap VibeUI in a package or replace its variants system. Edit the copied file instead.
These are also in llms.txt and docs/agents.md.