chat-app

LLM Chat application using Electron with React and TypeScript. This project was mostly a test of Claude 3.5 Sonnets ability to translate design requirements into Tailwind CSS classes and React components.

For example, the design in the screenshot was created by asking Claude to generate a modern, glassmorphic design with neon colors. Claude was that asked to refine the design with images of the resulting layout provided as additional conext. With some minor manual tweaks, this was the result of a couple of hours of coding.

TODO

• Conversation List
• Token streaming
• Syntax highlighting for code blocks
• Nifty styling (Courtesy of Claude Sonnet 3.5)
• Copy button for code blocks (shows up on hover)
• RAG?
• Chat persistence
• More providers/models
• API Key persistence
• Preferences window

Recommended IDE Setup

• VSCode + ESLint + Prettier

Project Setup

Install

$ npm install

You need to create a .env file with API keys right now. An OpenAI key is a good starting place.

.env

GROQ_API_KEY=...
OPENAI_API_KEY=...
ANTHROPIC_API_KEY=...

Development

$ npm run dev

Build

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux