The AI Vibe Coding Canvas
The AI Vibe Coding Canvas
The Canvas at /canvas is your personal AI pair-programmer — a workspace for sketching ideas, generating code, and iterating on artifacts.
Layout
The Canvas is a three-panel workspace:
- Left sidebar (260px, collapsible) — your chat history. New Chat button at the top, delete on hover.
- Center panel — the streaming chat with the AI. Messages appear token-by-token as the model thinks.
- Right canvas panel (480px, hideable) — the artifact the AI is building for you.
Artifact types
The AI can produce three kinds of artifacts:
| Type | Renderer | Good for |
|---|---|---|
| Markdown | react-markdown | Notes, outlines, documentation |
| Code | Monaco editor with syntax highlighting | JavaScript, TypeScript, Python, etc. |
| HTML | Sandboxed iframe (live preview) | Mini web pages and prototypes |
You can edit the artifact directly — every save creates a new version so you can scroll back through history.
Tips for good results
- Be specific about what you want: language, libraries, style.
- Iterate: ask for changes ("make this dark mode", "add error handling") and the AI updates the artifact.
- Reference the artifact: the AI can see the current artifact, so questions like "explain line 12" work.
When the AI feels off
If responses look generic or templated, the platform may be in mock mode (no OpenRouter API key configured). An admin can connect a key under Settings to enable real AI responses.
Embedded inside courses
Some lessons are Vibe Canvas modules — the same workspace appears inline in the lesson, pre-loaded with starter code and instructions for the exercise.