> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP servers

> Connect external tool servers via Model Context Protocol

Model Context Protocol (MCP) lets you connect external tool servers to the AI agent. MCP tools extend the agent's capabilities beyond the built-in tools.

## Built-in MCP server

BRICKS projects include a built-in `bricks-ctor` MCP server that is automatically configured during `bun install`. It provides tools for compiling, previewing, searching icons and Lottie animations, selecting Hugging Face models, and managing media assets.

<Card title="bricks-ctor built-in MCP server" icon="cube" href="/ctor-pkg/mcp-server">
  See the full tool reference in the bricks-ctor docs.
</Card>

<Info>
  When the `bricks-ctor` server runs inside CTOR, its `preview` tool is suppressed so the agent uses the embedded [Preview pane](/ctor/reference/preview) instead — screenshots match what you see in the pane, and a single simulator handles both the visible preview and agent captures. Other agents (Claude Code, Codex, the CLI) keep using the MCP `preview` tool as usual.
</Info>

## Configuration

MCP servers are configured in a `.mcp.json` file in your project root:

```json theme={null}
{
  "mcpServers": {
    "my-server": {
      "command": "npx",
      "args": ["-y", "some-mcp-server"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}
```

## Transport types

### stdio

Spawns the MCP server as a child process that communicates over stdin/stdout.

```json theme={null}
{
  "mcpServers": {
    "my-server": {
      "command": "npx",
      "args": ["-y", "some-mcp-server"],
      "env": {}
    }
  }
}
```

| Field     | Description                           |
| --------- | ------------------------------------- |
| `command` | The command to run                    |
| `args`    | Array of command arguments            |
| `env`     | Environment variables for the process |

### HTTP

Connects to a remote MCP server over HTTP.

```json theme={null}
{
  "mcpServers": {
    "remote-server": {
      "url": "https://mcp.example.com/sse"
    }
  }
}
```

| Field | Description             |
| ----- | ----------------------- |
| `url` | The server endpoint URL |

## Managing MCP servers

Click **MCP** in the sidebar to open the MCP panel. The panel shows:

* A list of configured servers with their connection status
* **Green dot** — connected, with the number of available tools
* **Red dot** — disconnected or errored
* An expandable tool list for each server

### Edit configuration

The MCP panel includes a config editor where you can edit your `.mcp.json` directly. Click **Save** to apply changes and **Reconnect** to re-establish server connections.

## Tool integration

Once connected, MCP tools appear alongside the built-in tools. The agent can discover and call them like any other tool. Tool results support both text and image content.

MCP server connections are cached per project and cleaned up automatically when the app quits.