{"id":31786253,"url":"https://github.com/tldraw/chat-template","last_synced_at":"2026-08-03T15:31:20.677Z","repository":{"id":315438739,"uuid":"1058750787","full_name":"tldraw/chat-template","owner":"tldraw","description":"Use tldraw to add sketches and annotated images as visual context in an LLM chat interface.","archived":false,"fork":false,"pushed_at":"2026-07-09T17:49:27.000Z","size":49,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-09T19:19:41.507Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tldraw.dev/starter-kits/chat","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tldraw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-17T13:55:56.000Z","updated_at":"2026-07-09T17:49:30.000Z","dependencies_parsed_at":"2026-03-04T18:02:37.587Z","dependency_job_id":null,"html_url":"https://github.com/tldraw/chat-template","commit_stats":null,"previous_names":["tldraw/chat-template"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/tldraw/chat-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fchat-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fchat-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fchat-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fchat-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tldraw","download_url":"https://codeload.github.com/tldraw/chat-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fchat-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36242185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-08-03T02:00:06.975Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-10T12:50:33.639Z","updated_at":"2026-08-03T15:31:20.670Z","avatar_url":"https://github.com/tldraw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv alt style=\"text-align: center; transform: scale(.5);\"\u003e\n\t\u003cpicture\u003e\n\t\t\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-dark.png\" /\u003e\n\t\t\u003cimg alt=\"tldraw\" src=\"https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-light.png\" /\u003e\n\t\u003c/picture\u003e\n\u003c/div\u003e\n\nThis repo contains a starter-kit for making an AI chat application using [tldraw](https://github.com/tldraw/tldraw).\n\n## Local development\n\nInstall dependencies with `yarn` or `npm install`.\n\nRun the development server with `yarn dev` or `npm run dev`.\n\nOpen `http://localhost:3000/` in your browser to see the app.\n\nThis starter kit demonstrates how to build an AI chat application that uses tldraw to provide sketches and annotated image to the model. The app features:\n\n- Integrated whiteboard for providing visual context\n- Image annotation and markup\n- Easy switching between text chat and visual canvas input\n\nKey interactions include:\n\n- Chat with AI using natural language\n- Click the whiteboard button to open the tldraw canvas\n- Draw, sketch, and create diagrams to supplement conversations\n- Annotate images and visual content directly on the canvas\n\n## Environment setup\n\nCreate a `.env.local` file in the root directory and add your Google Generative API key:\n\n```\nGOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here\n```\n\nGet your API key from [Google AI Studio](https://aistudio.google.com/apikey).\nYou can also switch to a different provider using the [Vercel AI SDK](https://ai-sdk.dev/providers/ai-sdk-providers).\n\n## File structure\n\n- **`src/app/page.tsx`:** The main entry point that renders the chat interface\n- **`src/components/Chat.tsx`:** The main chat container using the Vercel AI SDK's useChat hook\n- **`src/components/MessageList.tsx`:** Scrollable message history with loading states\n- **`src/components/ChatMessage.tsx`:** Individual message display component\n- **`src/components/ChatInput.tsx`:** Input field with send functionality\n- **`src/components/WhiteboardModal.tsx`:** Modal component that integrates tldraw for drawing and sketching\n- **`src/app/api/chat/route.ts`:** Next.js API route using Vercel AI SDK for OpenAI integration\n- **`src/app/styles.css`:** CSS with responsive design for all components\n\n## License\n\nThis project is provided under the MIT license found [here](https://github.com/tldraw/char-template/blob/main/LICENSE.md). The tldraw SDK is provided under the [tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).\n\n## Trademarks\n\nCopyright (c) 2024-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our [trademark guidelines](https://github.com/tldraw/tldraw/blob/main/TRADEMARKS.md) for info on acceptable usage.\n\n## Distributions\n\nYou can find tldraw on npm [here](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions).\n\n## Contribution\n\nFound a bug? Please [submit an issue](https://github.com/tldraw/tldraw/issues/new).\n\n## Community\n\nHave questions, comments or feedback? [Join our discord](https://discord.tldraw.com/?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=sociallink). For the latest news and release notes, visit [tldraw.dev](https://tldraw.dev).\n\n## Contact\n\nFind us on Twitter/X at [@tldraw](https://twitter.com/tldraw).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fchat-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftldraw%2Fchat-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fchat-template/lists"}