---
title: "MCP Server"
description: "The docs site ships a built-in MCP Server for AI agents to search components, composables, and examples — plus enhanced tools like coordinate conversion."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/getting-started/ai/mcp"
---
# MCP Server

> The docs site ships a built-in MCP Server for AI agents to search components, composables, and examples — plus enhanced tools like coordinate conversion.

## What is MCP?

MCP (Model Context Protocol) is a standardized protocol that lets AI assistants access external data sources and tools. The docs site ships a built-in MCP Server exposed at the `/mcp` endpoint. Tools like Claude Code, Cursor, and VS Code can connect directly to search component information, source code, and usage examples in context.

The server provides structured access to this library so AI tools can more accurately understand and assist with `@movk/mapbox` development. The endpoint is `https://mapbox.mhaibaraai.cn/mcp`.

## Available Resources

The MCP Server exposes the following discoverable resources:

- **resource://docs/components**: Browse all components and their categories
- **resource://docs/composables**: Browse all composables and their categories
- **resource://docs/examples**: Browse all code examples
- **resource://docs/documentation-pages**: Browse all documentation pages
- **resource://docs/mapbox-conventions**: Hard constraints for the library's declarative patterns (SSR, container height, `omitUndefined`, camera v-model, layer lifecycle, etc.)
- **resource://docs/basemap-styles**: Available basemap presets (Mapbox official styles and Tianditu layer types: vec/img/ter)

In tools like Claude Code, use `@` to reference these resources.

## Available Tools

The MCP Server provides the following tools by category:

### Search Tools

- **search-composables**: Search composables by name or description; returns all composables when called with no arguments
- **search-icons**: Search for icons in Iconify collections (defaults to `lucide`), returning names in `i-{prefix}-{name}` format

### Documentation Tools

- **search-documentation**: Search documentation pages by title, description, or section; returns all pages with no arguments
- **get-documentation-page**: Retrieve page content by path, with optional `headings` to fetch only specific h2 sections

### Component Tools

- **get-component**: Retrieve component documentation, with optional `sections` (`usage` / `examples` / `api` / `theme` / `changelog`) to fetch only relevant parts
- **get-component-metadata**: Retrieve component props / slots / emits metadata (lightweight, no body content)

### Example Tools

- **list-examples**: List all available examples
- **get-example**: Retrieve the implementation code for a specific example

### Mapbox Tools

- **list-mapbox-components**: List all capabilities by category (core / layers / controls / effects / environment / extensions / composables / utils), with optional category or keyword filtering
- **convert-coordinates**: Convert coordinates between WGS84 / GCJ02 / BD09, supporting a single point or an array of points
- **get-layer-paint-schema**: Return common `paint` / `layout` keys and a minimal scaffold for a given layer `type` (circle / line / fill / symbol / heatmap / fill-extrusion / raster)

## Available Prompts

The MCP Server provides the following guided prompts:

- **find_component_for_usecase**: Recommend the right component for a given use case
- **implement_component_with_props**: Generate a component implementation based on documentation and metadata
- **build-mapbox-map**: Assemble a map from a task description, using only documented components and following library conventions

In tools that support prompts, invoke them with `/`.

## Configuration

The MCP Server uses HTTP transport and can be connected from various AI tools. The name is `movk-mapbox` and the URL is `https://mapbox.mhaibaraai.cn/mcp`.

### Claude Code

> [!NOTE]
> 
> Make sure Claude Code is installed — see the 
> 
> Anthropic documentation
> 
>  for setup instructions.

Add the server via CLI:

```bash [Terminal]
claude mcp add --transport http movk-mapbox https://mapbox.mhaibaraai.cn/mcp
```

### Claude Desktop

1. Open Claude Desktop and go to **Settings** > **Developer**
2. Click **Edit Config** to open the local configuration directory
3. Edit `claude_desktop_config.json`:

```json [claude_desktop_config.json]
{
  "mcpServers": {
    "movk-mapbox": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mapbox.mhaibaraai.cn/mcp"
      ]
    }
  }
}
```

1. Restart Claude Desktop

### Cursor

<install-button url="https://mapbox.mhaibaraai.cn/mcp">



</install-button>

Create or update `.cursor/mcp.json` in your project root:

```json [.cursor/mcp.json]
{
  "mcpServers": {
    "movk-mapbox": {
      "type": "http",
      "url": "https://mapbox.mhaibaraai.cn/mcp"
    }
  }
}
```

### VS Code

<install-button url="https://mapbox.mhaibaraai.cn/mcp" ide="vscode">



</install-button>

> [!NOTE]
> 
> Make sure the 
> 
> GitHub Copilot
> 
>  and 
> 
> GitHub Copilot Chat
> 
>  extensions are installed.

Create or edit `mcp.json` in your project's `.vscode` directory:

```json [.vscode/mcp.json]
{
  "servers": {
    "movk-mapbox": {
      "type": "http",
      "url": "https://mapbox.mhaibaraai.cn/mcp"
    }
  }
}
```

### Windsurf

1. Open Windsurf and go to **Settings** > **Windsurf Settings** > **Cascade**
2. Click **Manage MCPs** > **View raw config**
3. Add the configuration:

```json [mcp_config.json]
{
  "mcpServers": {
    "movk-mapbox": {
      "type": "http",
      "url": "https://mapbox.mhaibaraai.cn/mcp"
    }
  }
}
```

### ChatGPT

> [!NOTE]
> 
> MCP-based custom connectors are available for ChatGPT Pro and Plus accounts (web).

1. Enable developer mode: **Settings** > **Connectors** > **Advanced settings** > **Developer mode**
2. Open ChatGPT settings
3. Create a new connector in the Connectors tab: name `Movk Mapbox`, MCP server URL `https://mapbox.mhaibaraai.cn/mcp`, authentication `None`
4. Click Create

### OpenCode

Create `opencode.json` in your project root:

```json [opencode.json]
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "movk-mapbox": {
      "type": "remote",
      "url": "https://mapbox.mhaibaraai.cn/mcp",
      "enabled": true
    }
  }
}
```

## Usage Examples

Once connected, you can ask your AI assistant directly — it will automatically invoke the tools above:

- "List all layer components by category"
- "Get the props for MapboxLayer"
- "Convert these WGS84 coordinates to GCJ02"
- "What are the common paint properties for a circle layer?"
- "Find capabilities related to drawing"
- "Use build-mapbox-map to build a map with a Tianditu vector basemap and a navigation control"

> [!TIP]
> 
> When fetching component docs, use the 
> 
> sections
> 
>  parameter (
> 
> usage
> 
>  / 
> 
> examples
> 
>  / 
> 
> api
> 
>  / 
> 
> theme
> 
>  / 
> 
> changelog
> 
> ) to retrieve only what you need. For other pages, use 
> 
> headings
> 
>  to specify h2 titles (e.g. 
> 
> ["Introduction", "API"]
> 
> ) and reduce response size.

> [!TIP]
> 
> Use this library's MCP for wrapper components and conventions; for native Mapbox GL API and style spec questions, use the official 
> 
> mapbox-docs-mcp
> 
> . The repo's root 
> 
> .mcp.json
> 
>  registers both — they complement each other.


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.