Agent Template

tldraw agent

This starter kit demonstrates how to build an agent that can manipulate the [tldraw](https://github.com/tldraw/tldraw) canvas.

A chat panel on the right side of the screen lets users communicate with the agent, add context, and see chat history.

Environment setup

Create a `.dev.vars` file in the root directory and add API keys for any model providers you want to use.

ANTHROPIC_API_KEY=your_anthropic_api_key_here
GOOGLE_API_KEY=your_google_api_key_here
OPENAI_API_KEY=your_openai_api_key_here

We recommend using Anthropic for best results. Get your API key from the [Anthropic dashboard](https://console.anthropic.com/settings/keys).

Local development

Install dependencies with `yarn` or `npm install`.

Run the development server with `yarn dev` or `npm run dev`.

Open `http://localhost:5173/` in your browser to see the app.

Agent overview

With its default configuration, the agent can perform the following actions:

• Create, update and delete shapes.
• Draw freehand pen strokes.
• Use higher-level operations on multiple shapes at once: Rotate, resize, align, distribute, stack and reorder shapes.
• Write out its thinking and send messages to the user.
• Keep track of its task by writing and updating a todo list.
• Move its viewport to look at different parts of the canvas.
• Count shapes matching a given expression.
• Schedule further work and reviews to be carried out in follow-up requests.
• Call example external APIs: Looking up country information.

To make decisions on what to do, we send the agent information from various sources:

• The user's message.
• The user's current selection of shapes.
• What the user can currently see on their screen.
• Any additional context that the user has provided, such as specific shapes or a particular position or area on the canvas.
• Actions the user has recently taken.
• A screenshot of the agent's current view of the canvas.
• A simplified format of all shapes within the agent's viewport