JAE
fedc60fd0f
Some checks are pending
CI / build-check-test (push) Waiting to run
- Merge 3 servers into single tool-server.mjs on port 7700 - HTTP API: POST /api/bash, /api/browser/* - WebSocket: /ws/terminal (xterm.js panel) - WebSocket: /ws/browser (live browser panel) - SHARED Playwright instance between LLM browser tool and user panel - When AI navigates a page, user sees it live in browser panel - When user clicks in panel, AI tools see the same page state - Remove standalone terminal-server.mjs (was :7701) - Remove standalone browser-server.mjs (was :7702) - Update browser-panel.ts: ws://localhost:7700/ws/browser - Update terminal-panel.ts: ws://localhost:7700/ws/terminal - Agent Zero-inspired system prompt with: - Structured problem-solving methodology (analyse/plan/execute/verify/report) - Clear tool usage rules (no tools for casual chat) - Detailed tool descriptions with usage guidance - Resourceful retry behaviour on failures - npm run dev starts both vite + unified server via concurrently |
||
|---|---|---|
| .. | ||
| public/mascot | ||
| server | ||
| src | ||
| .gitignore | ||
| docker-compose.yml | ||
| Dockerfile | ||
| index.html | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
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