> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt) # AI-Assisted Development with Mapbox AI coding assistants like GitHub Copilot, Cursor, Claude, and others can dramatically speed up Mapbox development — from generating boilerplate map setup to wiring up APIs and debugging integration issues. This guide covers how to get the most out of these tools when building with Mapbox, along with important considerations for keeping your account secure and your usage in check. ## Where to start When working with AI coding assistants, the single most important habit is to **reference Mapbox products by their exact name**. Vague prompts like "add a map" or "add search" can result in generic or incorrect code — naming the specific SDK or API tells the assistant exactly which methods, parameters, and patterns to use. Here is an overview of the most commonly used Mapbox products by use case: - **Web maps**: Start with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) — the JavaScript library for rendering interactive maps on the web. - **Mobile maps**: Use the [Maps SDK for iOS](https://docs.mapbox.com/ios/maps/) or [Maps SDK for Android](https://docs.mapbox.com/android/maps/), or the [Maps SDK for Flutter](https://docs.mapbox.com/flutter/) for cross-platform development. - **Search and geocoding**: Use the [Search Box API](https://docs.mapbox.com/api/search/search-box/) for place search and address autofill, or the [Geocoding API](https://docs.mapbox.com/api/search/geocoding/) for forward and reverse geocoding. Both APIs can be called directly or via platform-specific wrappers: [Search JS](https://docs.mapbox.com/mapbox-search-js/) for web, and the Search SDKs for [iOS](https://docs.mapbox.com/ios/search/) and [Android](https://docs.mapbox.com/android/search/). - **Routing and navigation**: Use the [Directions API](https://docs.mapbox.com/api/navigation/directions/) for turn-by-turn directions and route optimization, or the [Navigation SDK for iOS](https://docs.mapbox.com/ios/navigation/) and [Navigation SDK for Android](https://docs.mapbox.com/android/navigation/) for full in-app navigation experiences on mobile. - **Spatial data pipelines**: Use the [Mapbox Tiling Service](https://docs.mapbox.com/mapbox-tiling-service/) for automated geospatial data ingestion and tile generation. If you are new to Mapbox, read through the [Getting Started overview](https://docs.mapbox.com/help/ja/getting-started/) first to familiarize yourself with the platform and product categories. ## AI tools for Mapbox development Mapbox provides dedicated tools that give AI coding assistants direct access to Mapbox-specific context, including your account tokens, documentation, styles, and geospatial utilities. ### Mapbox DevKit MCP Server The [Mapbox DevKit MCP Server](https://github.com/mapbox/mcp-devkit-server) is a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) server that makes AI coding tools like Cursor, Claude Code, and GitHub Copilot Mapbox-aware. Once connected, your assistant can access your tokens, styles, and geospatial utilities directly — so you spend less time on setup and more time building. Setting up the DevKit MCP Server is the single highest-leverage step for AI-assisted Mapbox development. > **Related content (guide): [Mapbox DevKit MCP Server](https://github.com/mapbox/mcp-devkit-server)** > > Set up the DevKit MCP Server to give your AI coding assistant direct access to your Mapbox account and utilities. > **Related content (guide): [Location AI Overview](https://docs.mapbox.com/help/ja/getting-started/location-ai/)** > > See the full product overview for the DevKit MCP Server and other Mapbox Location AI tools. ### Mapbox Docs MCP Server The [Mapbox Docs MCP Server](https://docs.mapbox.com/api/guides/docs-mcp-server/) gives AI coding assistants access to Mapbox's official documentation. When connected, your AI tool can retrieve accurate, up-to-date content from the Mapbox docs — including API references, guides, and code examples — rather than relying solely on its training data, which may be outdated or incomplete. This is especially useful for: - Correct API parameter names and required fields - Up-to-date SDK method signatures - Finding the right product for a given use case > **Related content (guide): [Mapbox Docs MCP Server](https://docs.mapbox.com/api/guides/docs-mcp-server/)** > > Connect your AI assistant to the Mapbox Docs MCP Server for accurate, up-to-date documentation access. ### Mapbox Agent Skills [Mapbox Agent Skills](https://github.com/mapbox/mapbox-agent-skills/tree/main) are specialized capabilities that can be integrated into AI agents, enabling things like building and optimizing map applications across web, iOS, and Android, designing and styling geospatial data, and integrating search, navigation, and performance patterns. If you are building a custom AI agent that works with Mapbox products, Agent Skills provide opinionated, reusable building blocks for common location workflows. > **Related content (guide): [Location AI Overview](https://docs.mapbox.com/help/ja/getting-started/location-ai/)** > > Learn more about Mapbox Agent Skills and other Location AI tools. ## Write better prompts: be specific AI coding assistants do well when prompts name specific Mapbox products, SDKs, and APIs. Vague prompts like "add a map to my app" can result in generic or incorrect code. The more specific you are, the more accurate the output. ### Name the product Use the full, official product name in your prompts. This helps the AI tool differentiate between Mapbox products with similar capabilities and select the correct APIs and SDK methods. **Maps example:** ``` Using Mapbox GL JS, add a marker to the map at coordinates [-74.006, 40.7128] with a custom HTML element as the marker icon. ``` **Search example:** ``` Using the Mapbox Search Box API, add a custom search input and results list to my page. When the user types, fetch suggestions and display them in the results list. When the user selects a result, use the result's geometry to place a marker at that location on a Mapbox GL JS map. ``` **Navigation example:** ``` Using the Mapbox Directions API, fetch a driving route between two sets of coordinates and display the route geometry as a line layer on a Mapbox GL JS map. ``` ### Specify the platform and language Always include the target platform and language in your prompt to avoid receiving code for the wrong SDK or environment. ``` Using the Mapbox Maps SDK for Android with Kotlin, display a map centered on New York City and add a PointAnnotation at the city center. ``` ``` Using the Mapbox Maps SDK for iOS with Swift, load a custom map style from Mapbox Studio and add a GeoJSON source with a circle layer. ``` ### Reference specific features by name Mapbox products have many specific features and components. Naming them directly gets more accurate results. ``` Using Mapbox GL JS, add a heatmap layer to visualize the density of points in a GeoJSON source. ``` ``` Using the Mapbox Tiling Service and the Tilesets CLI, create a recipe that converts a GeoJSON file into a vector tileset. ``` ## Billing and access token safety > **Note** > > **When an AI assistant writes code that calls Mapbox APIs using your access token, that code incurs real usage charges.** Most Mapbox products have a free tier, but requests beyond those limits are billed to your account. It is important to be aware of this, especially early in a project when you may be iterating quickly with an AI tool generating many requests. ### Track your usage The [Mapbox Account Statistics page](https://console.mapbox.com/account/statistics/) shows your usage across all Mapbox products in real time. Check this page regularly when actively developing with AI-generated code, especially when: - Testing code that loops over many API requests (e.g., batch geocoding, generating many static map images) - Iterating quickly on code that calls the Directions, Isochrone, or Map Matching APIs - Scaffolding a new application that loads maps on every hot-reload > **Related content (guide): [Mapbox Account Statistics](https://console.mapbox.com/account/statistics/)** > > Track your real-time API and SDK usage from the Mapbox Developer Console. ### Keep your access token out of prompts Do not paste your Mapbox access token into AI chat interfaces or include it in code that is shared with AI coding tools through screen sharing or public repositories. Instead: - Store tokens in environment variables (e.g., `process.env.MAPBOX_TOKEN`) and instruct the AI to reference the variable rather than a literal token value. - Use [token scoping and restrictions](https://docs.mapbox.com/api/accounts/tokens/) in the Mapbox Developer Console to limit what a given token can access. ### Use the right token type Mapbox provides two types of tokens: - **Public (publishable) tokens** are intended for use in client-side code (web pages, mobile apps) and are safe to include in code that is visible to end users. [Restrict these tokens to specific URLs](https://docs.mapbox.com/help/ja/dive-deeper/access-tokens/#url-restrictions) where possible. - **Secret tokens** have elevated permissions (such as writing styles or managing tilesets) and should **never** appear in client-side code or be committed to version control. Be cautious when an AI assistant generates code that references secret token operations — make sure it is server-side only. Read more about [access tokens and token types](https://docs.mapbox.com/api/accounts/tokens/). ## Recommended practices ### Verify generated code against the official docs AI models are trained on data with a cutoff date and may generate code using deprecated API parameters, outdated SDK methods, or removed features. Always cross-reference generated code against the [Mapbox documentation](https://docs.mapbox.com). Using the [Mapbox Docs MCP Server](#mapbox-docs-mcp-server) significantly reduces — but does not stop — this risk. Pay particular attention to: - **SDK version**: Mapbox SDKs have breaking changes between major versions. For example, Mapbox GL JS v2 and v3 have meaningful API differences. Confirm the generated code targets the version you are using. - **Deprecated methods**: Some older Mapbox methods still appear in AI training data but have been replaced in current versions. - **Style specification changes**: The Mapbox Style Specification evolves over time. AI-generated layer and paint property configurations should be validated. ### Ask AI to explain, then review Rather than blindly running AI-generated code that calls APIs, ask the AI to explain what the code does before you execute it. This is especially useful for: - Code that makes multiple API requests - Code that writes or modifies Mapbox Studio styles or datasets - Backend scripts that use secret tokens A follow-up prompt can surface issues before they affect your account: ``` Explain what API calls this code makes and what each one does. ``` ### Scope your prompts to one task at a time Large, open-ended prompts that ask AI tools to build entire Mapbox-powered features in one go often produce code with subtle integration errors. Breaking the task into smaller steps typically yields better results and makes it easier to review and test each piece independently. For example, instead of: ``` Build a store locator app with Mapbox GL JS that searches for nearby locations and shows driving directions. ``` Try a sequence like: ``` Set up a Mapbox GL JS map centered on the user's location. ``` ``` Add markers to the map from a GeoJSON feature collection. ``` ``` When a marker is clicked, use the Mapbox Directions API to fetch a route from the user's location to the marker and display it as a line layer. ``` ### Use AI for data formatting and preprocessing AI coding assistants are especially effective for data transformation tasks that feed into Mapbox pipelines — converting CSV or shapefile data to GeoJSON, writing Tilesets CLI recipes, generating `paint` and `layout` expressions for map layers, or structuring filter expressions. These tasks enjoy AI help without the billing risk of code that actively calls APIs at scale. ## Learn more > **Related content (guide): [Access Tokens](https://docs.mapbox.com/api/accounts/tokens/)** > > Learn how to create, scope, and manage Mapbox access tokens.