Claude Canvas

Inspiration Claude‑Canvas began with a question: what if creating new digital tools were as easy as speaking an idea aloud? We imagined an interface where anybody could “paint” functionality onto a blank canvas—no code, no friction, just pure imagination translated into working software. That vision matters because self‑teaching is hard. Under-resourced kids we grew up with want to learn and build beyond the resources accessible to them, but online content can’t adapt to personal context or make you aware of faulty/oversimplified understanding. Claude‑Canvas addresses this gap in three ways: 1) It's personalized -- Claude-Canvas sits on top of the context of your life. For example, the tool can access old work and adapt its explanations accordingly. 2) It's flexible -- you can easily create the features you need. 3) It leverages new capabilities – Claude’s ability to reason and give feedback is the missing link for democratizing education. By leveraging Claude, we aim to unlock creativity and education for everyone—turning a wave of the hand (or a single prompt) into the next great idea made real.

How we build it? We imagined Claude canvas as a design space where the user can create new components and interact with their components in creative ways. We wanted the canvas to be dynamic, and customizable; For this reason, we build a front end with a dynamic grid where new components can be added and a backend for generating code through user prompts and managing the API functionality the canvas uses. The API functionality differs slightly from tool use; it is more of an integration into the code Claude generates rather than tools it calls during its generation. This API allowed us to incorporate AI into the components we generated as well. Hence, our project contains a front end, a display manager, and a backend that handles the API calls of the widgets. For these we used react.js for front end and python with Flask for the back-end. We heavily use the Claude API both for generating code dynamically with user prompts and for using in widget functionality. For instance, the user can ask to generate a widget that asks the user comprehension questions on some lecture notes that lie in their filesystem. Providing a simple API for Claude for the canvas allow us to easily build this kind of functionality without giving full control over the entire app's codebase. For code generation, we use prompt engineering to guide Claude to generate react components that have a cohesive theme, structure, and leverage the API provided by the canvas app.

Challenges? Claude is very good at generating code, especially in javascript. However, we realized quickly that it is challenging to create a UI where components are being dynamically added, sized and displayed. Hence, a challenge we faced was not having access to a robust UI that could handle dynamic additions (and deletions), and building the UI was quite challenging. A challenging aspect is incorporating newly generated widgets without breaking previous functionality. Another challenge was designing the way Claude writes code in our canvas. We needed to give Claude documentation on certain functionalities that exist within the canvas (e.g. read file system, read files, prompt Claude with/without files) and force it to incorporate these into the functionality it built. Currently, it cannot implement its own functionality in these APIs and has to rely on the API, but we believe this can be addressed in the future using more advanced coding techniques such as Claude Code. Overall, designing the infrastructure is also critical to how well the coding agent does. The main challenge of this project still lies on the architectural choices which ultimately determine what can and cannot be done. While we could allow infinite freedom over how Claude can code, this seems to be less controllable (e.g. over where components are placed, or the exact control we want to provide over the user's computer). We believer we can improve the architecture over time and give more controlled freedom to Claude where its actions will have predictable effects.

What have we learned? We observed the following strengths and limitations of Claude:

Claude is able to reliably generate excellent "standard" code (eg standard react code).
Claude is not able to reliably generate code for less prevalent frameworks, for example imgui.
Claude is useful for generating starting syntax, but is not (YET) able to match the debugging capabilities of a human engineer.
We also learned that robust environments are essential for successful AI. Having well defined components (e.g. APIs) Claude can use for coding massively improves the reliability.

Overall, Claude is quite impressive and more skilled than we'd realized.