SvelteChatKit：面向多后端的开源 SvelteKit 聊天 UI 套件

SvelteChatKit 是一个面向 SvelteKit 2 与 Svelte 5（Runes 模式）的开源聊天界面工具包，主打「provider-agnostic」：通过统一的 ChatProvider 接口，开发者可以在不修改 UI 代码的情况下，将同一套前端界面切换到 OpenAI 兼容 API、Ollama、Dify 或自建后端。项目以零配置 Demo 模式开箱即用，无需 API Key 即可在本地启动。

核心特性

• 流式输出：支持 SSE、NDJSON 与原始文本流，逐 token 渲染，并提供中断按钮，可在流式输出中途干净中止。
• 持久化：基于 localStorage 的会话记忆，SSR 安全，支持 opt-in。
• Markdown 与代码高亮：GFM 渲染，搭配 highlight.js 代码块，并通过 DOMPurify 做 HTML 清洗。
• 智能滚动：自动跟随流式输出，用户上滑浏览历史时不强制滚动，并提供浮动「回到底部」按钮。
• 错误处理：类型化的 ChatProviderError，支持行内可关闭的错误提示与逐条消息错误状态。
• 移动端适配：在 375px 宽度下可用，输入框采用 16px 字号避免 iOS 自动缩放，文本框随内容自动增高。
• TypeScript 严格模式：完整的类型化公共 API。

支持的后端

• openai：兼容 OpenAI、OpenRouter、Groq、LM Studio、vLLM、llama.cpp、Azure 风格网关，传输协议为 SSE（POST {baseUrl}/chat/completions），需要 baseUrl、apiKey、model。
• ollama：本地 Ollama，NDJSON（POST {baseUrl}/api/chat），浏览器侧调用需配置 OLLAMA_ORIGINS。
• dify：面向 Dify 对话类应用，SSE 协议（POST {baseUrl}/chat-messages）。
• custom：自定义端点，自动识别 SSE、流转文本或纯 JSON。
• mock：内置演示提供方，纯前端模拟流式 Markdown 输出，无需网络。

快速上手

通过 git clone、npm install、复制 .env.example 为 .env、运行 npm run dev 即可在本地启用演示。Demo 默认使用 mock 提供方，无需任何密钥；填入 .env 后可指向真实后端。要求 Node 20 及以上。

接入与扩展

开发者可通过 createProvider 创建提供方实例，配合 Chat 类与 <ChatWindow> 组件快速搭建聊天界面。Chat 暴露基于 runes 的响应式状态 messages、status、error、busy，以及 send()、stop()、clear()、setProvider() 等方法，便于在之上构建自定义 UI。

自定义后端只需实现 ChatProvider 接口，通过 registerProvider 注册后即可复用工厂方法；官方文档 docs/adding-a-provider.md 提供了完整示例，包含一个可工作的 Anthropic 提供方实现，典型写法在 20 行左右。

配置与安全注意

环境变量以 PUBLIC_ 前缀暴露，例如 PUBLIC_DEFAULT_PROVIDER、PUBLIC_OPENAI_BASE_URL、PUBLIC_OPENAI_API_KEY、PUBLIC_OPENAI_MODEL、PUBLIC_DIFY_BASE_URL、PUBLIC_DIFY_API_KEY、PUBLIC_OLLAMA_BASE_URL、PUBLIC_OLLAMA_MODEL、PUBLIC_CUSTOM_ENDPOINT，缺省时回退到 mock 提供方。需要特别注意的是，PUBLIC_* 变量会被打包进客户端代码并对访问者可见，仅适合本地开发或演示；生产环境应将密钥保留在服务端，通过 custom 端点指向一个加 Authorization 头的代理路由来转发请求。