# Agent-Native MCP server

> Lets an AI client define actions once and use them as tools to build and edit visual designs and agent-powered apps.

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

## Install

### Claude Code

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

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

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

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

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

### VS Code CLI

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

### Codex

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

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

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

### Gemini CLI

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

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

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

## FAQ

### What is Agent-Native?

Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Capabilities are defined once as actions shared by the agent and the UI.

### How do I create a new Agent-Native agent?

Run the create command with the standalone flag and a template, such as the chat template.

### Can the agent and UI share the same actions?

Yes. Each action is called by the agent as a tool and from UI code, using the same validation, permissions, and implementation. Actions are also exposed through HTTP, MCP, A2A, and the CLI.

### Does Agent-Native support visual editing of a running app?

Yes, you can use /visual-edit in Claude Code to edit a running app on a canvas, compare live pages, and then apply the chosen edits to your source.

### What database does Agent-Native use?

It uses PostgreSQL in production and PGlite for local development on any Nitro-compatible host.