Sidequest

Fork side bars into separate chats without disrupting your main conversation flow.

It also uses json-render to let LLMs reliably call your custom React components like this AlgorithmVisualizer!

Structure

• apps/backend: FastAPI app managed with uv
• apps/frontend: Vite + React infinite-canvas UI
• apps/imageservice: Express service for SVG/PNG image rendering

Backend

Install dependencies:

cd apps/backend
uv sync

Set environment variables before running:

export OPENAI_API_KEY=your_key_here
export OPENAI_MODEL=your_model_here
export OPENAI_MODEL_OPTIONS=gpt-4.1-mini,gpt-4.1,gpt-4o-mini

Run the API:

cd apps/backend
uv run uvicorn app.main:app --reload

The backend listens on http://127.0.0.1:8000 and exposes:

• GET /api/health
• GET /api/chat/models
• POST /api/chat/stream

Frontend

Install dependencies:

cd apps/frontend
npm install

Run the dev server:

cd apps/frontend
npm run dev

The frontend listens on http://127.0.0.1:5173 and proxies /api requests to the backend.

Image Service

Install dependencies:

cd apps/imageservice
npm install

Run the service:

cd apps/imageservice
npm start

The image service listens on http://127.0.0.1:3001.

Features

Canvas & Chat

• Pannable and zoomable infinite canvas
• Multiple draggable chat windows
• Streaming model responses
• Per-window model picker with backend-driven model options
• Model badge on assistant responses
• Phrase-level branching from any completed user or assistant message
• Recursive child chats with inherited parent history snapshots
• Connector lines from the anchored phrase to the child chat window
• Cascade-close confirmation when a parent has descendants
• Starter questions for new chats
• Code syntax highlighting in messages

JSON-Render Interactive Components

• LLM-driven interactive React components rendered inline in chat via json-render
• Cards, charts, tables, tabs, alerts, progress bars, and more
• AlgorithmStepper: step-through algorithm walkthroughs
• AlgorithmVisualizer: synchronized code + graph visualization with step highlighting
• Diagram component for trees, graphs, and state machines (nodes/edges)

Image Rendering

• Image rendering service for static SVG/PNG generation

Quick Start

1. Start the backend.
2. Start the frontend.
3. Open http://127.0.0.1:5173.
4. Send a message in Chat 1.
5. Highlight a phrase in any completed message and click Branch.