getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-15 21:03:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
co-mono/packages/web-ui/example
History
Mario Zechner 985f955ea0 Clean up TUI package and refactor component structure 
- Remove old TUI implementation and components (LoadingAnimation, MarkdownComponent, TextComponent, TextEditor, WhitespaceComponent)
- Rename components-new to components with new API (Loader, Markdown, Text, Editor, Spacer)
- Move Text and Input components to separate files in src/components/
- Add render caching to Text component (similar to Markdown)
- Add proper ANSI code handling in Text component using stripVTControlCharacters
- Update coding-agent to use new TUI API (requires ProcessTerminal, uses custom Editor subclass for key handling)
- Remove old test files, keep only chat-simple.ts and virtual-terminal.ts
- Update README.md with new minimal API documentation
- Switch from tsc to tsgo for type checking
- Update package dependencies across monorepo
2025-11-11 10:32:18 +01:00
..
src Custom provider WIP 2025-11-10 21:47:21 +01:00
.gitignore web-ui package 2025-10-05 13:30:08 +02:00
index.html Add Anthropic prompt caching, pluggable storage, and CORS proxy support 2025-10-05 23:00:36 +02:00
package-lock.json web-ui package 2025-10-05 13:30:08 +02:00
package.json Clean up TUI package and refactor component structure 2025-11-11 10:32:18 +01:00
README.md web-ui package 2025-10-05 13:30:08 +02:00
tsconfig.json web-ui package 2025-10-05 13:30:08 +02:00
vite.config.ts web-ui package 2025-10-05 13:30:08 +02:00

README.md

Pi Web UI - Example

This is a minimal example showing how to use @mariozechner/pi-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:

  1. Click the settings icon (⚙️) in the chat interface
  2. Click "Manage API Keys"
  3. Add your API key for your preferred provider:

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

Learn More