Skip to main content
Mapbox is a location platform for interactive maps, geocoding, and routing. The Mapbox connector lets your Lovable app render maps in the browser with Mapbox GL JS and call Mapbox’s location APIs through Lovable’s connector gateway. It’s designed for apps that want Mapbox’s map styles and Mapbox GL JS, or that already run their location features on Mapbox. Mapbox is available as an app + chat connector: one shared connection that works in the chat while you build and in your published apps. With Mapbox, your app can:
  • Show interactive maps with Mapbox GL JS and custom Mapbox styles
  • Turn addresses into coordinates and search for places
  • Calculate routes and turn-by-turn directions
  • Compute travel-time areas and distance matrices between many points
  • Render static map images for previews and thumbnails
Mapbox is a good fit when you ask for Mapbox by name or need something specific to it. For a quick prototype with generic maps, geocoding, or directions, the managed Google Maps Platform connection needs no account or keys. Pick one provider per app: Google’s terms do not allow showing Google Maps Platform data, such as geocoding, places, or routes, on a non-Google map like a Mapbox map.

​
Common use cases and example apps

These examples show what you can build with Mapbox, each with a prompt to start from.

​
How to connect Mapbox

Who can create Mapbox connections depends on your plan and workspace settings. App + chat connectors are available by default on Free, Pro, and Business plans. On Enterprise plans, they are effectively disabled at first: Who can create connections and clients defaults to No one until an admin changes it in Connectors → Admin settings → App + chat connectors. You can create multiple Mapbox connections using different tokens, which is useful for separating environments (for example, development and production) or using different Mapbox accounts. When the connection is created, you can link it to the projects where you want to use it. Anyone building in a project can ask Lovable in chat to link their project to it.

​
Prerequisites

Before connecting Mapbox, make sure you have:
  • A Mapbox account
  • At least one Mapbox access token: a public token (pk.) for maps in the browser, a secret token (sk.) for geocoding and routing, or both
  • Permission to create connections in your Lovable workspace (see Who can create connections and clients)
All Mapbox usage through this connector counts toward your Mapbox plan. Billing and quota are handled directly by Mapbox, not Lovable.

​
Step 1: Get Mapbox access tokens

Mapbox uses two token types, and they are not interchangeable. A public token (pk.) loads maps in the browser. A secret token (sk.) is for everything that runs on the server: geocoding, directions, matrices, isochrones, and static map images, all called through Lovable’s connector gateway. A map-only app can connect with a public token alone. Any server-side feature needs a secret token on the connection. To create Mapbox access tokens:
1

Open your Mapbox account

Sign in to Mapbox.
2

Open access tokens

Go to Access tokens.
3

Get a public token

Copy your default public token (it starts with pk.), or create a new one. Before you publish, restrict it to your app’s URLs in the token’s settings.
4

Create a secret token (if you need server-side features)

Click Create a token, give it a descriptive name (for example, Lovable integration), choose the scopes your app needs, and copy the token starting with sk.. Mapbox shows a secret token only once.
5

Store the tokens securely

Copy each token and store it securely. You’ll paste them into Lovable in the next step.
Your secret token functions like a password. Keep it secure and never share it publicly. You’ll need your tokens in the next step.
See Mapbox documentation for more: Access tokens.

​
Step 2: Connect Mapbox to Lovable

You can create multiple connections using different tokens.
1

Open Mapbox in Connectors

Open Connectors and select Mapbox. For the other places to open the catalog from, see Where to find connectors.
2

Add a connection

Click Add connection.
3

Configure the connection

  1. Display name: name the connection, for example Mapbox Prod. This name is only used inside Lovable to identify the connection.
  2. Secret token (optional): paste your sk. token if your app needs geocoding, directions, or other server-side Mapbox features.
  3. Public token (optional): paste your pk. token if your app shows Mapbox maps in the browser. The field is marked Public because the value appears in your published app.
Both fields are optional, but you need at least one. Create token next to each field opens your Mapbox access tokens page.
4

Choose who can use this connection

Under Who can use this connection, decide who in your workspace can use the connection. You start as the only person with access:
  • Only you (default): leave the access list as is; only you can use the connection and its associated data.
  • Invite specific people: add workspace members by email; only you and the people you add can use the connection and its associated data.
  • Invite entire workspace: click Invite entire workspace to make the connection available to everyone in your Lovable workspace.
See Who can use connections and clients for more information.
5

Connect

Click Connect. Lovable verifies each token you provide against the Mapbox API before saving the connection.
When connected, anyone building in a project can ask Lovable in chat to link their project to Mapbox (based on configured connection-level access). Your Lovable apps can then show Mapbox maps with the public token and geocode, route, and search with the secret token.

​
Public and secret tokens

The connector uses the two tokens for different jobs:
  • The secret token is used for server-side Mapbox calls. Lovable routes them through the connector gateway, which adds the token for you, so it never appears in your app’s code or in the browser. If the connection has no secret token, server-side calls fail with a secret_token_required error.
  • The public token is used by Mapbox GL JS in the browser. Lovable exposes it to your app’s frontend as the VITE_LOVABLE_CONNECTOR_MAPBOX_PUBLIC_TOKEN environment variable. Restrict it to your app’s URLs in your Mapbox account so other sites cannot use it.
If you connect with only a public token, your app can show maps but not geocode or route. Add a secret token to the connection when you need those features.

​
Limitations

The Mapbox connector cannot:
  • Rotate tokens automatically. To rotate, create new tokens in Mapbox and update the Lovable connection.
  • Support per-end-user Mapbox login. Each connection represents a single Mapbox account shared across all projects linked to it.
If a token is revoked or deleted in Mapbox, update the Lovable connection with a valid token before API calls can succeed again.

​
Manage your connection

Connections are managed from Connectors: select , then open the connection.
  • Unlink projects to remove access from specific projects while keeping the connection available for others. See Unlink projects from a connection for the steps.
  • Delete the connection to remove it from the workspace entirely. Deleting is permanent. It removes the credentials from all linked projects, and app features that use stop working until a new connection is added. See Delete a connection for the steps and who can delete.