How to use MapTiler with AI

AI coding assistants like Claude Code, Cursor, and GitHub Copilot can build your MapTiler map for you, but only as accurately as the context you give them. Left to their training data, they’ll confidently invent URLs or reach for deprecated maps. This guide shows you how to point them at MapTiler’s own docs and tooling instead, whether you’re a developer or just want a map on your website.

Before you start

Get a MapTiler API key – every example below needs one.

Warning

Never paste your MapTiler API key directly into an AI chat interface, and never commit it to a public repository. Store it in an environment variable (for example, MAPTILER_API_KEY), or use a placeholder the assistant leaves for you to fill in yourself. Secure your key before publishing.

1. Choose your setup

  • Permanent setup for coding agents: Install the MapTiler Agent Skill once, and Claude Code, Cursor, Gemini CLI, or Windsurf apply MapTiler-specific knowledge automatically, without you fetching a file every time.
  • One-off use, no setup: Tell your assistant to fetch llms.txt or llms-full.txt at the start of a chat. This works with any AI tool, including plain ChatGPT or Claude in the browser.

Not sure which file to fetch?

https://docs.maptiler.com/llms.txt is a navigation index with just section names and links, no code. It serves as a pointer to the right guide. Use it for simple querying of the docs and other “lightweight” work, to save tokens.

https://docs.maptiler.com/llms-full.txt contains the actual content: tutorials, code snippets, step-by-step procedures, and API and schema details, inline. Use it when you want your assistant to write real code without following more links.

2. Write an explicit prompt

Vague prompts produce vague and often outdated results. Name the exact product (@maptiler/sdk, not “MapTiler”), the platform and framework, or say there isn’t one, the map style you want, including version (for example “the latest Streets map” or streets-v4), and how the assistant should handle your API key.

Example: Building a web app with MapTiler SDK JS & Vite


Before writing any code, fetch and read https://docs.maptiler.com/llms-full.txt. Do not rely on prior knowledge or guess parameter names.

Task: Using the latest @maptiler/sdk from npm in a Vite + vanilla TypeScript project (npm create vite@latest -- --template vanilla-ts), create a map with the streets-v4 style, centered on Barcelona, Spain, at zoom level 12. 

Read the API key from the environment variable VITE_MAPTILER_API_KEY via import.meta.env; do not hardcode it.

Example: Embedding a map on a website


Before you start, fetch and read https://docs.maptiler.com/llms.txt. Do not rely on prior knowledge.

Task: Create a copiable HTML snippet that embeds a MapTiler map using an iFrame. 

The iFrame should have 300px height and 400px width. Use the latest Streets map, centered on Paris, France, at zoom level 10. 

Leave YOUR_MAPTILER_API_KEY as a placeholder for me to replace with my own key.

3. Test the result

Open the HTML file, or run your app, and check that the map actually loads and looks right – centered where you expect, showing the style you asked for. AI models train on historical data, so they can still suggest a deprecated parameter or an old style version even after a well-written prompt.

If the map doesn’t load or you see a console error, tell your assistant what went wrong instead of debugging it yourself. Point it back at llms.txt or llms-full.txt if it needs to double-check something.

Was this helpful?