This is the documentation of version 1.0.0-rc.4. Go to the latest version, 1.0.0-rc.5.

Agent Toolkit plugin

The Agent Toolkit lets your users talk to a TomTom map. Add an LLM and a chat box, and they can plan routes, search for places, inspect traffic and reshape the map with sentences instead of clicks.

What you can build with it

What's in the box

@tomtom-org/maps-sdk-plugin-agent-toolkit is a headless plugin built on Vercel AI SDK v7. createMapAgent returns a ToolLoopAgent wired to a TomTomMap and the TomTom services.

You bring:

The plugin provides:

Quickstart

All plugins use @tomtom-org/maps-sdk as a peer dependency, so install the SDK first. See the Project Setup guide if needed.

Install

npm install @tomtom-org/maps-sdk-plugin-agent-toolkit ai zod
npm install @ai-sdk/react @ai-sdk/openai   # or @ai-sdk/anthropic, @ai-sdk/azure, …

The plugin's other peer dependencies are @tomtom-org/maps-sdk-plugin-map-theme, maplibre-gl, @turf/turf, chart.js and h3-js. npm 7+ and pnpm 8+ install them automatically. With other package managers, add them yourself.

Wire it up

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { TomTomMap } from '@tomtom-org/maps-sdk/map';
import { createMapAgent } from '@tomtom-org/maps-sdk-plugin-agent-toolkit';
import { openai } from '@ai-sdk/openai';
import { useChat } from '@ai-sdk/react';
import { DirectChatTransport } from 'ai';

TomTomConfig.instance.put({ apiKey: 'YOUR_API_KEY' });

const map = new TomTomMap({ mapLibre: { container: 'map' } });

const agent = createMapAgent(map, {
    model: openai('gpt-4o'),
    dataEntries: {
        routes: { entryMode: 'single' }, // one route on the map at a time
        byod: { enabled: false },        // no bring-your-own-data tools in this deployment
    },
});

const { messages, sendMessage } = useChat({
    transport: new DirectChatTransport({ agent }),
});

Without a chat UI, call the agent directly:

const { text } = await agent.generate({
    messages: [{ role: 'user', content: 'Find coffee shops near Dam Square' }],
});

To stream the reply into a chat box of your own, call agent.stream() instead and keep the conversation in a messages array: after each turn, append await result.responseMessages, which holds every step's tool calls and results. The demo below does that in plain TypeScript, with no framework:

Try it out

Clean up

agent.destroy(); // resets every built-in and custom state slice that implements reset()

Options

createMapAgent(map, options) takes one required option, model. The pages in the table explain the other options.

Option What it controls Read
tools, includeDefaultTools Add, remove, replace or hand-pick tools Customizing tools
systemPrompt, systemPromptPrefix, systemPromptSuffix The system prompt Customizing the system prompt
classifier, onClassify Per-turn tool selection How it works
prepareStep, maxSteps, stepProviderOptions, providerOptions, outputSchemas The tool loop How it works
onToolExecute Per-tool timing and errors How it works
state, dataEntries Custom state slices; which data kinds exist and their entry mode State
byod Which URLs the agent may fetch Bring your own data
codeExecution Sandbox timeout, worker libraries and whether code may run in the page when the sandbox can't start Code generation

Building with an AI coding assistant

The tomtom-maps-sdk-js skill covers this plugin. Name a public API such as createMapAgent or analyseData in your question. AI coding with the SDK explains how to install and use it.

Where to next

Read them in this order to learn enough to ship something:

API reference

Agent Toolkit Plugin API Reference

Related guides and examples

Related guides

Related examples