Chat starter kit

To build with a chat starter kit, run this command in your terminal:

bash

npm create tldraw@latest -- --template chat

Once you've followed the instructions, you'll need to create a .env file with an API key from Google AI Studio:

GOOGLE_GENERATIVE_AI_API_KEY=<your key>

Use cases

This starter kit shows how to add visual capabilities to:

How it works

This starter kit demonstrates how to add tldraw's visual capabilities to an existing chat application. The integration uses a modal to bring annotation tools directly into your chat UI.

The whiteboard opens a modal tldraw editor whenever users want to create or edit visual content. The modal supports uploaded images, freehand drawing, and editing of images from chat history.

2. Automatic image annotation

When an image is uploaded for the first time, the editor places it on the canvas, centers the camera on it, and switches into cropping mode using editor.setCurrentTool('select.crop'). From there, users can quickly crop their image to the desired section or add annotations on top.

3. Snapshot saving

Once the user has finished sketching or annotating, the editor exports the work as a PNG ready to send to the LLM. At the same time, it saves a tldraw snapshot of the session. This allows users to reopen the image as a whiteboard and continue working from where they left off, without flattening the individual shapes into pixels.

Customization

This starter kit provides a minimal integration between tldraw and a chat app. You can tailor the modal's appearance, available tools, and overall behavior.

Modifying the upload workflow

You can customize the automatic crop behavior, add image processing steps, or extend support for additional file types to match your app's needs.

See src/components/WhiteboardModal.tsx:195 for the automatic crop activation and src/components/Chat.tsx:148 for drag-and-drop handling.

Adapting to your design system

Since tldraw is built with React, you can adapt both the modal behavior and its appearance to integrate with your chat interface. This includes controlling when the modal opens, how it looks, and which tools are available.

For example, see src/components/WhiteboardModal.tsx:92 for UI component overrides, src/components/Chat.tsx:113 for the history image click handler, and src/app/styles.css for styling.

Building with this starter kit?

If you build something great, please share it with us in our #show-and-tell channel on Discord. We want to see what you've built!