Files
oh-my-pi/packages/web-ui/example
can1357 754da171a4 feat: added interactive /review command with multi-mode selection
- Added interactive /review command with mode selection for base
branch, uncommitted changes, specific commit, or custom
instructions.
- Added subprocess tool registry for extracting and rendering tool
data from subprocess agents.
- Added combined review result rendering with verdict and findings
tree structure.
- Changed bundled commands to be overridable by user/project
commands with same name.
- Removed findings_count parameter from submit_review tool in
favor of automatic counting.
- Added fix npm script for auto-fixable lint issues with unsafe
fixes.
2026-01-03 06:39:04 +01:00
..
2025-10-05 13:30:08 +02:00
2025-10-05 13:30:08 +02:00

Pi Web UI - Example

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