Files

T

can1357 2be354322d chore: renamed package scope to @oh-my-pi for consistent branding

- Renamed npm package scope from @mariozechner to @oh-my-pi across all packages for consistent branding.
- Removed packages/pods directory and all related pod management functionality.
- Updated import paths and module declarations throughout codebase to reflect new package names.
- Reformatted code with consistent trailing comma removal and ternary operator alignment.

2026-01-02 18:08:23 +01:00

1.6 KiB

Raw Blame History

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:

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

1.6 KiB Raw Blame History