Arc for AI agents

Arc is a React component and block library designed for AI-assisted frontend development. It provides copy-paste components, complete interface blocks, machine-readable registry metadata, AI skills, and MCP compatibility.

Give your coding agent the catalog, the docs, and a one line install for every free component. It can find the right piece, read how it works, and add it without guessing.

Connect the MCP server

A remote, read only server. The first time you connect, your AI tool opens Arc's sign-in: a free account is enough, and Pro source unlocks with your plan. No key to copy.

https://uiarc.dev/api/mcp
Terminal
claude mcp add --transport http arc https://uiarc.dev/api/mcp

Add --scope project to share the server with your team through .mcp.json.

search_components
Find components and blocks by intent, such as “confirm a destructive action”.
list_components
Browse by category, tag, tier, or kind.
get_component
When to use it and when not to, usage, props, accessibility, motion, responsive, and performance notes, and the install command. With a Pro token, Pro items include their source files.
get_install_command
One shadcn command for several items, with setup notes. With a Pro token, it covers Pro items too.
get_skill
One Arc skill file: the entry point, design, copy, components, composition, motion, accessibility, responsive, the review checklist, or a worked example.

Add the agent skill

Teaches the agent when to reach for Arc, how to install it, and the design rules to keep.

Install to .claude/skills/arc
npx shadcn@latest add https://uiarc.dev/r/arc-skill.json

Other agents can read SKILL.md directly, or paste INSTRUCTIONS.md into AGENTS.md, CLAUDE.md, or Cursor rules.

Pro skills

Longer playbooks for whole pages and reviews. Pro members download them signed in from /api/skills, or read them through the MCP server signed in with a Pro account (or a Pro token).

  • Arc Pro skillProEntry point: picks the right Pro workflow and sets up Pro access
  • Full-page generationProBrief, plan region by region with every state, build, and verify a whole page, or stop at the plan
  • Design system generationProA brand theme on Arc tokens with contrast checked in both themes
  • Refactor to ArcProMigrate custom, shadcn/ui, MUI, or Chakra UI to Arc with parity checks
  • Motion auditProInventory every animation, assign tokens, cut motion that explains nothing
  • Responsive auditProMeasure five widths, fix overflow, layout, and touch, then re-measure
  • Accessibility auditProA ranked audit of structure, keyboard, contrast, and motion with patches

Included with Arc Pro. Signed in, /api/skills returns every Pro skill and /api/skills?id=full-page-generation returns one as markdown.

Install with the shadcn CLI

Every free item is a registry item. Shared tokens and Arc dependencies come along automatically.

Terminal
npx shadcn@latest add https://uiarc.dev/r/button.json
components.json
{  "registries": {    "@uiarc": "https://uiarc.dev/r/{name}.json"  }}
Then install by name
npx shadcn@latest add @uiarc/button @uiarc/dialog @uiarc/signup-form

Import @/components/arc/foundation.css once in your root layout. Items install into an arc/ folder under the components alias in components.json and import each other with relative paths, so src/ projects and monorepo packages work as they are.

Pro access

Signed in through your AI tool, the MCP server unlocks Pro for your account automatically. Personal access tokens are for the shadcn CLI and for clients without MCP sign-in.

  1. Create a token

    Open Pro access in your account, name the token after the tool or machine, and copy it. It is shown once.

  2. Or connect the MCP server with the token

    get_component then returns the full source of Pro items, get_install_command returns @uiarc-pro commands, and get_skill returns Pro skills.

    Terminal
    claude mcp add --transport http --scope user arc https://uiarc.dev/api/mcp \  --header "Authorization: Bearer arc_pro_..."

    Paste your token in place of arc_pro_... The user scope keeps it out of project files.

  3. Install Pro items with the shadcn CLI

    239 Pro components, blocks, and templates install from the @uiarc-pro registry. Pieces that ship photos are copied from their docs page instead.

    components.json
    {  "registries": {    "@uiarc": "https://uiarc.dev/r/{name}.json",    "@uiarc-pro": {      "url": "https://uiarc.dev/r/pro/{name}.json",      "headers": {        "Authorization": "Bearer ${ARC_PRO_TOKEN}"      }    }  }}
    .env.local
    ARC_PRO_TOKEN=arc_pro_...
    Then install by name
    npx shadcn@latest add @uiarc-pro/dock @uiarc-pro/arc-crm

The shadcn CLI expands ${ARC_PRO_TOKEN} from your environment or .env.local; never commit the token. Each account can hold 10 active tokens, each allows 120 requests a minute, and a token stops working when you revoke it or Pro ends. Free dependencies come from the public registry and Pro dependencies through @uiarc-pro, so keep both entries.

Readable context

Plain text and JSON for agents, search, and your own tooling.

Try a prompt

Name the job, not the markup. The agent searches Arc before it writes anything.

Prompt
Build a settings page with Arc. Use the Arc MCP server to findcomponents for the profile form, notification switches, and adestructive delete action. Install them with the shadcn CLI andcheck the page in light and dark themes.