Agent-Native Design MCP Server

io.github.BuilderIO/agent-native-design

Agent-Native design tool for creating and editing visual designs with AI assistance

What is the Agent-Native Design MCP server?

Agent-Native Design is an MCP server that integrates with the Agent-Native framework to enable AI agents to create and edit visual designs. It exposes design capabilities as shared actions that both agents and UIs can call, allowing autonomous design work paired with visual feedback and human review.

Agent-Native Design lets you generate and refine interactive designs through agent assistance. The server bridges autonomous design work with a purpose-built UI, so agents can create designs as tools while designers inspect, edit, and approve results in the same interface. It's part of the broader Agent-Native framework for building agents with integrated UIs.

How to install Agent-Native Design

Copy-paste configuration for popular MCP clients.

transport: http

Config generated by PluginBench — verify against the source before use.

~/.cursor/mcp.json

{
  "mcpServers": {
    "agent-native-design": {
      "url": "https://design.agent-native.com/mcp"
    }
  }
}

Tools & capabilities

Tools this server exposes to the agent.

Design generation and editing — Create and refine interactive designs through agent actions

Use cases

Generate initial design concepts and layouts with agent assistance
Refine and iterate on designs through agent-guided edits
Create on-brand visual designs with agent knowledge of design systems
Review and approve agent-generated designs in a visual editor
Collaborate between agents and designers on design projects

Agent-Native Design MCP server FAQ

What is Agent-Native Design?

Agent-Native Design is an MCP server that lets AI agents create and edit visual designs. It's built on the Agent-Native framework, which pairs autonomous agent work with a purpose-built UI so both agents and humans can work with the same design tools.

Is Agent-Native free?

Agent-Native is open-source under the MIT license. You can use it freely and modify it for your own purposes.

How do I connect it to Claude or Cursor?

The server is available as a remote MCP server at https://design.agent-native.com/mcp. You can add it to Claude or Cursor by configuring the remote connection in your MCP settings.

What can agents do with this server?

Agents can generate interactive designs, refine layouts, apply edits, and work with design systems. The same actions work in the UI and through the agent, so designs created by agents appear immediately in the visual editor.

Do I need to set up authentication?

The README does not specify authentication requirements. Check the Agent-Native documentation or the MCP server endpoint for details on any required setup.

Can I use this with my own design system?

Yes. Agent-Native is designed to work with your own infrastructure, databases, and tools. You can integrate it with your design system and brand guidelines.

README (reference)

Source of truth, from the repository.

Agent-Native

Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Define each capability once as an action: the agent uses it as a tool, and the UI calls it from code.

Quick start

npx --yes @agent-native/core@latest create my-agent --standalone --template chat

Follow the getting started guide for a full intro to the framework.

Why build agents with UIs?

Coding agents work with more than a text box. Their environment provides context, tools, files, tests, and previews that make their capabilities and results visible.

Knowledge work needs that same kind of environment. A UI shows what an agent can do and gives people familiar ways to inspect, edit, approve, and share its work.

How Agent-Native works

Shared actions. The agent calls each capability as a tool, and the UI calls it from code. Both paths use the same validation, permissions, and implementation.
Shared data. Work done by the agent appears in the UI, and work done in the UI is available to the agent.
Shared application state. The agent receives relevant UI state, such as the current page, selected record, or active view.

The agent does not click through the UI. It works through the same action layer as the UI.

Example: a shared action

Create actions/hello.ts:

import { defineAction } from "@agent-native/core/action";
import { z } from "zod";

// One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
export default defineAction({
  description: "Return a friendly greeting.",
  schema: z.object({
    name: z.string().default("world").describe("Name to greet"),
  }),
  http: { method: "GET" },
  run: async ({ name }) => {
    return { message: `Hello, ${name}!` };
  },
});

The agent receives hello as a tool. React calls the same function with useActionQuery("hello", { name: "Alex" }). Agent-Native also exposes it through HTTP, MCP, A2A, and the CLI.

Included

Agent chat: Let people delegate work, ask questions, and review results in the same UI.
Authentication and permissions: Control who can access and change shared work.
Skills and memory: Give agents reusable expertise and persistent context.
Automations: Run agent work on schedules or events.
Agent teams: Delegate work to specialist agents in the same workspace or across connected agents.
PostgreSQL backend: Use PostgreSQL in production and PGlite for local development on any Nitro-compatible host.

Example: edit a running app visually

Use /visual-edit in Claude Code to edit a running app on a canvas instead of prompting for each small UI nudge. Compare live pages together, then ask Claude to apply the chosen edits to your source. For example:

/visual-edit the onboarding flow, plus home at every breakpoint

Review the onboarding screens alongside Home at desktop, tablet, and mobile sizes, adjust a button's color or spacing directly, then ask Claude to apply the pending edits to your source. See the Visual Edit guide for the full walkthrough and sharing details.

Bring your LLM, SQL database, tools, and infrastructure. Everything you build stays yours.

See Agent-Native in action:

https://github.com/user-attachments/assets/ef51644b-6506-46d8-8083-0af7b7e5b65c