Agent-Native design tool - create and edit visual designs with agent assistance
io.github.BuilderIO/agent-native-design — MCP Server Model Context Protocol
The MCP server “io.github.BuilderIO/agent-native-design” is an Agent-Native design tool intended to create and edit visual designs with agent assistance.
🛠️ Key Features
Agent-assisted creation of visual designs
Agent-assisted editing of visual designs
🚀 Use Cases
Creating new visual design assets with agent assistance
Revising existing visual designs with agent assistance
⚡ Developer Benefits
Provides an MCP model context for agent-driven visual design workflows
⚠️ Limitations
Available metadata only specifies “create and edit visual designs with agent assistance”; no additional capabilities, tools, or integration details are provided here.
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.
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:
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.exportdefaultdefineAction({
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.