Bevel
Browse the docs

Get started

Use with AI

Let Claude Code, Cursor or Copilot find, install and use Bevel components.

Coding assistants can browse the Bevel registry, install components and write code with them. They need two things: the registry in your components.json, and either the shadcn MCP server or the docs as plain text.

Add the registry

If you followed installation, this is done. The MCP server and shadcn search read registries from here.

components.json
{
  "registries": {
    "@bevel": "https://bevel-ui.vercel.app/r/{name}.json"
  }
}

The shadcn MCP server

The shadcn CLI ships an MCP server. With it, an assistant can list and search @bevel, read a component's files and examples, and run the add command for you. Set it up from your project root:

Claude Code

Terminal
npx shadcn@latest mcp init --client claude

This writes .mcp.json. Restart Claude Code and check /mcp lists shadcn.

Cursor

Terminal
npx shadcn@latest mcp init --client cursor

This writes .cursor/mcp.json. Turn the server on in Cursor's MCP settings.

VS Code (Copilot)

Terminal
npx shadcn@latest mcp init --client vscode

This writes .vscode/mcp.json. Open it and press Start next to the server, then use Copilot Chat in agent mode.

Any other client takes the same server by hand:

mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}
Without MCP, the CLI does the same from a terminal: npx shadcn@latest search @bevel -q meter, npx shadcn@latest view @bevel/meter.

Docs as plain text

For tools that read URLs (v0, ChatGPT, Cursor's @Docs), the docs come as text, in the llms.txt format:

  • /llms.txt: an index of the guides and every component, with a line on each.
  • /llms-full.txt: everything in one file. Each component's install command, anatomy, parts and example code, plus the rules and tokens.
  • Any component page plus .md, such as /components/guarded-switch.md: one component, for a smaller context.

Ask for it

Name the registry and the job. The assistant finds the component, installs it and follows its anatomy.

Prompt
Use the @bevel registry. Add a deploy button to the release page
that needs two deliberate actions: find the Bevel component for a guarded
critical switch, install it, and wire it to deploy() when switched on.
Follow the component's anatomy, and style only with Bevel tokens.

Without MCP, give it the docs instead: start the prompt with Read https://bevel-ui.vercel.app/llms.txt.

NextDesign system