feat(prototypes): add pi-web-ui-lan prototype
LAN-accessible web UI for pi agent interaction.
This commit is contained in:
dan
parent
1e1965dc17
commit
131fb86852
26
prototypes/pi-web-ui-lan/README.md
Normal file
26
prototypes/pi-web-ui-lan/README.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Pi Web UI (LAN prototype)
|
||||
|
||||
Minimal LAN-only web UI using `@mariozechner/pi-web-ui`.
|
||||
|
||||
## Run (LAN)
|
||||
|
||||
```bash
|
||||
cd /home/dan/proj/skills/prototypes/pi-web-ui-lan
|
||||
npm install
|
||||
npm run dev:lan
|
||||
```
|
||||
|
||||
Vite will print a LAN URL (e.g., `http://192.168.1.20:5173`). Open it on your phone connected to the same Wi‑Fi.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. Start the dev server (`npm run dev:lan`).
|
||||
2. Open the LAN URL on the phone.
|
||||
3. Open Settings → Manage API Keys and add your provider key.
|
||||
4. Chat in the UI.
|
||||
|
||||
## Notes / Limitations
|
||||
|
||||
- This prototype runs in **direct mode** (browser calls provider APIs directly).
|
||||
- It does **not** access the local filesystem or repo yet.
|
||||
- Next step for repo access: add a local RPC/agent backend and bridge it to the UI.
|
||||
12
prototypes/pi-web-ui-lan/index.html
Normal file
12
prototypes/pi-web-ui-lan/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Pi Web UI (LAN)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
prototypes/pi-web-ui-lan/package.json
Normal file
22
prototypes/pi-web-ui-lan/package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "pi-web-ui-lan",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:lan": "vite --host 0.0.0.0 --port 5173",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --host 0.0.0.0 --port 5173"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mariozechner/pi-agent-core": "^0.49.3",
|
||||
"@mariozechner/pi-ai": "^0.49.3",
|
||||
"@mariozechner/pi-web-ui": "^0.49.3",
|
||||
"lit": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^7.1.6"
|
||||
}
|
||||
}
|
||||
2938
prototypes/pi-web-ui-lan/pnpm-lock.yaml
Normal file
2938
prototypes/pi-web-ui-lan/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
49
prototypes/pi-web-ui-lan/src/main.ts
Normal file
49
prototypes/pi-web-ui-lan/src/main.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { Agent } from "@mariozechner/pi-agent-core";
|
||||
import { getModel } from "@mariozechner/pi-ai";
|
||||
import {
|
||||
ApiKeyPromptDialog,
|
||||
AppStorage,
|
||||
ChatPanel,
|
||||
IndexedDBStorageBackend,
|
||||
ProviderKeysStore,
|
||||
SessionsStore,
|
||||
SettingsStore,
|
||||
defaultConvertToLlm,
|
||||
setAppStorage,
|
||||
} from "@mariozechner/pi-web-ui";
|
||||
import "@mariozechner/pi-web-ui/app.css";
|
||||
|
||||
const settings = new SettingsStore();
|
||||
const providerKeys = new ProviderKeysStore();
|
||||
const sessions = new SessionsStore();
|
||||
|
||||
const backend = new IndexedDBStorageBackend({
|
||||
dbName: "pi-web-ui-lan",
|
||||
version: 1,
|
||||
stores: [settings.getConfig(), providerKeys.getConfig(), sessions.getConfig(), SessionsStore.getMetadataConfig()],
|
||||
});
|
||||
|
||||
settings.setBackend(backend);
|
||||
providerKeys.setBackend(backend);
|
||||
sessions.setBackend(backend);
|
||||
|
||||
const storage = new AppStorage(settings, providerKeys, sessions, undefined, backend);
|
||||
setAppStorage(storage);
|
||||
|
||||
const agent = new Agent({
|
||||
initialState: {
|
||||
systemPrompt: "You are a helpful assistant.",
|
||||
model: getModel("google", "gemini-3-flash-preview"),
|
||||
thinkingLevel: "off",
|
||||
messages: [],
|
||||
tools: [],
|
||||
},
|
||||
convertToLlm: defaultConvertToLlm,
|
||||
});
|
||||
|
||||
const chatPanel = new ChatPanel();
|
||||
await chatPanel.setAgent(agent, {
|
||||
onApiKeyRequired: async (provider) => ApiKeyPromptDialog.prompt(provider),
|
||||
});
|
||||
|
||||
document.getElementById("app")?.appendChild(chatPanel);
|
||||
15
prototypes/pi-web-ui-lan/tsconfig.json
Normal file
15
prototypes/pi-web-ui-lan/tsconfig.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
10
prototypes/pi-web-ui-lan/vite.config.ts
Normal file
10
prototypes/pi-web-ui-lan/vite.config.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
conditions: ["production", "browser", "module", "default"],
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue