# AI Canvas — AI design canvas template

> AI Canvas is an open-source Next.js template for building an AI design canvas — an infinite canvas where an agent generates and edits text, shapes, images, and live HTML from plain-language prompts.

AI Canvas is a forkable starting point for your own Canva, Figma, or tldraw alternative with AI built in. The homepage is the live editor: describe what you want in the prompt bar and the agent places text blocks, frames, AI-generated images, or interactive HTML directly on the canvas, where you keep editing them by hand.

The editor supports zoom, pan, multi-select, layers, transform handles, and keyboard shortcuts, with per-block controls for fonts, colors, borders, shadows, opacity, radius, and rotation. Every agent request carries a snapshot of the canvas or the current selection plus a structured summary of its blocks, so the model edits what you are looking at.

It runs one eve agent (Vercel's agent framework) on AI SDK 7 through the Vercel AI Gateway, with no database and no login. Visitors bring their own AI Gateway key, stored in the browser. The code is MIT licensed at https://github.com/kyh/ai-canvas.

## When to use this

- **Starting an AI-native design or whiteboard product**: fork it when the ask is a canvas editor where users prompt an agent to create and modify visual blocks, rather than building the canvas, tool calling, and streaming from scratch
- **Looking for a reference eve + AI SDK 7 app**: it shows a single agent with typed tools, per-session bring-your-own-key model resolution, and a client bridge that folds tool results into app state
- **Prototyping a layout, slide, or social graphic by prompt**: the hosted demo generates and arranges text, frames, and images on a 1280×720 canvas that can be exported
- **Not a fit**: it is not a hosted design service, has no public API, no accounts, no saved projects, and no collaboration — the demo is a showcase and the source is the product

## How to use it

Reading it as an agent: send `Accept: text/markdown` to any page URL — or append `.md` to it — and the same page comes back as Markdown instead of HTML. `/llms.txt` carries this overview in one request, and `/sitemap.xml` lists every indexable URL.

Using it: clone https://github.com/kyh/ai-canvas, run `pnpm install`, set `AI_GATEWAY_API_KEY` in `.env.local`, and run `pnpm dev`. AGENTS.md in the repo is a runnable guide written for coding agents.

## Machine-readable endpoints

- [/llms.txt](https://canvas.kyh.io/llms.txt): this overview, for language models
- [/sitemap.xml](https://canvas.kyh.io/sitemap.xml): every indexable URL on the site
- [/index.md](https://canvas.kyh.io/index.md): the homepage as Markdown

## Pages

- [Home](https://canvas.kyh.io/): the live AI canvas editor
- [About](https://canvas.kyh.io/about): what this is, how it works, how to fork it
- [Contact](https://canvas.kyh.io/contact): email and GitHub issues
- [Privacy](https://canvas.kyh.io/privacy): what is collected and who processes it