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. No account or key.
claude mcp add --transport http arc https://uiarc.dev/api/mcpAdd --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.
npx shadcn@latest add https://uiarc.dev/r/arc-skill.jsonOther agents can read SKILL.md directly, or paste INSTRUCTIONS.md into AGENTS.md, CLAUDE.md, or Cursor rules.
- SKILL.mdEntry point: workflow, principles, never-do list, and quick decisions
- INSTRUCTIONS.mdShort always-on rules for AGENTS.md, CLAUDE.md, or Cursor rules
- checklist.mdThe review loop to run before finishing, with grep sweeps
- components.mdChoosing the right component or block by job, with ids
- composition.mdPage containers, dashboards, marketing sections, states, React correctness
- copy.mdSentence case, no eyebrows or em dashes, verbs on buttons, honest claims
- design.mdColor, type, surfaces, concentric radii, spacing, and icons
- motion.mdMotion tokens, spring choice, patterns with code, reduced motion
- accessibility.mdFocus without rings, semantics, keyboard, and announcements
- responsive.mdWidths to check, overflow, tables, and touch targets
- example-settings.mdA worked account settings page
- example-pricing.mdA worked pricing section with plans, comparison, and FAQ
- example-dashboard.mdA worked analytics overview with KPIs, chart, and table
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 with a Pro token.
- Arc Pro skillProEntry point: picks the right Pro workflow and sets up Pro access
- Full-page generationProBrief, plan, build, and verify a whole page against the checklist
- Page compositionProPlan a page region by region with the right blocks and every state
- 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=page-composition returns one as markdown.
Install with the shadcn CLI
Every free item is a registry item. Shared tokens and Arc dependencies come along automatically.
npx shadcn@latest add https://uiarc.dev/r/button.json{ "registries": { "@uiarc": "https://uiarc.dev/r/{name}.json" }}npx shadcn@latest add @uiarc/button @uiarc/dialog @uiarc/signup-formImport @/registry/foundation.css once in your root layout. Arc files use the @/* alias for the project root.
Pro access
Pro members connect AI tools and the CLI with a personal access token. Without one, everything above keeps working, free and anonymous.
Create a token
Open Pro access in your account, name the token after the tool or machine, and copy it. It is shown once.
Connect the MCP server with the token
get_componentthen returns the full source of Pro items,get_install_commandreturns@uiarc-procommands, andget_skillreturns Pro skills.Terminalclaude 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.
Install Pro items with the shadcn CLI
99 Pro components, blocks, and templates install from the
@uiarc-proregistry. 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.localARC_PRO_TOKEN=arc_pro_...Then install by namenpx shadcn@latest add @uiarc-pro/dock @uiarc-pro/arc-saas
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.
- llms.txtIndex of every component and block with links to its markdown
- llms-small.txtOverview, install, and one line per item, for small context windows
- llms-full.txtThe whole library as one markdown file for a single context load
- Component markdownAny component or block as markdown: add /markdown to its page URL
- Registry indexshadcn registry with 119 installable items
- CatalogMetadata for every item, including Pro: use cases, keywords, and notes, without source
- Skill indexEvery skill file as JSON
Try a prompt
Name the job, not the markup. The agent searches Arc before it writes anything.
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.