mapbox · mattpodwysocki · Jan 9, 2026
@@ -0,0 +1,338 @@
+# Introducing the Mapbox DevKit MCP Server: AI-Powered Map Development
+
+_Draft blog post for announcing the Mapbox DevKit MCP Server_
+
+---
+
+Building map applications has traditionally required deep expertise in cartography, style specifications, token management, and accessibility standards. Today, we're excited to introduce the **Mapbox DevKit MCP Server**—bringing AI assistance to the entire map development workflow.
+
+## What is the Mapbox DevKit MCP Server?
+
+The Mapbox DevKit MCP Server is a [Model Context Protocol](https://modelcontextprotocol.io) server that transforms AI assistants like Claude into expert Mapbox development partners. Through natural language conversations, developers can create custom map styles, validate production readiness, manage access tokens securely, and learn cartography best practices.
+
+It's part of Mapbox's commitment to making map development more accessible while maintaining professional quality and security standards.
+
+## Key Capabilities
+
+### 🎨 AI-Powered Style Creation
+
+Create custom map styles through natural conversation:
+
+```
+You: "Create a dark cyberpunk map style emphasizing nightlife venues"
+
+Claude: I'll create a dark-themed map style with neon colors perfect for nightlife.
+[Creates style with vibrant magentas, cyans, and purples on dark backgrounds]
+
+✅ Style created: mapbox://styles/username/ckl3d2m4p0001
+🔗 Preview: https://api.mapbox.com/styles/v1/...
+✅ Validation: Production-ready (all checks passed)
+```
+
+The style builder understands themes like "nature-focused," "minimal monochrome," or "retro 80s neon" and automatically generates appropriate color schemes, layer styling, and typography.
+
+### ✅ Production-Ready Validation
+
+Before deploying to production, validate your styles automatically:
+
+- **Expression validation**: Catch syntax errors in filters, paint properties, and layout expressions
+- **Accessibility checks**: WCAG 2.1 compliance for color contrast (AA/AAA levels)
+- **GeoJSON validation**: Verify coordinate ranges, polygon ring closure, and data structure
+- **Performance optimization**: Identify unused sources, duplicate layers, and simplifiable expressions
+- **Style comparison**: Understand what changed between versions
+
+All validation runs **offline** (no API calls) and completes in milliseconds.
+
+### 🔐 Secure Token Management
+
+Set up access tokens with proper security from day one:
+
+```
+You: "Set up tokens for my restaurant finder app at restaurantfinder.com"
+
+Claude: I'll create a secure token setup for your project.
+
+✅ Development Token (pk.ey...)
+   - Restricted to: http://localhost:*
+   - Scopes: styles:read, styles:list
+
+✅ Production Token (pk.ey...)
+   - Restricted to: https://restaurantfinder.com
+   - Scopes: styles:read
+
+✅ Backend Secret Token (sk.ey...)
+   - Server-side only (never expose in client code)
+   - Scopes: styles:write, styles:read
+
+🎯 Initial style created and validated
+🔗 Preview: [URL]
+```
+
+The server ensures:
+
+- URL restrictions are set correctly
+- Public tokens never get secret scopes
+- Backend tokens are never suggested for client-side use
+- Token scope matches your actual needs
+
+### 🎓 Built-in Cartography Expertise
+
+Learn best practices through 5 specialized **agent skills**:
+
+- **mapbox-cartography**: Color theory, visual hierarchy, typography principles
+- **mapbox-token-security**: Scope management, rotation strategies, security patterns
+- **mapbox-style-patterns**: Common layer configurations for typical use cases
+- **mapbox-integration-patterns**: Framework-specific integration (React, Vue, Svelte, Angular)
+- **mapbox-style-quality**: Validation workflows, accessibility, optimization strategies
+
+These skills teach AI assistants (and you!) professional map development practices.
+
+### 🚀 Workflow Automation
+
+Seven orchestrated prompts handle common development tasks:
+
+1. **create-and-preview-style**: Create a style and generate shareable preview link
+2. **build-custom-map**: Use AI to build themed map styles
+3. **design-data-driven-style**: Create maps with dynamic, data-driven properties
+4. **setup-mapbox-project**: Complete project setup with proper token security
+5. **debug-mapbox-integration**: Systematic troubleshooting for integration issues
+6. **analyze-geojson**: Validate and visualize GeoJSON data
+7. **prepare-style-for-production**: Comprehensive quality validation workflow
+
+Each prompt chains multiple tools together with best practices built-in.
+
+## Real-World Use Cases
+
+### Rapid Prototyping
+
+Product manager: "Can we see what a dark mode map would look like for our nightlife app?"
+
+With DevKit: **5 minutes** to fully styled, validated preview
+Without DevKit: **2-4 hours** of manual styling and iteration
+
+### Quality Assurance
+
+Developer: "Is this style ready for production?"
+
+With DevKit: **Automatic validation** catches expression errors, accessibility issues, optimization opportunities
+Without DevKit: **Runtime errors**, failed accessibility audits, unoptimized performance
+
+### Security Setup
+
+New project: "We need to set up Mapbox tokens securely"
+
+With DevKit: **Guided setup** with proper restrictions, scopes, and validation
+Without DevKit: **Common mistakes** like missing URL restrictions, wrong scopes, exposed secrets
+
+## How It Works
+
+The Mapbox DevKit MCP Server uses the [Model Context Protocol](https://modelcontextprotocol.io)—an open standard for connecting AI assistants to external tools and data sources.
+
+**For developers**: Install via npm and configure in your AI client (Claude Desktop, VS Code, Cursor):
+
+```bash
+npm install -g @mapbox/mcp-devkit-server
+```
+
+**For AI assistants**: Access 25+ tools, 7 prompts, 4 resources, and 5 skills through natural conversation.
+
+## What Makes It Different?
+
+### vs. Main Mapbox MCP Server
+
+Mapbox now offers **two complementary MCP servers**:
+
+| Capability   | Mapbox MCP Server              | Mapbox DevKit MCP Server               |
+| ------------ | ------------------------------ | -------------------------------------- |
+| **Purpose**  | Geospatial intelligence        | Map development toolkit                |
+| **Use Case** | Apps need location features    | Building map applications              |
+| **Features** | Geocoding, routing, POI search | Style creation, validation, token mgmt |
+| **Target**   | AI agents, chatbots            | Developers building maps               |
+
+Use the main server when your **app needs geospatial features**. Use DevKit when you're **building the map itself**.
+
+### vs. Manual Development
+
+- ⏱️ **10x faster prototyping** through natural language
+- ✅ **Better quality** through automatic validation
+- 📚 **Educational** with built-in best practices
+- 🔄 **Iterative** development through conversation
+
+## Getting Started
+
+### Installation
+
+**npm (recommended):**
+
+```bash
+npm install -g @mapbox/mcp-devkit-server
+```
+
+**npx (no installation):**
+
+```bash
+npx @mapbox/mcp-devkit-server
+```
+
+### Configuration
+
+Add to your MCP client (Claude Desktop example):
+
+```json
+{
+  "mcpServers": {
+    "mapbox-devkit": {
+      "command": "npx",
+      "args": ["-y", "@mapbox/mcp-devkit-server"],
+      "env": {
+        "MAPBOX_ACCESS_TOKEN": "your_token_here"
+      }
+    }
+  }
+}
+```
+
+### First Map
+
+Open your AI assistant and try:
+
+```
+"Create a nature-focused map style emphasizing parks and green spaces,
+centered on Central Park in New York"
+```
+
+The AI will:
+
+1. Create a custom style with earth tones and emphasized parks
+2. Generate a preview URL
+3. Validate for production readiness
+4. Report any accessibility or quality issues
+
+## Technical Highlights
+
+### Comprehensive Tool Suite
+
+**25+ tools** organized by category:
+
+- **Style Management**: Create, update, retrieve, delete, preview styles
+- **Token Management**: Create, list tokens with proper scopes
+- **Validation**: Expression validation, GeoJSON validation, accessibility checks
+- **Optimization**: Style optimization, comparison, performance analysis
+- **Utilities**: Coordinate conversion, bounding boxes, geocoding
+- **Documentation**: Reference materials, field definitions, best practices
+
+### Offline-First Design
+
+Many operations run entirely offline:
+
+- Style validation (expressions, GeoJSON)
+- Accessibility checking (WCAG contrast ratios)
+- Style optimization (redundancy removal)
+- Style comparison (diff analysis)
+
+No API calls = fast, free, private.
+
+### Quality by Default
+
+All style-creation workflows **automatically validate** before presenting results:
+
+- Expression syntax checking
+- WCAG AA accessibility compliance
+- Optimization opportunities
+- Deployment readiness assessment
+
+Warnings are informational—users can ignore them for prototypes but have visibility into production readiness.
+
+### Enterprise-Ready
+
+- **Distributed tracing**: OpenTelemetry integration for observability
+- **Configurable**: Environment variables for feature toggles
+- **Tested**: 386 test cases with comprehensive coverage
+- **Documented**: Extensive documentation and examples
+- **Type-safe**: Full TypeScript implementation with Zod validation
+
+## What's Next?
+
+We're continuously improving the Mapbox DevKit MCP Server based on developer feedback. Upcoming features include:
+
+- **Tileset integration**: Validate and preview custom tilesets
+- **Batch operations**: Style migration and bulk updates
+- **Advanced analytics**: Usage insights and optimization recommendations
+- **Team workflows**: Shared styles and collaborative development
+- **Framework templates**: Quick-start projects for React, Vue, Svelte
+
+## Learn More
+
+- **GitHub**: [github.com/mapbox/mcp-devkit-server](https://github.com/mapbox/mcp-devkit-server)
+- **npm**: [@mapbox/mcp-devkit-server](https://www.npmjs.com/package/@mapbox/mcp-devkit-server)
+- **MCP Registry**: [registry.modelcontextprotocol.io](https://registry.modelcontextprotocol.io)
+- **Documentation**: [Full API reference and guides](https://github.com/mapbox/mcp-devkit-server#readme)
+
+## Join the Community
+
+We'd love to hear how you're using the Mapbox DevKit MCP Server:
+
+- **Share** your maps on Twitter/X with [#MapboxDevKit](https://twitter.com/hashtag/MapboxDevKit)
+- **Report issues** or request features on [GitHub](https://github.com/mapbox/mcp-devkit-server/issues)
+- **Contribute** improvements via pull requests
+- **Connect** with other developers on [Mapbox Community Forum](https://community.mapbox.com)
+
+---
+
+_The Mapbox DevKit MCP Server is open source (MIT License) and available today. Get started at [github.com/mapbox/mcp-devkit-server](https://github.com/mapbox/mcp-devkit-server)._
+
+---
+
+## Quotes (to be filled in)
+
+> "Quote from Mapbox leadership about AI-powered development tools"
+> — [Name], [Title], Mapbox
+
+> "Quote from developer who used the tool during beta"
+> — [Name], [Company/Title]
+
+> "Quote about MCP ecosystem"
+> — [Name], Anthropic or MCP community
+
+---
+
+## Technical Details (Appendix)
+
+### System Requirements
+
+- Node.js 22+
+- Mapbox access token
+- MCP-compatible client (Claude Desktop, VS Code, Cursor, etc.)
+
+### Supported Platforms
+
+- macOS (Intel and Apple Silicon)
+- Linux (all major distributions)
+- Windows 10/11
+- Docker (cross-platform)
+
+### Integration Options
+
+- **CLI**: Direct command-line usage
+- **MCP Clients**: Claude Desktop, VS Code, Cursor
+- **Programmatic**: Import as Node.js package
+- **Docker**: Containerized deployment
+
+### Security & Privacy
+
+- All API calls use HTTPS
+- Access tokens stored securely in environment variables
+- Offline tools process data locally
+- No telemetry without explicit opt-in (OpenTelemetry)
+- Open source for transparency
+
+---
+
+**Media Contact**: [Contact information]
+
+**Assets Available**:
+
+- Screenshots of tool in action
+- Demo video (5 minutes)
+- Architecture diagrams
+- Logo/branding assets