AI-powered UI canvas via Model Context Protocol

Let AI design your UI in real time

UI Agent gives AI models a live canvas through the Model Context Protocol. Watch your AI build full page layouts — section by section, in real time.

View Setup Guide

Message signature only — no gas, no transactions

Scroll

How it works

From prompt to pixel in seconds

01

Connect your AI

Add UI Agent to Claude Desktop or any MCP-compatible client using your API key. The AI connects directly to your live canvas.

02

Create frames & pages

Your AI calls MCP tools to create frames (projects) and pages within them. Set a custom Google Font for the whole frame in one command.

03

Watch it build

The AI appends nodes incrementally — layout sections, content, cards, images — and you see every change live on the canvas.

MCP Tools

11 tools, zero friction

Every tool your AI needs to create, navigate, and sculpt UI layouts on the live canvas.

fn

list_frames

List all canvas frames

fn

create_frame

Create a new frame with optional font

fn

update_frame

Set Google Font for the whole frame

fn

list_pages

List pages in a frame

fn

create_page

Create a new page inside a frame

fn

get_page

Retrieve the current node tree

fn

append_root_nodes

Add layout sections incrementally

fn

append_child_nodes

Fill sections with content nodes

fn

update_node_props

Patch a single node's classes/content

fn

remove_node

Remove a node and its subtree

fn

update_page

Full node tree replace (fallback)

Quick Start

Up and running in 2 minutes

UI Agent works with Claude Desktop and any MCP-compatible AI client.

1

Create an API key

Sign in with your wallet, go to API Keys in the sidebar, and generate a new key.

2

Add to Claude Desktop

Open claude_desktop_config.json and add the server entry:

json
{
  "mcpServers": {
    "ui-agent": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote@latest",
        "https://ui.agent.example.com/api/mcp/sse"
      ],
      "env": {
        "HEADER_Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Or pass the key as a query param: /api/mcp/sse?api_key=YOUR_KEY

3

Start building

Tell Claude what you want to build. It will call the MCP tools automatically:

text
You: "Build me a SaaS landing page with a hero,
feature grid, and pricing section.
Use DM Sans font."

Claude: [calls update_frame with font_family: "DM Sans"]
        [calls create_page]
        [calls append_root_nodes → hero, features, pricing...]
        [calls append_child_nodes → fills each section...]