Structured visual plans and PR recaps with diagrams, prototypes, annotations, and sharing
io.github.BuilderIO/agent-native-plan — Model Context Protocol (MCP) Server
The MCP server provides structured visual plans and supports PR recaps. It is described as producing diagrams, prototypes, and annotations, with functionality for sharing the resulting artifacts. The service is identified by the name io.github.BuilderIO/agent-native-plan and corresponds to the slug io-github-builderio-agent-native-plan.
🛠️ Key Features
Structured visual plans
PR recaps
Diagrams
Prototypes
Annotations
Sharing
🚀 Use Cases
Creating and sharing structured visual plans
Summarizing pull request (PR) work with recaps
Communicating diagrams, prototypes, and annotated artifacts
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.