Ingot

MCP for AI agents

Your agent picks components, writes the code and stays on the system.

  1. 1

    Create an API key

    Free account needed. Open Account and create a key. It is shown once, so keep it somewhere safe.

  2. 2

    Add the server to your agent

    claude mcp add --transport http ingot-ui https://mcp.ingotui.com/mcp --header "Authorization: Bearer YOUR_API_KEY"

    Replace YOUR_API_KEY with your key. Where it goes: Cursor → .cursor/mcp.json, VS Code → .vscode/mcp.json, Codex → ~/.codex/config.toml, Claude Code → Terminal.

  3. 3

    Ask for a screen

    Prompt
    Set this project up with the Ingot UI Loopo system, then build an analytics overview page with KPI cards, a capsule bar chart for monthly revenue and a transactions table.

Tools your agent gets 14

list_design_systemsThe systems with status, accent, font and tier
get_design_systemFoundations for one system: tokens CSS, rules, icon style
get_tokensTokens as CSS variables, a Tailwind v4 theme or JSON
search_componentsKeyword search with category and tier filters
get_componentMetadata, dependencies and usage for one component
get_component_codeEvery source file a component needs, dependencies included
add_componentsA ready-to-write file set + npm install command for several components
init_projectTokens, theme bridge, globals.css lines and an agent rules file for a new project
scaffold_screenTurns a screen description into a page assembled from library components
get_chartPicks the right chart for a question and returns it wired to your data shape
search_iconsFind Ingot Icons by name and get the JSX
audit_uiChecks your UI code for hard-coded colours and off-system patterns
get_usageYour plan and limits
send_feedbackRequest a component or report a problem

Prefer a CLI?

Same components, no agent needed.

npx ingotui init                 # tokens + theme bridge
npx ingotui add kpi-card donut    # components + their dependencies
npx ingotui list                 # everything available