mirror of
https://github.com/earendil-works/pi.git
synced 2026-06-18 15:54:04 +08:00
Mario Zechner
05dfaa11a8
- Implement CustomMessages interface for type-safe message extension via declaration merging - Add MessageRenderer<T> with generic typing for custom message rendering - Add messageTransformer to Agent for filtering/transforming messages before LLM - Move message filtering from transports to Agent (separation of concerns) - Add message renderer registry with typed role support - Update web-ui example with SystemNotificationMessage demo - Add custom transformer that converts notifications to <system> tags - Add SessionListDialog onDelete callback for active session cleanup - Handle non-existent session IDs in URL (redirect to new session) - Update both web-ui example and browser extension with session fixes
05dfaa11a8
·
2025-10-06 13:45:08 +02:00
History
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:
- 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