Get started
Introduction
No more AI slop. AI Canvas gives your coding agent a real design system to build with, and you get editable source you own.
The design layer for AI coding agents: design systems your agent builds with and you reshape to your project, plus standalone React components that fit any of them, all installed as editable source with shadcn or MCP.
What you get
- Design systems. A token file for colour, type and spacing, the components that follow it, and templates built from them. Change a token and every component follows.
- The AI Brain. Rule files that live in your project and tell your agent how the system is built, so new screens stay consistent with the rest.
- Standalone components. Backgrounds, 3D, motion and text effects, cards, buttons and widgets that belong to no system and drop into any project.
- An MCP server. Your agent searches, reads and installs everything above from the chat.
How it works
Everything is published as a shadcn registry under the @aicanvas namespace. One command copies the real source into your project, with its dependencies:
npx shadcn@latest add @aicanvas/<name>
Nothing is installed as a package you cannot open. The files land in your codebase, so you or your agent can edit, rename, restyle or delete them. Your agent can run the same command itself, or reach the registry through the MCP server.
Principles
- Open code. You get source, not a black box. Free components and Andromeda Legacy are MIT and their source is always public; the Line icons they use are free under the AI Canvas Premium License, with a one-line credit kept in the code.
- Systems before snippets. An agent builds better when it starts from one coherent system instead of mixing unrelated components.
- Readable by agents. Rules, props and indexes are plain files an agent can read: the AI Brain,
llms.txtand a props file for every component. - Yours to reshape.Tokens, components and rules are all editable, so the system becomes your project's own.