@ frontman-ai/vite (中文(简体) )
Frontman的Vite集成 - 为任何基于Vite的应用程序(React,Vue,Svelte,SolidJS,香草等)提供AI-动力开发工具.
安装
快速安装( 建议)
安装Frontman的最快方法是使用我们的CLI安装器:
npx @frontman-ai/vite install
# Or with a custom server host
npx @frontman-ai/vite install --server frontman.company.com
安装器会:
- 检测您的 Vite 工程和软件包管理器
- 安装
@frontman-ai/vite作为 dev 依赖 - 添加
frontmanPlugin({ host: '...' })给您的vite.config.ts插件阵列( 或创建一个)
CLI 选项
npx @frontman-ai/vite install [options]
Options:
--server <host> Frontman server host (default: api.frontman.sh)
--prefix <path> Target directory (default: current directory)
--dry-run Preview changes without writing files
--skip-deps Skip dependency installation
--help Show help message
手动安装
如果您喜欢手动设置 :
npm install -D @frontman-ai/vite
然后将插件添加到您的 vite.config.ts数字 :
import { defineConfig } from 'vite';
import { frontmanPlugin } from '@frontman-ai/vite';
export default defineConfig({
plugins: [
frontmanPlugin({ host: 'api.frontman.sh' }),
// ...your other plugins
],
});
快速启动
在运行安装器后, 启动您的 Vite Dev 服务器 :
npm run dev
然后打开您的浏览器 http://localhost:5173/frontman 进入前线部队.
随着默认主机设置,Frontman将您重定向到 api.frontman.sh 然后将您送回本地 /frontman URL (中文(简体) ). 在您的第一个提示前, 连接一个支持的 AI 提供者与 OAuth 或者添加 API 密钥 。 如果您配置了另一个Frontman服务器, 请在服务器上签名 .
配置选项
frontmanPlugin({
host: 'api.frontman.sh', // Frontman server host (default: env FRONTMAN_HOST or "frontman.local:4000")
basePath: 'frontman', // Base path for Frontman routes (default: "frontman")
isDev: false, // Dev mode (default: inferred from host — true unless host is "api.frontman.sh")
projectRoot: '.', // Project root directory (default: env PROJECT_ROOT or cwd)
sourceRoot: '.', // Source root for resolving file paths (default: projectRoot)
clientUrl: 'https://...', // Custom client bundle URL (default: inferred from isDev)
clientCssUrl: 'https://...', // Custom client CSS URL (default: inferred from isDev)
entrypointUrl: 'http://...', // Custom entrypoint URL for the API
});
理解 host 选项
这个 host 选项指定客户端 UI 将连接的 Frontman 服务器用于AI 能力。 你来的时候 /frontman 在您的 Vite 应用程序中:
- 该插件为 Frontman UI HTML 服务
- 用户界面加载客户端 JavaScript
?host=<your-host> - 客户端建立WebSocket连接
wss://<host>/socket - AI 交互和工具调用通过此连接流出
插件本身不连接到Frontman服务器 - 它只传递主机给客户端.
实例:
- 生产:
host: 'api.frontman.sh'• 客户端连接wss://api.frontman.sh/socket - 本地 dev :
host: 'frontman.local:4000'• 客户端连接wss://frontman.local:4000/socket
api.frontman.sh 是唯一的生产服务器。 任何其他主机值都作为 Dev 模式处理,它会改变默认值 clientUrl 从本地 dev 服务器装入,而不是生产 CDN.
支持的框架
此插件与任何基于 Vite 的项目配合 :
- 反应(通过)
@vitejs/plugin-react(中文(简体) ) - Vue( 通过
@vitejs/plugin-vue(中文(简体) ) - 斯维尔特(通过
@sveltejs/vite-plugin-svelte(中文(简体) ) - 固体JS( 通过
vite-plugin-solid(中文(简体) ) - 香草联合材料/TS
- 任何其他可视兼容框架
| 版本 | 状态 |
|---|---|
| 维特 5.x | 已完全支持 |
| 维特 6.x | 已完全支持 |
建筑
Vite Dev Server
│
├─> configureServer hook
│ └─> frontmanPlugin registers Connect middleware
│ └─> Adapts Node.js req/res ↔ Web API Request/Response
│
├─> GET /frontman
│ └─> Serves Frontman UI (HTML + client bundle + CSS)
│
├─> GET /frontman/tools
│ └─> Returns tool definitions (file read, write, search, etc.)
│
├─> POST /frontman/tools/call
│ └─> Executes tool → returns SSE stream with results
│
├─> POST /frontman/resolve-source-location
│ └─> Resolves source maps to original component locations
│
└─> OPTIONS /frontman/*
└─> CORS preflight handling
非前卫路线经过维特的普通dev服务器处理.
关键技术细节
节点.js QQWeb API 适应器
- Vite 的 Dev 服务器使用 Node.js
IncomingMessage编号 :ServerResponse - 前人中间软件使用 Web API
Request编号 :Response - 插件介于两者之间, 包括 SSE 流管道
解决问题
前卫 UI 未装入
检查 1: 验证已注册的插件
确保 frontmanPlugin() 在你身边 vite.config.ts 插件阵列和您的 dev 服务器正在运行 .
检查 2: 检查 URL
默认路径是 http://localhost:5173/frontman。如果你改变了 basePath 选项,则使用该路径。 如果 Vite 在不同的端口运行, 请在 URL 中使用该端口 .
安装器显示“ 需要手动修改 ”
当安装者找不到 plugins: [ 要注入的虚拟配置中。 手动添加导入和插件调用, 如所示 手动安装。 。 。 .
浏览器控制台中的 CORS 错误
插件包括 CORS 标题 /frontman/* 路线。 如果您看到 CORS 错误, 请确认请求会转到正确的 Vite dev 服务器 URL .
许可证
阿帕奇 - 2.0