Agent-Native Plan MCP Server

io.github.BuilderIO/agent-native-plan

Create structured visual plans and PR recaps with diagrams, prototypes, and annotations powered by Agent-Native.

What is the Agent-Native Plan MCP server?

Agent-Native Plan is an MCP server that enables agents to create and manage structured visual plans with diagrams, prototypes, annotations, and sharing capabilities. It integrates with the Agent-Native framework to let AI agents generate visual planning artifacts alongside traditional text-based work.

Agent-Native Plan allows Claude and other AI agents to create visual plans, wireframes, and PR recaps with diagrams and prototypes. It's useful for teams that need agents to produce structured, shareable visual documentation alongside code and text work, leveraging the Agent-Native framework's shared action layer.

How to install Agent-Native Plan

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-plan": {
      "url": "https://plan.agent-native.com/mcp"
    }
  }
}

Tools & capabilities

Tools this server exposes to the agent.

Create visual plans — Generate structured visual plans with diagrams, wireframes, and prototypes
Generate PR recaps — Create pull request recaps with visual annotations and diagrams
Share plans — Share and collaborate on visual plans with team members

Use cases

Generate visual architecture diagrams and system design plans for engineering projects
Create wireframes and prototypes for product features during planning phases
Produce annotated PR recaps with visual diffs and design changes for code reviews
Build visual onboarding flows and user journey diagrams
Document and share sprint plans with embedded diagrams and mockups

Agent-Native Plan MCP server FAQ

What is Agent-Native Plan?

Agent-Native Plan is an MCP server that integrates with the Agent-Native framework to enable AI agents to create structured visual plans, diagrams, prototypes, and PR recaps with annotations and sharing capabilities.

Is Agent-Native Plan free?

Agent-Native is open-source under the MIT license. The MCP server is available at https://plan.agent-native.com/mcp as a remote streamable-http endpoint.

How do I use it with Claude or Cursor?

Connect the remote MCP endpoint https://plan.agent-native.com/mcp in your Claude or Cursor configuration to enable Agent-Native Plan capabilities for your AI agent.

What does it integrate with?

Agent-Native Plan works with the Agent-Native framework, which provides a TypeScript foundation for building agents with shared actions, data, and application state between UI and agent layers.

Can I share plans with my team?

Yes, Agent-Native Plan includes built-in sharing capabilities so you can collaborate on visual plans, diagrams, and prototypes with team members.

What types of visuals can it create?

The server supports diagrams, wireframes, prototypes, annotations, and visual documentation like architecture plans, user flows, and PR recaps.

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