%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%23061b40;%20}%20.st1%20{%20fill:%20%23306af1;%20}%20.st2%20{%20fill:%20%235ce5cf;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cpath%20class='st0'%20d='M55,10.5h9v3h-9v9h12V7.5h-12v3ZM64,19.5h-6v-3h6v3Z'/%3e%3cpolygon%20class='st0'%20points='69%2016.5%2078%2016.5%2078%2019.5%2069%2019.5%2069%2022.5%2081%2022.5%2081%2013.5%2072%2013.5%2072%2010.5%2081%2010.5%2081%207.5%2069%207.5%2069%2016.5'/%3e%3cpolygon%20class='st0'%20points='95%2010.5%2095%207.5%2083%207.5%2083%2022.5%2095%2022.5%2095%2019.5%2086%2019.5%2086%2016.5%2095%2016.5%2095%2013.5%2086%2013.5%2086%2010.5%2095%2010.5'/%3e%3cpath%20class='st0'%20d='M40,1.5v21h11.6l1.4-1.4v-7.6h0c0,0-1.4-1.5-1.4-1.5l1.4-1.4V2.9l-1.4-1.4h-11.6ZM50,19.5h-7v-6h7v6ZM50,10.5h-7v-6h7v6Z'/%3e%3c/g%3e%3cpath%20class='st1'%20d='M23.1,24L14.7,4.8l-4.9,11.2h3.8l-1.8,4H3.3L12.1,0H2C.9,0,0,.9,0,2v20c0,1.1.9,2,2,2h21.1Z'/%3e%3cpath%20class='st2'%20d='M34,0h-16.8l10.6,24h6.2c1.1,0,2-.9,2-2V2C36,.9,35.1,0,34,0ZM32.5,20h-4V4h4v16Z'/%3e%3c/svg%3e)
Assistant Ui
assistant-ui是一个开源TypeScript/React库，用于快速构建生产级AI聊天界面，提供可组合的UI组件、流式响应、无障碍访问等功能，支持多种AI后端和模型。
评分 : 5分
下载量 : 6.1K
什么是 Assistant UI?
Assistant UI 是一个专门为 React 应用程序设计的开源 UI 库，旨在帮助开发者快速构建功能丰富、用户体验优秀的 AI 聊天界面。它处理了聊天应用中的常见复杂问题，如流式传输、自动滚动、可访问性和实时更新，让开发者可以专注于业务逻辑。如何使用 Assistant UI?
使用 Assistant UI 非常简单。您可以通过命令行工具快速创建新项目或在现有项目中初始化。它提供了可组合的 UI 组件，您可以像搭积木一样构建聊天界面。同时，它与多种 AI 后端（如 AI SDK、LangGraph、Mastra 等）兼容，并支持广泛的 AI 模型提供商。适用场景
Assistant UI 非常适合需要集成 AI 聊天功能的各类应用，包括：客户服务聊天机器人、内部知识助手、代码助手、教育应用、内容创作工具等。任何需要在应用中添加智能对话界面的场景都可以使用 Assistant UI。主要功能
可组合的 UI 组件
采用类似 shadcn/ui 的设计理念，提供可组合的 UI 原语，而不是单一的整体组件。您可以自定义每一个像素，完全控制界面外观。
生产就绪的 UX
开箱即用的生产级用户体验，包括流式传输、自动滚动、重试机制、附件支持、Markdown 渲染、代码高亮和语音输入（听写）等功能。
工具调用和 JSON 渲染
能够将工具调用和 JSON 数据渲染为组件，支持内联收集人工批准，并启用安全的前端操作。
广泛的集成支持
支持多种 AI 后端，包括 AI SDK、LangGraph、Mastra 或自定义后端。同时支持广泛的模型提供商，如 OpenAI、Anthropic、Mistral、Google Gemini 等。
键盘快捷键和可访问性
内置键盘快捷键和完整的可访问性支持，确保所有用户都能方便地使用聊天界面。
Assistant Cloud 集成
可选集成 Assistant Cloud，提供聊天历史记录和分析功能，只需一个环境变量即可启用。
优势
快速上线：经过实战检验的组件，内置流式传输和附件功能
高度可定制：采用可组合的设计理念，而不是单一的整体组件
优秀的开发者体验：合理的默认设置、键盘快捷键、可访问性和强大的 TypeScript 支持
企业级就绪：通过 Assistant Cloud 提供可选的聊天历史记录和分析功能
社区活跃：由 Y Combinator 支持，拥有活跃的 Discord 社区
局限性
仅支持 React：目前只提供 React 版本，不支持其他前端框架
学习曲线：虽然易用，但完全自定义需要了解其组件架构
依赖后端集成：需要与 AI 后端配合使用，不是完整的端到端解决方案
如何使用
创建新项目
如果您要开始一个新项目，可以使用 create 命令快速搭建基础结构。
%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%230080ff;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='st0'%20d='M16.2,11.1c.4.5.4,1.2,0,1.8l-4.7,7.1h-3.8l5.3-8L7.6,4h3.8l4.7,7.1Z'/%3e%3c/svg%3e)
在现有项目中初始化
如果您已经有一个 React 项目，可以使用 init 命令将 Assistant UI 添加到项目中。
配置 AI 后端
根据您的需求选择合适的 AI 后端（AI SDK、LangGraph、Mastra 或自定义后端）并进行配置。
构建聊天界面
使用 Assistant UI 提供的组件构建您的聊天界面，可以根据需要自定义样式和布局。
使用案例
客户服务聊天机器人
构建一个智能客户服务聊天机器人，帮助用户解答产品相关问题，提供技术支持。
代码助手
创建一个代码编写助手，帮助开发者生成代码片段、解释代码逻辑或调试问题。
内容创作助手
开发一个内容创作工具，帮助作者生成文章大纲、润色文本或翻译内容。
内部知识库助手
为企业构建内部知识助手，帮助员工快速查找公司政策、技术文档或流程指南。
常见问题
Assistant UI 是免费的吗？
我需要有 AI 开发经验才能使用 Assistant UI 吗？
Assistant UI 支持哪些 AI 模型？
我可以在移动应用中使用 Assistant UI 吗？
如何自定义 Assistant UI 的外观？
Assistant Cloud 是必须的吗？
相关资源
官方网站
Assistant UI 的官方网站，包含产品介绍、演示和最新信息
文档
完整的官方文档，包含安装指南、API 参考和使用教程
示例
实际使用案例和演示，展示 Assistant UI 的各种应用场景
GitHub 仓库
Assistant UI 的源代码仓库，可以查看代码、提交问题或参与贡献
Discord 社区
加入 Assistant UI 的 Discord 社区，与其他开发者交流、获取帮助
联系销售
如需企业支持或定制服务，可以预约销售咨询
演示视频（短版）
Assistant UI 的简短演示视频，快速了解核心功能
演示视频（长版）
Assistant UI 的详细演示视频，包含更多使用场景和技巧
Figma Context MCP
Framelink Figma MCP Server是一个为AI编程工具（如Cursor）提供Figma设计数据访问的服务器，通过简化Figma API响应，帮助AI更准确地实现设计到代码的一键转换。
TypeScript
74.0K
4.5分
Duckduckgo MCP Server
已认证
DuckDuckGo搜索MCP服务器，为Claude等LLM提供网页搜索和内容抓取服务
Python
84.0K
4.3分
Firecrawl MCP Server
Firecrawl MCP Server是一个集成Firecrawl网页抓取能力的模型上下文协议服务器，提供丰富的网页抓取、搜索和内容提取功能。
TypeScript
150.6K
5分
Edgeone Pages MCP Server
EdgeOne Pages MCP是一个通过MCP协议快速部署HTML内容到EdgeOne Pages并获取公开URL的服务
TypeScript
33.0K
4.8分
Exa Web Search
已认证
Exa MCP Server是一个为AI助手（如Claude）提供网络搜索功能的服务器，通过Exa AI搜索API实现实时、安全的网络信息获取。
TypeScript
57.0K
5分
Baidu Map
已认证
百度地图MCP Server是国内首个兼容MCP协议的地图服务，提供地理编码、路线规划等10个标准化API接口，支持Python和Typescript快速接入，赋能智能体实现地图相关功能。
Python
50.1K
4.5分
Context7
Context7 MCP是一个为AI编程助手提供实时、版本特定文档和代码示例的服务，通过Model Context Protocol直接集成到提示中，解决LLM使用过时信息的问题。
TypeScript
105.5K
4.7分
Minimax MCP Server
MiniMax Model Context Protocol (MCP) 是一个官方服务器，支持与强大的文本转语音、视频/图像生成API交互，适用于多种客户端工具如Claude Desktop、Cursor等。
Python
64.4K
4.8分