Skip to content
Agentic UI Kit
Buy

Guide

A UI kit for Claude Code

Agentic UI Kit gives Claude Code a catalog of 828 React and Next.js components, 18 app templates and 16 blueprints. Claude Code searches it through a local MCP server, installs what fits as source files with the shadcn CLI and applies your theme first, so it reuses tested UI before it writes new UI.

Install in two steps

The same install as Docs: install with your coding agent, with what is specific to Claude Code.

  1. 1. In your own terminal, once

    Unzip the kit to your home folder and log in with the license key from your purchase. The key stays in your user config and never goes into an agent chat.

    Your terminal
    unzip ~/Downloads/agentic-ui-kit-*.zip -d ~
node ~/agentic-ui-kit/bin/agentic-ui.mjs login

  2. 2. Paste one prompt into Claude Code

    Open Claude Code in your Next.js project and paste the prompt. In its step 1, replace detect with claude-code.

    Prompt for Claude Code
    Install Agentic UI Kit in this Next.js project, then build one screen with it.

1. Run: node ~/agentic-ui-kit/bin/agentic-ui.mjs setup --yes --validate --client detect
   If you are one of these agents, pass your own id instead of detect: claude-code, codex, cursor, vscode, gemini, kimi, opencode, amp, devin, antigravity, junie, zed, cline.
   If setup says the license key is missing, stop and ask me to run node ~/agentic-ui-kit/bin/agentic-ui.mjs login in my own terminal. Never ask me for the license key in this chat and never put it on a command line.
2. Run: node ~/agentic-ui-kit/bin/agentic-ui.mjs mcp check
3. Tell me the "next:" step that setup printed for you (approve, trust, reload or restart) so the agentic-ui MCP server loads.
4. Call the MCP tool understand_project. If the agentic-ui MCP tools are not loaded yet, run node .agents/skills/agentic-ui-extend/scripts/context.mjs --cwd . --json instead (in Claude Code the skills are in .claude/skills).
5. Build the screen below. Reuse the catalog first: call find_reusable_ui (or run node .agents/skills/agentic-ui-extend/scripts/find-reusable.mjs --intent "<what you need>" --cwd . --json), install what fits with node ~/agentic-ui-kit/bin/agentic-ui.mjs add <component>, and write only the glue code.
6. Run the project build (for example pnpm build) and fix every error.

Screen: a billing page with plan usage and invoices (replace with the screen you want).
Client id
--client claude-code
Status
Verified end to end in our recorded runs
Where to paste the prompt
The CLI (run claude in the project folder), the desktop app or the IDE extension, opened on your project.
Log in
You can run login from the Claude Code prompt with a leading !, which runs it in your shell: ! node ~/agentic-ui-kit/bin/agentic-ui.mjs login
MCP config setup writes
.mcp.json
After setup
Approve the project server agentic-ui when asked, then run /mcp (or /mcp reconnect all).
Notes
  • Claude Code reads CLAUDE.md. If the project has one, setup adds an @AGENTS.md line to it so the kit's AGENTS.md block is read too.
  • Skills: .claude/skills.
Setup line for Claude Code (the prompt's step 1 with its id)
node ~/agentic-ui-kit/bin/agentic-ui.mjs setup --yes --validate --client claude-code

What Claude Code does with the MCP tools

Setup registers the agentic-ui server in .mcp.json. Claude Code also reads CLAUDE.md (setup adds an @AGENTS.md line to it) and the skills in .claude/skills. When you ask for a screen, it:

  1. calls understand_project to read your project profile, design tokens and config;
  2. calls find_reusable_ui for each part of the screen and gets a reuse, adapt or build-new decision;
  3. checks your theme with resolve_theme and applies it before adding components;
  4. installs what fits with agentic-ui add, writes the glue code and runs your build.

All 9 tools are read-only: see the MCP server.

Example prompt

Once the project is set up, ask for a screen in plain words and tell Claude Code to reuse the catalog first:

Prompt for Claude Code
Build a billing page with plan usage and invoices.
Reuse the catalog first: call understand_project, then find_reusable_ui for each part of the screen.
Install what fits with node ~/agentic-ui-kit/bin/agentic-ui.mjs add <component>, write only the glue code, then run the project build and fix every error.

In a recorded run

Acme Metering (Billing admin), built with Claude Code ×1 + Claude agent harness ×2 · 3 iterations. The first prompt opened with “Build a billing admin for Acme: a usage overview page with KPIs and a usage meter, an invoices table with filters, and a plan comparison page.” In that iteration Claude Code made 6 MCP calls in 25 turns (108 s).

See the run, iteration by iteration

Questions

Do I need the MCP server to use the kit with Claude Code?

It is recommended, not required. Without it, the agent skills fall back to local scripts over the same catalog (context.mjs and find-reusable.mjs), and Claude Code installs components with the agentic-ui CLI.

Where does setup write the Claude Code config?

The MCP server goes in .mcp.json. Claude Code also reads CLAUDE.md (setup adds an @AGENTS.md line to it) and the skills in .claude/skills. After setup: Approve the project server agentic-ui when asked, then run /mcp (or /mcp reconnect all).

Does Claude Code see my license key?

No. You run login once in your own terminal; it stores the key in your user config. The setup prompt tells the agent to stop and ask you if the key is missing, never to ask for it in the chat.

Has the setup been tested with Claude Code?

Verified end to end in our recorded runs.

Other guides: Cursor · Codex