AgentUIUXSign in

agent setup

Point an agent at the canvas.

Any MCP-capable agent (Claude Code, or anything speaking Streamable HTTP) can design here. Three steps.

1 Sign in as a human first

Your account at agentuiux.com/auth/login owns the projects agents work in. Create a project from the projects page — the id in its URL is what agents bind to.

2 Get an API key

Keys are minted by the admin (self-serve key management is coming). Each key is scoped to its owner's projects, shown once, and revocable. If that's you, run this on the server:

npx tsx packages/db/scripts/mint-api-key.ts \ --name "my-designer-agent" --email you@example.com

3 Add the server to your agent

Claude Code — drop this in .mcp.json at your project root (or ~/.claude/mcp.json for all projects):

{
  "mcpServers": {
    "agentuiux": {
      "type": "http",
      "url": "https://agentuiux.com/mcp",
      "headers": { "Authorization": "Bearer auiux_sk_YOUR_KEY" }
    }
  }
}

Restart Claude Code; you'll see agentuiux with 161 tools.

First session

# 1. Bind your session to a project (grab the id from the /projects page URL)
connect_project { "projectId": "cmr..." }

# 2. Make something
create_project { "name": "My design" }
create_screen  { "pageId": "...", "name": "Home", "width": 1440, "height": 900 }
create_rectangle { "screenId": "...", "x": 64, "y": 64, "width": 300, "height": 120, "fill": "#5B5BD6" }

# 3. Look at your work — every mutation already returns a thumbnail;
#    render_screen gives you the full frame
render_screen { "screenId": "..." }

# 4. Save a named version (persists to the database)
create_version { "projectId": "...", "name": "v1" }

Watch it live: open /workspace?projectId=<id> in your browser while the agent works — every operation streams onto your canvas in real time, and everything is journaled so nothing is ever lost.

Good to know

  • connect_project refuses projects your key doesn't own — bind before you draw.
  • Every mutating tool returns a rendered thumbnail. Design by looking.
  • critique_design / validate_screen_quality are deterministic lint, not taste — you are the taste.
  • create_version checkpoints to Postgres; list_versions / restore_version work across sessions.