# Agent-Native Plans MCP server

> Lets an AI client create and review visual plans with diagrams, wireframes, prototypes, and annotations, then share them.

- Repository: https://github.com/BuilderIO/agent-native
- Page: https://hostedmcp.org/servers/builderio/agent-native-plan
- Official: yes
- Transport: remote
- Stars: 7707
- License: MIT
- Latest version: 1.0.0

## Install

### Claude Code

```sh
claude mcp add --transport http agent-native-plan https://plan.agent-native.com/mcp
```

### Cursor (`~/.cursor/mcp.json`)

```json
{
  "mcpServers": {
    "agent-native-plan": {
      "url": "https://plan.agent-native.com/mcp"
    }
  }
}
```

### VS Code (`.vscode/mcp.json`)

```json
{
  "servers": {
    "agent-native-plan": {
      "type": "http",
      "url": "https://plan.agent-native.com/mcp"
    }
  }
}
```

### VS Code CLI

```sh
code --add-mcp '{"name":"agent-native-plan","type":"http","url":"https://plan.agent-native.com/mcp"}'
```

### Codex

```sh
codex mcp add agent-native-plan --url https://plan.agent-native.com/mcp
```

### Codex config.toml (`~/.codex/config.toml`)

```toml
[mcp_servers.agent-native-plan]
url = "https://plan.agent-native.com/mcp"
```

### Gemini CLI

```sh
gemini mcp add -s user --transport http agent-native-plan https://plan.agent-native.com/mcp
```

### Gemini settings.json (`~/.gemini/settings.json`)

```json
{
  "mcpServers": {
    "agent-native-plan": {
      "url": "https://plan.agent-native.com/mcp",
      "type": "http"
    }
  }
}
```

## FAQ

### What can I create with Agent-Native Plans?

You can create and review visual plans that include diagrams, wireframes, and prototypes, with annotations and sharing.

### Can I edit a running app visually instead of prompting each change?

Yes, the /visual-edit skill in Claude Code lets you edit a running app on a canvas, compare live pages, and have the chosen edits applied to source.

### Does the agent interact with the UI by clicking?

No, the agent works through the same shared action layer as the UI rather than clicking through it.

### How are capabilities exposed to the agent?

Each capability is defined once as an action, which the agent uses as a tool and the UI calls from code, and it is also exposed through HTTP, MCP, A2A, and the CLI.