History

JAE 92a294a7a2 Some checks are pending CI / build-check-test (push) Waiting to run Details fix: 9 web UI bugs - cost tracker, model badge, empty state, provider tabs, memory tools, session save, dark mode, view toggles - Cost tracker: fix event type message -> message_end, handle usage.input fallback - Model badge: update immediately on model select via onModelSelect hook - Empty state: hide completely when hasMessages (not after LLM responds) - Provider tabs: add renderProviderTabs() to ModelSelector content + filtering - Memory tools: register memory_save/recall in tool index, export from web-ui, add to createTools - Session save: save before newSession, relax shouldSaveSession to user-only, title fallback - Dark mode: add text-foreground to memory-manager dialog + inputs - View toggles: add tool-message and thinking-block element CSS selectors - Empty state faded: return empty html instead of ghost mascot		2026-03-26 23:02:54 +00:00
..
public/mascot	feat: add mascot images, empty state, and utility message toggle	2026-03-26 01:55:59 +00:00
server	feat: add embedded terminal (xterm.js) and playwright browser panel	2026-03-26 20:10:57 +00:00
src	fix: 9 web UI bugs - cost tracker, model badge, empty state, provider tabs, memory tools, session save, dark mode, view toggles	2026-03-26 23:02:54 +00:00
.gitignore	Initial commit: Agent JAE CLI - AI coding assistant	2026-03-23 09:17:58 +01:00
index.html	Initial commit: Agent JAE CLI - AI coding assistant	2026-03-23 09:17:58 +01:00
package.json	fix: provider filter tabs, model badge always visible, empty-state 4% fade, server deps (ws/concurrently)	2026-03-26 21:27:24 +00:00
README.md	Initial commit: Agent JAE CLI - AI coding assistant	2026-03-23 09:17:58 +01:00
tsconfig.json	Initial commit: Agent JAE CLI - AI coding assistant	2026-03-23 09:17:58 +01:00
vite.config.ts	Initial commit: Agent JAE CLI - AI coding assistant	2026-03-23 09:17:58 +01:00

README.md

Pi Web UI - Example

This is a minimal example showing how to use @jaeswift/jae-web-ui in a web application.

Setup

npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

What's Included

This example demonstrates:

ChatPanel - The main chat interface component
System Prompt - Custom configuration for the AI assistant
Tools - JavaScript REPL and artifacts tool

Configuration

API Keys

The example uses Direct Mode by default, which means it calls AI provider APIs directly from the browser.

To use the chat:

Click the settings icon (⚙️) in the chat interface
Click "Manage API Keys"
Add your API key for your preferred provider:
- Anthropic: Get a key from console.anthropic.com
- OpenAI: Get a key from platform.openai.com
- Google: Get a key from makersuite.google.com

API keys are stored in your browser's localStorage and never sent to any server except the AI provider's API.

Project Structure

example/
├── src/
│   ├── main.ts       # Main application entry point
│   └── app.css       # Tailwind CSS configuration
├── index.html        # HTML entry point
├── package.json      # Dependencies
├── vite.config.ts    # Vite configuration
└── tsconfig.json     # TypeScript configuration