Building Open CodeTree
Open CodeTree is a free UI that extracts AI code snippets into a code sandbox with a realtime preview.
For a few years I’ve had a specific interest in building live React editors. They are toys, but it has been a fun web app idea for me to help develop my skills.
CodeTree
I stumbled on CodeTree looking for ways to use WebAssembly to improve the process of running javascript in the browser. CodeTree solves this problem and works perfectly fine on its own without AI powered chat.
Credits to Philippe Tedajo for an awesome project! Besides the WASM and Esbuild implementation it uses Next.js and Apollo, so there are plenty of other interesting frontend tidbits in this project.
Chat and LLM
Combining a live editor and chat is the UX problem I’m trying to solve. Using Large Language Models improves coding efficiency, but chat based models require copying and pasting between the editor.
The LLM APIs simplify this by returning responses in Markdown. It is easy to know that a code snippet is being rendered, after which CodeTree will send the output to the Monaco live editor.
Under the hood there are React listeners to update the state so the live editor iframe keeps rendering.
Open CodeTree
I wanted to make sure this supports more than just ChatGPT, so I’ve added a model selection and Llama2 works pretty well comparatively. I’m looking to add more models as well as better support for local models as well soon.
You can check it out here: Open CodeTree HuggingFace Space
More than a toy?
There are no doubt plenty of other software leveraging AI to assist in coding, but sandboxes have limitations, like adding additional dependencies and working with different frameworks.
The system prompt defaults to React, but potentially could be updated to support additional libraries. To avoid installing for example CDN imports could be used. My goal ultimately is to make something that works with any javascript and LLM.
I’ve mentioned WebGPU on-device LLMs in the past, and I could see them being a good fit using something like Window.ai, stay tuned!