Skip to main content

Web UI — @mariozechner/pi-web-ui

概述​

基于 [@mariozechner/pi-ai(../ai层/) 和 [@mariozechner/pi-agent-core(../agent核心/) 的可复用 Web UI 组件。

使用 mini-lit Web 组件和 Tailwind CSS v4 构建。

特性​

  • Chat UI：完整的聊天界面，支持消息历史、流式输出、工具执行
  • 工具：JavaScript REPL、文档提取、Artifacts（HTML、SVG、Markdown 等）
  • 附件：PDF、DOCX、XLSX、PPTX、图片预览和文本提取
  • Artifacts：可交互的 HTML、SVG、Markdown，支持沙箱执行
  • 存储：IndexedDB 后端存储会话、API 密钥和设置
  • CORS 代理：自动处理浏览器环境
  • 自定义 Provider：支持 Ollama、LM Studio、vLLM、OpenAI 兼容 API

安装​

npm install @mariozechner/pi-web-ui @mariozechner/pi-agent-core @mariozechner/pi-ai

快速开始​

import { Agent } from '@mariozechner/pi-agent-core';
import { getModel } from '@mariozechner/pi-ai';
import {
  ChatPanel,
  IndexedDBStorageBackend,
  setAppStorage,
} from '@mariozechner/pi-web-ui';
import '@mariozechner/pi-web-ui/app.css';

// 设置存储
const backend = new IndexedDBStorageBackend({ dbName: 'my-app' });

// 创建 Agent
const agent = new Agent({
  initialState: {
    model: getModel('anthropic', 'claude-sonnet-4-20250514'),
  },
});

// 创建聊天面板
const chatPanel = new ChatPanel();
chatPanel.setAgent(agent);
document.body.appendChild(chatPanel);

组件列表​

组件说明
ChatPanel主聊天面板
ApiKeyPromptDialogAPI 密钥输入对话框
SettingsStore设置存储
SessionsStore会话存储
ProviderKeysStoreProvider 密钥存储

翻译自 @mariozechner/pi-web-ui