mapbox-mcp-devkit-patterns by mapbox/mapbox-agent-skills
npx skills add https://github.com/mapbox/mapbox-agent-skills --skill mapbox-mcp-devkit-patterns此技能提供了将 Mapbox MCP 开发套件服务器集成到 AI 编码工作流中的模式,以加速 Mapbox 应用程序开发。
Mapbox MCP 开发套件服务器 是一个模型上下文协议服务器,让 AI 助手能够直接访问 Mapbox 开发者 API:
主要优势: 通过让 AI 处理开发者 API 操作,更快地构建 Mapbox 应用程序。
最简单的设置 - 使用 Mapbox 托管的 DevKit MCP 服务器:
https://mcp-devkit.mapbox.com/mcp
无需安装,只需配置您的 AI 助手。
身份验证: 托管服务器支持 OAuth,因此无需配置令牌!只需添加服务器 URL:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
添加到 ~/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"]
}
}
}
首次使用时,系统将提示您通过 OAuth 进行身份验证。
Claude Code 支持用户级和项目级 MCP 配置:
用户级(适用于所有项目)- ~/.claude.json:
{
"mcpServers": {
"mapbox-devkit": {
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
项目级(特定项目,可提交到 git)- 仓库根目录下的 .mcp.json:
{
"mcpServers": {
"mapbox-devkit": {
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
有关配置范围的更多详细信息,请参阅 Claude Code 设置文档。
创建或编辑 .cursor/mcp.json(项目本地)或 ~/.cursor/mcp.json(全局):
{
"mcpServers": {
"mapbox-devkit": {
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
保存后,重启 Cursor。出现提示时点击“需要身份验证”并按照 OAuth 流程操作。
创建或编辑 mcp.json:
{
"servers": {
"mapbox-devkit": {
"type": "http",
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
保存后,在 VS Code 中刷新 MCP 服务。需要启用 MCP 支持的 GitHub Copilot。
使用支持 OAuth 的托管 URL 进行类似配置。
用于开发、调试或自定义:
# 克隆 DevKit 服务器
git clone https://github.com/mapbox/mcp-devkit-server.git
cd mcp-devkit-server
# 安装依赖
npm install
# 构建服务器
npm run build
自托管配置(Claude Desktop):
{
"mcpServers": {
"MapboxDevKitServer": {
"command": "node",
"args": ["/Users/username/github-projects/mcp-devkit-server/dist/esm/index.js"],
"env": {
"MAPBOX_ACCESS_TOKEN": "some token"
}
}
}
}
将 /Users/username/github-projects/ 替换为您的实际路径。
询问您的 AI 助手:
"列出可用的 Mapbox DevKit 工具"
您应该看到 30 多个工具,包括:
create_style_tool、list_styles_tool、update_style_tool、delete_style_tool、preview_style_tool 等。create_token_tool、list_tokens_toolvalidate_geojson_tool、validate_style_tool、validate_expression_toolbounding_box_tool、coordinate_conversion_tool、tilequery_toolget_latest_mapbox_docs_tool通过对话创建样式:
"创建一个具有 3D 建筑、突出显示绿色公园、水域使用蓝色的深色模式 Mapbox 样式。将其命名为 'app-dark-mode'。"
AI 将使用 create_style_tool 工具来:
更新现有样式:
"更新样式 mapbox://styles/username/style-id,使道路更突出,并将建筑不透明度降低到 0.6"
验证样式:
"验证此样式 JSON:[粘贴样式]"
创建具有作用域的令牌:
"创建一个具有以下作用域的 Mapbox 令牌:
- styles:read
- fonts:read
- datasets:read
将其限制在域名:localhost, example.com"
列出现有令牌:
"显示我所有的 Mapbox 令牌及其作用域"
用例: 为不同环境(开发、预发布、生产)生成具有适当限制的令牌。
验证 GeoJSON:
"验证此 GeoJSON 并显示任何错误:
{
\"type\": \"FeatureCollection\",
\"features\": [...]
}"
验证表达式:
"这是一个有效的 Mapbox 表达式吗?
['case', ['<', ['get', 'population'], 1000], 'small', 'large']"
坐标转换:
"将经度 -122.4194,纬度 37.7749 从 WGS84 转换为 Web Mercator"
获取样式规范信息:
"Mapbox GL JS 中填充图层有哪些可用属性?"
检查令牌作用域:
"我需要哪些令牌作用域才能使用 Directions API?"
Streets v8 字段:
"Streets v8 的 'road' 图层中有哪些可用字段?"
工作流:
示例对话:
您:"为房地产应用创建一个样式 - 突出显示物业边界,显著展示公园,道路颜色柔和"
AI:[创建样式,返回 ID 和预览 URL]
您:"将物业边界设为紫色并加粗"
AI:[更新样式]
您:"完美!现在为学校和交通添加 POI 图标"
AI:[使用符号更新样式]
优势:
工作流:
示例:
您:"创建三个令牌:
1. 开发 - 所有作用域,仅限 localhost
2. 预发布 - 只读作用域,staging.example.com
3. 生产 - 最小作用域,仅限 example.com"
AI:[创建三个具有指定配置的令牌]
优势:
工作流:
示例:
您:"我有一个包含餐厅位置的 GeoJSON。验证它并检查是否有任何缺失的必需属性"
AI:[验证,报告任何问题]
您:"现在创建一个样式,用图标显示这些餐厅,图标大小根据评分调整。先验证表达式。"
AI:[验证表达式,然后创建样式]
优势:
工作流:
示例:
您:"如何在 Mapbox GL JS 中创建等值区域图?"
AI:[检索文档,提供模式]
您:"使用该模式为人口密度数据创建一个样式"
AI:[按照文档记录的模式创建样式]
优势:
开发套件是对 Studio 的补充,而非替代:
模式: 使用开发套件进行初始创建,使用 Studio 进行细化。
开发套件封装了 Mapbox API,但不替代它们:
模式: 在开发期间使用开发套件,在生产代码中使用 API。
模式: 将生成的样式保存到 git 以供审查和回滚。
您:"为主页地图创建一个新样式,并将 JSON 保存到 styles/home-map.json"
AI:[创建样式,将 JSON 写入文件]
您:[审查,提交到 git]
prod-light-mode 而非 style-123检查:
index.js 的路径正确吗?解决方案: 更改配置后重启 AI 助手。
检查:
styles:write 作用域解决方案: 先使用 validate_style_tool 工具。
检查:
tokens:write 作用域解决方案: 通过开发套件检查令牌作用域文档。
检查:
解决方案: 请 AI 解释验证错误。
您:"我正在构建一个餐厅查找器应用。创建:
1. 一个强调餐厅的浅色、中性样式
2. 一个用于 localhost 且具有最小作用域的令牌
3. 验证这个包含餐厅位置的 GeoJSON:[粘贴]"
AI:[创建样式、令牌、验证数据]
您:"添加过滤器,只显示 4 星以上的餐厅"
AI:[使用表达式更新样式]
您:"生成预览 URL"
AI:[返回预览]
您:"为开发、预发布、生产环境设置样式和令牌:
- 开发:完全访问,localhost
- 预发布:只读,staging.example.com
- 生产:最小作用域,example.com
每个环境都需要自己的样式变体。"
AI:[创建 3 个样式和 3 个具有指定配置的令牌]
您:"我从供应商那里收到了 GeoJSON。验证它,检查:
- 正确的坐标顺序
- 有效的几何类型
- 必需属性:名称、地址、类别"
AI:[验证,报告问题]
您:"修复问题并将清理后的数据保存到 data/locations.json"
AI:[修复,保存文件]
在以下情况下调用此技能:
每周安装
109
仓库
GitHub 星标
35
首次出现
2026年3月5日
安全审计
安装于
github-copilot105
opencode104
gemini-cli103
cline103
codex103
cursor103
This skill provides patterns for integrating the Mapbox MCP DevKit Server into AI coding workflows to accelerate Mapbox application development.
The Mapbox MCP DevKit Server is a Model Context Protocol (MCP) server that gives AI assistants direct access to Mapbox developer APIs:
Key benefit: Build Mapbox applications faster by letting AI handle developer API operations.
Easiest setup - Use Mapbox's hosted DevKit MCP server at:
https://mcp-devkit.mapbox.com/mcp
No installation required, just configure your AI assistant.
Authentication: The hosted server supports OAuth, so no token configuration needed! Simply add the server URL:
Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
{
"mcpServers": {
"mapbox-devkit-mcp": {
"command": "npx",
"args": ["mcp-remote", "https://mcp-devkit.mapbox.com/mcp"]
}
}
}
You'll be prompted to authenticate via OAuth on first use.
Claude Code supports both user-level and project-level MCP configuration:
User-level (applies to all projects) - ~/.claude.json:
{
"mcpServers": {
"mapbox-devkit": {
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
Project-level (specific project, can commit to git) - .mcp.json in repository root:
{
"mcpServers": {
"mapbox-devkit": {
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
See Claude Code settings documentation for more details on configuration scopes.
Create or edit .cursor/mcp.json (project-local) or ~/.cursor/mcp.json (global):
{
"mcpServers": {
"mapbox-devkit": {
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
After saving, restart Cursor. Click "Needs authentication" when prompted and follow the OAuth flow.
Create or edit mcp.json:
{
"servers": {
"mapbox-devkit": {
"type": "http",
"url": "https://mcp-devkit.mapbox.com/mcp"
}
}
}
After saving, refresh the MCP service in VS Code. Requires GitHub Copilot with MCP support enabled.
Similar configuration using the hosted URL with OAuth support.
For development, debugging, or customization:
# Clone the DevKit server
git clone https://github.com/mapbox/mcp-devkit-server.git
cd mcp-devkit-server
# Install dependencies
npm install
# Build the server
npm run build
Configuration for self-hosted (Claude Desktop):
{
"mcpServers": {
"MapboxDevKitServer": {
"command": "node",
"args": ["/Users/username/github-projects/mcp-devkit-server/dist/esm/index.js"],
"env": {
"MAPBOX_ACCESS_TOKEN": "some token"
}
}
}
}
Replace /Users/username/github-projects/ with your actual path.
Ask your AI assistant:
"List the available Mapbox DevKit tools"
You should see 30+ tools including:
create_style_tool, list_styles_tool, update_style_tool, delete_style_tool, preview_style_tool, etc.create_token_tool, list_tokens_toolvalidate_geojson_tool, validate_style_tool, validate_expression_toolCreate a style conversationally:
"Create a dark mode Mapbox style with 3D buildings, emphasize parks in green,
and use blue for water. Name it 'app-dark-mode'."
The AI will use create_style_tool tool to:
Update existing style:
"Update style mapbox://styles/username/style-id to make roads more prominent
and reduce building opacity to 0.6"
Validate style:
"Validate this style JSON: [paste style]"
Create scoped token:
"Create a Mapbox token with these scopes:
- styles:read
- fonts:read
- datasets:read
Restrict it to domains: localhost, example.com"
List existing tokens:
"Show me all my Mapbox tokens and their scopes"
Use case: Generate tokens for different environments (development, staging, production) with appropriate restrictions.
Validate GeoJSON:
"Validate this GeoJSON and show any errors:
{
\"type\": \"FeatureCollection\",
\"features\": [...]
}"
Validate expressions:
"Is this a valid Mapbox expression?
['case', ['<', ['get', 'population'], 1000], 'small', 'large']"
Coordinate conversion:
"Convert longitude -122.4194, latitude 37.7749 from WGS84 to Web Mercator"
Get style spec info:
"What properties are available for fill layers in Mapbox GL JS?"
Check token scopes:
"What token scopes do I need to use the Directions API?"
Streets v8 fields:
"What fields are available in the 'road' layer of Streets v8?"
Workflow:
Example conversation:
You: "Create a style for a real estate app - emphasize property boundaries,
show parks prominently, muted roads"
AI: [Creates style, returns ID and preview URL]
You: "Make the property boundaries purple and thicker"
AI: [Updates style]
You: "Perfect! Now add POI icons for schools and transit"
AI: [Updates style with symbols]
Benefits:
Workflow:
Example:
You: "Create three tokens:
1. Development - all scopes, localhost only
2. Staging - read-only scopes, staging.example.com
3. Production - minimal scopes, example.com only"
AI: [Creates three tokens with specified configurations]
Benefits:
Workflow:
Example:
You: "I have GeoJSON with restaurant locations. Validate it and check for
any missing required properties"
AI: [Validates, reports any issues]
You: "Now create a style that displays these restaurants with icons sized
by rating. Validate the expression first."
AI: [Validates expression, then creates style]
Benefits:
Workflow:
Example:
You: "How do I create a choropleth map in Mapbox GL JS?"
AI: [Retrieves docs, provides pattern]
You: "Create a style with that pattern for population density data"
AI: [Creates style following documented pattern]
Benefits:
DevKit complements, doesn't replace Studio:
Pattern: Use DevKit for initial creation, Studio for refinement.
DevKit wraps Mapbox APIs but doesn't replace them:
Pattern: Use DevKit during development, APIs in production code.
Pattern: Save generated styles to git for review and rollback.
You: "Create a new style for the home page map and save the JSON to
styles/home-map.json"
AI: [Creates style, writes JSON to file]
You: [Review, commit to git]
prod-light-mode not style-123Check:
index.js correct?Solution: Restart AI assistant after config changes.
Check:
styles:write scopeSolution: Use validate_style_tool tool first.
Check:
tokens:write scopeSolution: Check token scope documentation via DevKit.
Check:
Solution: Ask AI to explain validation errors.
You: "I'm building a restaurant finder app. Create:
1. A light, neutral style emphasizing restaurants
2. A token for localhost with minimal scopes
3. Validate this GeoJSON with restaurant locations: [paste]"
AI: [Creates style, token, validates data]
You: "Add filters to show only 4+ star restaurants"
AI: [Updates style with expression]
You: "Generate a preview URL"
AI: [Returns preview]
You: "Set up styles and tokens for dev, staging, prod:
- Dev: Full access, localhost
- Staging: Read-only, staging.example.com
- Prod: Minimal scopes, example.com
Each environment needs its own style variant."
AI: [Creates 3 styles and 3 tokens with specifications]
You: "I received GeoJSON from a vendor. Validate it, check for:
- Correct coordinate order
- Valid geometry types
- Required properties: name, address, category"
AI: [Validates, reports issues]
You: "Fix the issues and save cleaned data to data/locations.json"
AI: [Fixes, saves file]
Invoke this skill when:
Weekly Installs
109
Repository
GitHub Stars
35
First Seen
Mar 5, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot105
opencode104
gemini-cli103
cline103
codex103
cursor103
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
118,000 周安装
bounding_box_tool, coordinate_conversion_tool, tilequery_toolget_latest_mapbox_docs_tool