Claude Canvas

Claude Canvas is a generative UI system that transforms plain English descriptions into live, interactive interfaces in real time. Instead of Claude returning text about a UI, Claude IS the UI — the interface itself is the innovation.
Stability & Execution: The Python A2A agent validates every Claude response against a strict A2UI JSON schema using jsonschema. On failure, the agent silently retries up to 2 times with targeted error feedback, ensuring users never see a broken render. The result is a stable, responsive prototype that handles edge cases gracefully without exposing errors to the user.
Shattered UI Conventions: There is no chat window. No drag and drop. No templates. The entire canvas is blank until intent arrives. Every prompt morphs the surface into a live, typeable, submittable interface. A version timeline strips every generation into a live snapshot — users can preview, restore, and branch from any prior version. Bad ideas cost nothing. That is UI version control powered by conversational memory.
Claude’s Reasoning as the Interface: Claude receives its own prior A2UI output as an assistant turn on every refinement, enabling surgical edits without full rebuilds. The A2UI schema requires cross-referenced component IDs, consistent surfaceIds across three message types, and path-based data bindings — a complex constraint satisfaction problem that specifically requires Claude’s instruction-following precision. Other models tested produced higher schema failure rates.
Technologies: Next.js 15, React 19, Python A2A SDK, A2UI v0.8 protocol, Lit Web Components, claude-sonnet-4-5, Anthropic SDK, jsonschema, uvicorn, Starlette, A2A JSON-RPC 2.0, Railway, Vercel.

The A2UI protocol and A2A SDK are open-source frameworks developed by Google, used as the communication and rendering layer for this project. The Anthropic claude-sonnet-4-5 model was accessed via the Anthropic API. The base Next.js project structure was initialized using create-next-app.
All core application logic was built during the hackathon, including: the Python A2A agent and UIGeneratorExecutor, the conversational memory system, the A2UI schema validation and auto-retry loop, the version timeline and branching system, the Claude system prompt with A2UI component catalog, and the full frontend canvas experience.
No prior proprietary code, designs, or prototypes were used.