Demo 2.0

ChatCraft Concepts

Designed for people who spend a lot of time writing/reading on GitHub
Chatting with code and "Writing as Thinking" vs. autocomplete
Search vs. Language Transformations
Human in the loop vs. AGI
You are in control of your own data. Everything is stored locally (chats, API keys, settings)
Combine different models and providers in the same chat
Control the model via custom system prompts
Installable as a PWA (Desktop or Mobile)
Everything is editable

Tour of UI
Dark/Light Mode
Sidebar (Saved Chats, Shared Chats, Functions)
Search
Prompt area
- Get help with /help
- / key to get focus
- How to chat
- Scroll-up while streaming to read back, pause, cancel (ESC)
- Edit any message, including ones you didn't write!
- Options button
  - Clear vs. New Window to start a new chat
  - Duplicate... to make a copy of the current chat
  - Copy chat in various formats
  - Export chat in various formats
  - Share a chat (must be logged in via GitHub)
  - Attach files (currently only images are supported) for supported models to use
  - Delete a chat
- Ask button
Messages area
- System Prompt
- AI and Human messages
- Messages collapse when long
- Copy a Message
- Export a Message in different formats
Login with GitHub (soon with Google, too)
Settings
- Models - add/update AI providers and API keys
- System Prompt - set/restore your default system prompt
- Web Handlers - connect your own URL handlers to ChatCraft
- Customization - customize the UI

GitHub Flavoured Markdown
Syntax Highlighting code blocks
- Copy or Export code blocks (independent of the rest of a message)
- View a code block in fullscreen
Some code blocks have more power
- HTML (demo asking for a chart by using chart.js or plotly.js with data as a single HTML page)
- Mermaid Diagrams (find a meeting overlap for various timezones)
- Nomnoml Diagrams
- JavaScript: can be run in the browser, or on the server side. Console output becomes part of the chat and can be fed back in.
- TypeScript: can be compiled and run in the browser, identically to JS
- Other languages (e.g., Python and Ruby) can also be run in browser via WASI/WASM (runtime must be downloaded the first time)
Rendering math notation
Using Retry-with to compare how different models/providers respond to the same chat/messages/context.
Slash commands
- /import <url> to get a file from GitHub or a YouTube video, etc.
- /image <prompt> to generate an image using Dall-E
Adding images to a chat and talking about them (e.g., translate this document)

Model responds in a way that isn't right, or gets stuck on something. You can edit the response it gives and keep going (e.g., you're in control)
Summarize a YouTube video using a free model or turn into a blog post
Get a patch or diff from GitHub and get help doing a code review, understanding a change, or writing a PR description
Using image recognition and generation to do UI/UX research
Adding functions with @fn to solve a problem beyond the capabilities of the model (demo: generating APA citations for DOIs)
- Using the model to figure out how to write the function you need, and iterating on it in the chat
Copy a function to a Gist and have your friend use it via @fn-url
Text-to-Speech and Speech-To-Text demos