Mapbox Mcp Devkit Patterns
Connect Claude, Cursor, or Copilot to Mapbox’s hosted MCP DevKit so agents can manage styles, tokens, validation, and docs while you build map features.
Overview
Mapbox MCP DevKit Patterns is an agent skill for the Build phase that shows how to wire Mapbox’s hosted or self-hosted MCP DevKit into Claude, Cursor, and Copilot for style, token, and docs APIs.
Install
npx skills add https://github.com/mapbox/mapbox-agent-skills --skill mapbox-mcp-devkit-patternsWhat is this skill?
- Documents hosted MCP at https://mcp-devkit.mapbox.com/mcp—no local server install required
- Provides Claude Desktop npx mcp-remote config and Claude Code ~/.claude.json URL entries
- Includes Cursor .cursor/mcp.json and VS Code Copilot http server blocks
- Covers self-hosted clone path from github.com/mapbox/mcp-devkit-server for advanced setups
- Focuses DevKit capabilities: style management, token creation, validation, and documentation APIs
- Documents 4 client setup targets: Claude Desktop, Claude Code, Cursor, VS Code Copilot
Adoption & trust: 644 installs on skills.sh; 64 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are adding Mapbox to a product but your agent lacks a consistent MCP connection and you keep re-explaining token and style setup.
Who is it for?
Builders starting Mapbox + agent workflows who want the hosted MCP URL pattern across Claude, Cursor, and VS Code.
Skip if: Runtime map rendering tutorials only, or teams forbidden from network MCP to third-party hosts without security review.
When should I use this skill?
Setting up Mapbox MCP DevKit in an AI coding workflow for styles, tokens, validation, or docs.
What do I get? / Deliverables
Your editor or agent loads the Mapbox DevKit MCP with copy-paste config so assistants can call Mapbox developer APIs during implementation.
- Working mcp.json or claude_desktop_config.json Mapbox DevKit entry
- Agent-callable Mapbox developer API tools via MCP
Recommended Skills
Journey fit
Build is where third-party map SDKs and MCP tooling get wired; this skill is integration setup and API patterns, not distribution or ops monitoring. Integrations subphase matches MCP server configuration and Mapbox developer API access from coding agents.
How it compares
MCP integration patterns for Mapbox DevKit—not the separate Mapbox Search or Navigation skill packages.
Common Questions / FAQ
Who is mapbox-mcp-devkit-patterns for?
Solo developers and agent users integrating Mapbox who need standard MCP config snippets for Claude Desktop, Claude Code, Cursor, and VS Code Copilot.
When should I use mapbox-mcp-devkit-patterns?
Use it during Build integrations when connecting the Mapbox MCP DevKit server, choosing hosted versus self-hosted setup, or letting an agent manage styles and tokens.
Is mapbox-mcp-devkit-patterns safe to install?
Hosted MCP calls Mapbox endpoints over the network—review the Security Audits panel on this page and scope Mapbox tokens before giving agents create-token tools.
SKILL.md
READMESKILL.md - Mapbox Mcp Devkit Patterns
# Mapbox MCP DevKit Patterns Quick reference for using Mapbox MCP DevKit Server in AI coding workflows. ## What is DevKit? MCP server that gives AI assistants access to Mapbox developer APIs for style management, token creation, validation, and documentation. **Repo:** <https://github.com/mapbox/mcp-devkit-server> ## Setup ### Hosted (Recommended) Use Mapbox's hosted server - no installation needed. **Claude Desktop:** ```json // ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) // %APPDATA%\Claude\claude_desktop_config.json (Windows) { "mcpServers": { "mapbox-devkit-mcp": { "command": "npx", "args": ["mcp-remote", "https://mcp-devkit.mapbox.com/mcp"] } } } ``` **Claude Code:** User-level (all projects) in `~/.claude.json`: ```json { "mcpServers": { "mapbox-devkit": { "url": "https://mcp-devkit.mapbox.com/mcp" } } } ``` Or project-level (specific project) in `.mcp.json`: ```json { "mcpServers": { "mapbox-devkit": { "url": "https://mcp-devkit.mapbox.com/mcp" } } } ``` **Cursor:** ```json // .cursor/mcp.json or ~/.cursor/mcp.json { "mcpServers": { "mapbox-devkit": { "url": "https://mcp-devkit.mapbox.com/mcp" } } } ``` **VS Code with Copilot:** ```json // mcp.json { "servers": { "mapbox-devkit": { "type": "http", "url": "https://mcp-devkit.mapbox.com/mcp" } } } ``` ### Self-Hosted (Advanced) ```bash git clone https://github.com/mapbox/mcp-devkit-server.git cd mcp-devkit-server && npm install && npm run build ``` Configure in Claude Desktop config: ```json { "mcpServers": { "MapboxDevKitServer": { "command": "node", "args": ["/Users/username/github-projects/mcp-devkit-server/dist/esm/index.js"], "env": { "MAPBOX_ACCESS_TOKEN": "some token" } } } } ``` ## Core Tools ### Style Management | Tool | Purpose | Example Use | | ----------------------- | ------------------------- | ------------------------------------------ | | **create_style_tool** | Create new style | "Create dark mode style with 3D buildings" | | **list_styles_tool** | List all styles | "Show my styles" | | **retrieve_style_tool** | Get style details | "Show details of my light style" | | **update_style_tool** | Modify existing style | "Make roads more prominent" | | **delete_style_tool** | Delete a style | "Delete my test style" | | **preview_style_tool** | Generate preview URL | "Preview this style at downtown SF" | | **style_builder_tool** | Build style from template | "Create a style for navigation" | | **validate_style_tool** | Check style JSON | "Validate this style" | | **compare_styles_tool** | Compare two styles | "Compare light vs dark style" | | **optimize_style_tool** | Optimize style JSON | "Optimize this style for performance" | ### Token Management | Tool | Purpose | Example Use | | --------------------- | --------------------- | ---------------------------- | | **create_token_tool** | Generate access token | "Create token for localhost" | | **list_tokens_tool** | Show all tokens | "List my tokens and scopes" | ### Validation & Analysis | Tool | Purpose | Example Use | | ----------------------------- | ---------------------- | ----------------------------------------- | | **validate_geojson_tool** | Check GeoJSON | "Validate this GeoJSON" | | **validate_expression_tool** | Check expression | "Is this expression valid?" | | **geojson_preview_tool** | Preview GeoJSON on map | "Preview this GeoJSON"