a774ac673a
Some checks failed
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
i18n upload strings / Upload latest strings (push) Failing after 1s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 1s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 1s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
91 lines
4.1 KiB
Plaintext
91 lines
4.1 KiB
Plaintext
---
|
|
title: Chat starter kit
|
|
sidebarTitle: Chat
|
|
status: published
|
|
author: tldraw
|
|
date: 9/16/2024
|
|
order: 3
|
|
description: The Chat Starter Kit shows how to integrate tldraw's infinite canvas into an existing chat application. Built on [Vercel's useChat hook](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat), this template shows you how to add visual annotation capabilities to any app (in this case, a chat).
|
|
embed: chat
|
|
githubLink: https://github.com/tldraw/tldraw/tree/main/templates/chat
|
|
keywords:
|
|
- chat
|
|
- messaging
|
|
- collaboration
|
|
- communication
|
|
---
|
|
|
|
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.local` file with an API key from [Google AI Studio](https://aistudio.google.com/apikey):
|
|
|
|
```
|
|
GOOGLE_GENERATIVE_AI_API_KEY=<your key>
|
|
```
|
|
|
|
---
|
|
|
|
## Use cases
|
|
|
|
This starter kit shows how to add visual capabilities to:
|
|
|
|
<StarterKitBento type="chat" />
|
|
|
|
---
|
|
|
|
## 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.
|
|
|
|
|
|
|
|
### 1. Whiteboard modal
|
|
|
|
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.
|
|
|
|
---
|
|
|
|
## Further reading
|
|
|
|
- **[Custom shape utilities](/docs/shapes#Custom-shapes)**: Learn how to create custom shapes with their own interactions.
|
|
|
|
- **[Editor API](/docs/editor)**: Learn about the tldraw Editor.
|
|
|
|
- **[Customize the user interface](/docs/user-interface)**: Learn how to customize the user interface of your tldraw application.
|
|
|
|
---
|
|
|
|
## Building with this starter kit?
|
|
|
|
If you build something great, please share it with us in our [#show-and-tell](https://discord.tldraw.com/?utm_source=docs&utm_medium=organic&utm_campaign=sociallink) channel on Discord. We want to see what you've built!
|