聊天应用工具包
一个用于构建支持ChatGPT的模型上下文协议（MCP）服务器的SvelteKit库，配备有响应式的Svelte小部件。
概述
这个库提供了三个相互协作的集成部分：
- Vite 插件 - 编译
.mcp.svelte将文件打包成独立的小部件包 - OpenAI上下文API 基于Svelte运行符的用于小部件状态和ChatGPT集成的API
- MCP 处理器/处理程序 - 服务器端处理程序，用于工具、资源和小部件的服务
它是如何运作的
graph TD
A[.mcp.svelte files] --> B[Vite Plugin]
B --> C[Standalone JS bundles
static/widgets/*.js]
B --> D[Auto-generates
src/mcp/widgets.ts]
D --> E[MCP Handler]
C --> G
E --> F[Serves to ChatGPT
as widget:// resources]
F --> G[ChatGPT loads bundle]
G --> H[Widget auto-mounts
& renders]
H --> I[useOpenAI hook
accesses context]1. Vite 插件
编译 .mcp.svelte 将文件打包成包含内联CSS的自包含JavaScript包。
它的功能是：
- 查找全部
.mcp.svelte你项目中的文件 - 将 Svelte 5 + Tailwind 编译成独立的 IIFE（立即调用函数表达式）包
- 内联所有样式（组件CSS + Tailwind工具类）
- 压缩并输出到
static/widgets/ - 自动生成
src/mcp/widgets.ts带有可自定义的小部件定义（如有需要）
设置：
// vite.config.ts
import { mcpSveltePlugin } from 'chat-app-kit/vite';
export default defineConfig({
plugins: [mcpSveltePlugin({ outputDir: 'widgets' })]
});2. OpenAI上下文API
用于在内部访问ChatGPT状态的Reactive Svelte 5符文API .mcp.svelte 组件。
它提供的内容：
useOpenAI()- 用于访问ChatGPT上下文的钩子- 具有自动持久化的响应式小部件状态
- 主题、显示模式、区域设置、安全区域
- 方法：
requestDisplayMode()，openExternal()，callTool()，sendFollowUpMessage()
用法：
import { useOpenAI } from 'chat-app-kit/api';
const openai = useOpenAI({ widgetState: { count: 0 } });
// Reactive access to ChatGPT state
$effect(() => console.log(openai.theme)); // 'light' | 'dark'
// State persists automatically
openai.widgetState.count++;
openai.requestDisplayMode('fullscreen')}>
Expand
3. MCP 处理器（或“MCP 手动器”，具体翻译取决于上下文，这里“Handler”可能指处理、操控或手动操作的意思）
SvelteKit 服务器钩子，实现了模型上下文协议以提供小部件、工具、资源和提示。
它的功能是：
- 简化了小部件注册为MCP资源的过程（作为
widget://统一资源标识符（URIs） - 让你使用 Zod/Valibot/Arktype 模式来定义工具
- 通过……将工具链接到小部件
.widget()方法 - 处理所有MCP协议请求（
/mcp端点
设置：
// src/hooks.server.ts
import { handleMCP, tool } from 'chat-app-kit/mcp';
import * as widgets from './mcp/widgets'; // Auto-generated
import { z } from 'zod';
export const handle = handleMCP({
name: 'my-app',
version: '1.0.0',
domain: 'https://my-app.example.com',
widgets, // Automatically registers all compiled widgets
tools: {
greet: tool('Greet a user')
.input(z.object({ name: z.string() }))
.widget(widgets.greetingWidget) // Links tool to widget
.handle(async ({ input }) => `Hello ${input.name}`)
},
resources: {},
prompts: {}
});各部件如何连接
- Vite 插件 编译
Greeting.mcp.svelte→widgets/greeting.js - Vite 插件 生成
widgets.ts和；与；带着export const greetingWidget = widget('greeting', {...}) - MCP 处理器（或 MCP 管理器） 寄存器
greetingWidget作为资源在widget://greeting.js - 工具 通过链接到小部件
.widget(greetingWidget)添加元数据 - ChatGPT 调用工具 → 处理器返回小部件URI → ChatGPT加载包
- 捆绑包/软件包/套餐 运行，呼叫
useOpenAI()访问 上下文API → 小部件渲染
关键特性
- 独立包 - 无运行时依赖，所有CSS内联
- 反应状态 - 小部件状态会自动与ChatGPT同步
- 类型安全 - 完全支持TypeScript，并带有模式验证
- 热重载 - 变更至
.mcp.svelte在开发模式下，文件即时重新加载 - 符合MCP标准/规范 - 遵循模型上下文协议规范