Docs

Using with AI agents

Two ways to let your coding agent add Loopkit components: paste a rebuild prompt, or connect the MCP server so it can look them up itself.

Rebuild prompts

Every component page has a Prompt for your AI tab. The prompt contains the goal, the stack, the colour tokens, every prop, the exact behaviour, the accessibility rules and the full reference source. Paste it into Claude Code, Cursor, Codex or v0 and the agent writes the same file, instead of guessing.

Try it with the free Approval Card.

MCP server

The server runs locally over stdio and exposes three tools:

list_components: everything in the library, with tier.
search_components: find a component by need, like “human approval” or “spend limit”.
get_component: source, rebuild prompt and install command.

Free components need no key. Pro components need a LOOPKIT_KEY, which you will get from your account page once plans open.

Claude Code

bash

claude mcp add loopkit -e LOOPKIT_KEY=lk_live_… -- node /path/to/loopkit/mcp/server.mjs

Cursor

json

// ~/.cursor/mcp.json
{
  "mcpServers": {
    "loopkit": {
      "command": "node",
      "args": ["/path/to/loopkit/mcp/server.mjs"],
      "env": { "LOOPKIT_KEY": "lk_live_…" }
    }
  }
}

The npm package is not published yet; for now the server runs from the repository. Then ask your agent something like:

Add a human approval step before the deploy agent merges. Use Loopkit, and log the decision to the audit log.

Tips

Ask the agent to wire the callbacks (onDecision, onResolve) to your API instead of keeping the demo data.
Keep secrets on the server. The Audit Log demo signs in the browser only to show how the chain works.
Mention “shadcn tokens” so the agent doesn't replace them with raw colours.