Building Chatcraft.org

I would like to introduce ChatCraft.org, a developer-focused, open source ChatGPT frontend. While it’s my favorite GPT UI—as it was created to make my life more convenient—I’m excited about the fun, collaborative journey ahead. I think we need to explore the design space of GPT-assisted collaboration to write code. The best way to do that is through open source exploration of the concept (see David Humphrey’s blog post for a more detailed backstory on the motivation behind the tool). 

How it’s different from ChatGPT.com

• It’s open source. It has the ability to adapt/re-use the UI to your workflow. 

• It is more robust than ChatGPT.com. We only go down when the API goes down, and there are no weird session/logout issues. 

• It’s cheap. I’ve never spent more than $10/month with my heavy GPT usage prior to GPT-4 (I’m still spending sub $20). 

• You have the ability to share keys with friends. The price above includes half a dozen of my best friends using my keys.

• There’s browser-local storage for chat history.

• You can easily switch between gpt3.5-turbo and GPT-4 models. 

• There’s token usage tracking, so you can see how much you’re spending. 

Dev-focused features

• There are inline previews for HTML. No more pasting HTML code into your editor to see what it looks like. 

• Mermaidjs rendering. 

• There is multi-line editing mode for code

The following speed up interactions and save money:

• You can use a “just show me the code” mode to cut off GPT explanations. This is especially useful to speed up GPT-4 responses. 

• There is a single-message mode for tweaking code quickly. 

• You can delete messages, and reuse/edit them for the next prompt. This is useful when a conversation goes off the rails. 

The inception 

I have been using GPT to do most of my coding since September. It profoundly changed how I write code as I no longer spend days looking up commodity programming knowledge. I’m also a lot braver now when I write code because I never have to stare at a blank screen and API. This means that I’m much more likely to write code outside of my domain of expertise. So far, I’ve written accessibility, audio, web UI, lua, C++, none of which I usually enjoy writing in my spare time. I started with the GPT playground console, then spent 4 weekends writing my own clone with interaction history, markdown, syntax highlighting, and sharing. However, I was bothered by the fact that I was failing to capture the iterative nature of writing code with GPT. 

So I shared my UI and my OpenAI keys with some friends—it was way too life-changing of a tool not to do so. Eventually, ChatGPT.com came along and made my UI conception obsolete.

But I kept using my tool because I found that ChatGPT was down too often and I constantly needed to re-login. It disrupted my flow too much. 

Eventually, I decided that I would love to interactively edit mermaid diagrams with GPT, so I started looking at open source ChatGPT frontends to borrow or contribute to. I found that most were written in Next.JS which introduced server-side requirements and mental complexity I didn’t want to deal with at a hobby scale.

I ended up writing my own frontend by asking GPT to write me a basic chat UI and struggling through React/Vite. It turns out that GPT knows flexbox better than I ever will. GPT also came up with the name Chatcraft.org, which I think is pretty good. It’s fun to write a tool that helps you write itself.

I reconnected with a friend from my Mozilla days, David Humphrey (blog, github), and told him how excited I was about using a custom UI on top of GPT for exploratory coding. He was also excited and we started working on the UI together. My UI code is now long gone and most of ChatCraft’s amazing UX experience is thanks to David’s contributions. I can’t emphasize enough how much I appreciate David’s UI/UX creativity in the project. 

The future 

I love a conversational approach to writing code. Sometimes, the act of asking a question makes the answer obvious before GPT can get back to me. For me, this has provided a lot more satisfaction than Copilot-style autocomplete.

I believe that there are unexplored future interaction modes that integrate IPython/Smalltalk interactive programming environments that can build stronger learning and social interaction modes than GitHub allows.

Reactions from our builders 

“Recently in my work building with LLMs, I’ve discovered the CDD methodology which originally comes from the Conversational AI community. In CDD, the focus shifts to the quality of the end-user conversation with the AI. Unlike traditional software development which emphasizes various aspects such as functionality and scalability, CDD places the user conversation first.

Why? The text-based interaction between the application and the AI is the core of any LLM-based application. If the conversation lacks quality, the user experience suffers, regardless of the technical sophistication of the AI.

I’ve been utilizing ChatCraft.org in our CDD approach at TheGP. ChatCraft simplifies the exploration, sharing, and collaboration of AI conversations among developers. It allows for swift prototyping of high-quality conversations and prompts before they're integrated into an LLM-based application.

In essence, CDD is about prioritizing the LLM conversation quality. It's a conversation-first approach that aims to create more engaging and effective AI experiences. With the help of tools like ChatCraft, this becomes a much more achievable goal.” - Niall O’Higgins, Director of Engineering