# chat-web

**Repository Path**: limylily/chat-web

## Basic Information

- **Project Name**: chat-web
- **Description**: 页面对话
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Chat Web — 纯前端对话示例

**纯前端项目**：无后端服务，直接请求模型 API，tools 与 skills 均在前端实现。

- **多轮对话**：页面内输入，模型基于历史上下文回复。
- **工具调用（tools）**：与 chat-cli 一致的工具（天气、计算、搜索、模型服务等），在浏览器中执行；模型服务类工具需配置可选的后端地址。
- **Skills**：与 chat-cli 一致的技能说明，从 **文件** 加载：`public/skills/<name>/SKILL.md`（前端通过 fetch 请求同源静态资源），解析 YAML frontmatter 后注入 system 提示。可直接复用或同步 chat-cli 的 `skills/` 目录。
- **流式输出**：SSE 流式展示回复。
- **可配置**：模型 API 地址、密钥、模型名、可选 tools 后端，均通过环境变量或 `window.__CHAT_WEB_CONFIG__` 配置。

## 架构

```
浏览器
  ├── React 前端 (Vite + Ant Design)
  ├── 直接请求 模型 API（OpenAI 兼容）
  ├── skills 从 public/skills/<name>/SKILL.md 加载（fetch）
  └── tools 在 src/tools.ts 中执行（部分工具会请求 VITE_API_BASE_URL）
```

无独立后端，仅依赖「模型 API」及可选的「模型服务类 tools 后端」。

## 环境与配置

```bash
cd chat-web
npm install
cp .env.example .env
# 编辑 .env：至少填写 VITE_OPENAI_API_KEY
```

| 变量 | 说明 |
|------|------|
| `VITE_OPENAI_API_KEY` | 必填，模型 API 密钥（会暴露在前端构建产物中，仅适合 Demo/内网） |
| `VITE_OPENAI_BASE_URL` | 可选，模型 API 地址，默认 https://api.openai.com/v1 |
| `VITE_CHAT_MODEL` | 可选，模型名称，默认 gpt-4o-mini |
| `VITE_API_BASE_URL` | 可选，模型服务类 tools 请求的后端地址。**开发时建议**设为 `/tools-api` 并用 Vite 代理避免 CORS，同时配置 `VITE_API_PROXY_TARGET=http://127.0.0.1:58089`；生产可填完整 URL。不配则相关工具返回「未配置」。 |

也可在页面加载前通过 `window.__CHAT_WEB_CONFIG__` 覆盖，例如：

```html
<script>
  window.__CHAT_WEB_CONFIG__ = {
    openaiApiKey: 'sk-...',
    openaiBaseUrl: 'https://api.openai.com/v1',
    chatModel: 'gpt-4o-mini',
    toolsApiBaseUrl: 'http://127.0.0.1:58089'
  };
</script>
```

## 运行

```bash
npm run dev
```

浏览器访问控制台提示的地址（如 http://localhost:5173）。未配置 `VITE_OPENAI_API_KEY` 时发送消息会提示配置。

## 构建与部署

```bash
npm run build
```

产物在 `dist/`。部署到 Nginx 等时可通过 `VITE_BASE_PATH=/chat/` 配置子路径。

## 项目结构

```
chat-web/
  src/
    api/chat.ts    # 直接请求模型 API，流式 + tool_calls 循环
    config.ts      # 读取模型 API、tools 后端等配置
    skills.ts      # 从 public/skills/*/SKILL.md 加载并拼接 system 提示
    tools.ts       # 工具定义与执行（全部在前端）
    components/
    App.tsx, main.tsx
  index.html
  package.json
  vite.config.ts
  README.md
```

## Tools 与 Skills

- **Tools**：在 `src/tools.ts` 中定义并执行，与 chat-cli 行为一致；模型服务类依赖可选的 `VITE_API_BASE_URL`。
- **Skills**：在 `public/skills/<name>/SKILL.md` 中维护，与 chat-cli 的 `skills/` 目录结构一致，可直接复制或同步。`src/skills.ts` 负责 fetch 与 frontmatter 解析。

## 安全说明

API 密钥通过环境变量或全局配置注入后会出现在前端代码或请求中，仅适合本地 Demo、内网或受控环境。生产环境若需保护密钥，应使用自有后端代理模型 API。