Caliper UI

npx add-mcp 'https://caliperui.site/mcp'

Give your AI editor the same docs you read: an MCP server, llms.txt, and a Markdown version of every page.

MCP server

The Caliper UI MCP server lets Claude Code, Cursor, VS Code and other MCP clients search parts, read their props and accessibility notes, and fetch source to write into your project.

claude mcp add --transport http caliper https://caliperui.site/mcp \
  --header "Authorization: Bearer $CALIPER_TOKEN"

{
  "mcpServers": {
    "caliper": {
      "url": "https://caliperui.site/mcp",
      "headers": { "Authorization": "Bearer ${env:CALIPER_TOKEN}" }
    }
  }
}

Tools: search_components, get_component, get_component_source, get_install_command and get_design_rules. The token is optional; without it Pro source is not returned.

llms.txt and Markdown

/llms.txt lists every page with a one-line summary; /llms-full.txt holds all of it in one file. Add .md to any docs address for its Markdown, for example /docs/components/button.md.

Building an agent interface? See AI agent workflow components.

Project rules

Paste this into AGENTS.md or CLAUDE.md so generated code follows Caliper UI’s conventions.

# Using Caliper UI in this project

- Import parts from \`@/components/ui/<name>\`; they are local source. Edit them freely, but keep their props and data-slot names.
- Use semantic tokens (bg-background, bg-surface, text-muted-foreground, border-border, rounded-control, rounded-surface) instead of raw colours.
- Hierarchy comes from type and spacing; prefer borders to shadows. Overlays (menus, popovers, dialogs) use the frosted surface; tables and reading areas do not.
- Every interactive part must keep a visible focus ring, keyboard support and a 44px touch target on coarse pointers.
- Use the shared motion tokens; never animate layout for decoration. Respect prefers-reduced-motion.
- Write interface copy in plain sentences: name the result ("Send invite"), state consequences, say what went wrong and how to fix it.
- Before building a pattern, search Caliper UI (MCP: search_components) for an existing part: forms, overlays, data tables, charts, billing, settings and AI chat are all covered.