From 7575f70a15969397070886752972d2ea8594f694 Mon Sep 17 00:00:00 2001 From: kagol Date: Wed, 3 Jun 2026 15:21:28 +0800 Subject: [PATCH] docs: revamp README for better first impression and discoverability --- README.md | 299 ++++++++++++++++++++++++++++++------------------ README.zh-CN.md | 299 ++++++++++++++++++++++++++++++------------------ 2 files changed, 370 insertions(+), 228 deletions(-) diff --git a/README.md b/README.md index 994266983..eff94b45e 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,104 @@ -# TinyRobot +
-

- - OpenTiny Logo - -

+# 🤖 TinyRobot +**The Vue 3 AI Chat Component Library — Build enterprise-grade AI conversations in minutes, not weeks.** + +[![GitHub Stars](https://img.shields.io/github/stars/opentiny/tiny-robot?style=social)](https://github.com/opentiny/tiny-robot/stargazers) [![npm version](https://img.shields.io/npm/v/@opentiny/tiny-robot.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot) +[![npm downloads](https://img.shields.io/npm/dw/@opentiny/tiny-robot)](https://www.npmjs.com/package/@opentiny/tiny-robot) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![Vue 3](https://img.shields.io/badge/Vue-3.x-42b883.svg)](https://vuejs.org/) +[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178c6.svg)](https://www.typescriptlang.org/) -**TinyRobot** is an AI component library built for Vue 3, following the OpenTiny Design system. It provides rich AI interaction components to help developers quickly build enterprise-level AI applications. +[🚀 Live Demo](https://docs.opentiny.design/tiny-robot/examples/assistant) · [📖 Documentation](https://docs.opentiny.design/tiny-robot/) · [💬 Discussions](https://github.com/opentiny/tiny-robot/discussions) · [🐛 Report Bug](https://github.com/opentiny/tiny-robot/issues) -## ✨ Features +English | [简体中文](https://github.com/opentiny/tiny-robot/blob/HEAD/README.zh-CN.md) -- 🤖 **Rich AI Components**: Comprehensive set of AI interaction components including chat bubbles, message input, conversation management, and more -- 🎨 **OpenTiny Design**: Follows OpenTiny Design system for consistent UI/UX -- 🚀 **Out of the Box**: Get started in minutes with minimal configuration -- 🎯 **TypeScript Support**: Full TypeScript support with complete type definitions -- 🌈 **Theme Customization**: Flexible theme system supporting multiple themes and custom styles -- 📦 **Tree Shaking**: Optimized for tree shaking, import only what you need -- 🔄 **Streaming Support**: Built-in support for streaming AI responses -- 💾 **Storage Strategy**: Flexible storage strategies (LocalStorage, IndexedDB, custom) +
-English | [简体中文](https://github.com/opentiny/tiny-robot/blob/HEAD/README.zh-CN.md) +--- -[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/opentiny/tiny-robot) +## ❓ Why TinyRobot? + +Building AI chat products from scratch means wrestling with **streaming rendering**, **multi-turn state management**, **tool call display**, **Markdown/code rendering**, and **input enhancements** — all before you even ship. + +**TinyRobot solves this.** It gives you production-ready AI interaction components for Vue 3, so you can go from idea to working AI app in hours, not weeks. + +```vue + + + + +``` + +## ✨ Features + +| | Feature | Description | +|---|---------|-------------| +| 🤖 | **Rich AI Components** | Bubble, Sender, Container, Conversations, Prompts, Attachments, Welcome, Suggestion, MCP, and more | +| 🔄 | **Streaming Support** | Built-in streaming AI response rendering with abort control | +| 🧠 | **Agent UI** | ThoughtChain, ToolCall display, MCP Server integration — for AI Agent apps | +| 🎨 | **OpenTiny Design** | Consistent UI/UX following the OpenTiny Design system | +| 🚀 | **Out of the Box** | Get started in minutes with minimal configuration | +| 🎯 | **TypeScript** | Full TypeScript support with complete type definitions | +| 🌈 | **Theme Customization** | Flexible theme system supporting multiple themes and custom styles | +| 📦 | **Tree Shaking** | Optimized for tree shaking — import only what you need | +| 💾 | **Storage Strategy** | Flexible storage strategies (LocalStorage, IndexedDB, custom) | +| 🔌 | **AI Provider** | Built-in OpenAI-compatible provider with composable `useMessage` / `useConversation` | + +## 📊 Comparison + +How does TinyRobot compare to other AI chat component libraries? + +| Feature | TinyRobot | Ant Design X | Element Plus X | TDesign Chat | +|---------|-----------|-------------|---------------|-------------| +| **Framework** | Vue 3 | React | Vue 3 | Vue 3 | +| **Streaming Render** | ✅ | ✅ | ✅ | ✅ | +| **Tool Call Display** | ✅ | ✅ | ❌ | ❌ | +| **MCP Protocol** | ✅ | ❌ | ❌ | ❌ | +| **Agent UI Components** | ✅ | ❌ | ❌ | ❌ | +| **AI Provider Composables** | ✅ | ✅ | ❌ | ❌ | +| **Conversation Management** | ✅ | ✅ | ✅ | ✅ | +| **Theme Customization** | ✅ | ✅ | ✅ | ✅ | +| **Tree Shaking** | ✅ | ✅ | ✅ | ✅ | +| **TypeScript** | ✅ | ✅ | ✅ | ✅ | +| **Skills / Agent Integration** | ✅ | ❌ | ❌ | ❌ | +| **License** | MIT | MIT | MIT | MIT | + +> 💡 **TinyRobot is the only Vue 3 AI component library with built-in MCP protocol support and Agent UI components.** + +## 🧩 Components + +TinyRobot provides a comprehensive set of AI interaction components: + +| Component | Description | +|-----------|-------------| +| `TrBubble` | Chat bubble with streaming text, Markdown, code block, and tool call rendering | +| `TrSender` | Message input with file attachment, voice input, and send actions | +| `TrContainer` | Chat layout container with drag-and-drop panel support | +| `TrConversations` | Multi-conversation management sidebar | +| `TrPrompts` | Preset prompt suggestions for quick input | +| `TrAttachments` | File attachment preview and management | +| `TrWelcome` | Welcome screen with suggestions for new conversations | +| `TrSuggestionPills` | Quick suggestion pills for common actions | +| `TrSuggestionPopover` | Popover-style suggestions | +| `TrMcpServerPicker` | MCP server selection and configuration | +| `TrMcpAddForm` | MCP server add/edit form | +| `TrThemeProvider` | Theme configuration provider | +| `TrHistory` | Conversation history display | +| `TrFeedback` | Message feedback (thumbs up/down) | +| `TrActionGroup` | Action button group for messages | ## 📦 Packages TinyRobot is a monorepo containing the following packages: -| Package | Description | Version | -| --------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | -| `@opentiny/tiny-robot` | Core component library with all AI interaction components | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot) | -| `@opentiny/tiny-robot-kit` | Utility functions and AI client tools for model interactions | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-kit.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-kit) | -| `@opentiny/tiny-robot-svgs` | SVG icon library with all component icons | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-svgs.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-svgs) | +| Package | Description | Version | +|---------|-------------|---------| +| [`@opentiny/tiny-robot`](https://www.npmjs.com/package/@opentiny/tiny-robot) | Core component library with all AI interaction components | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot) | +| [`@opentiny/tiny-robot-kit`](https://www.npmjs.com/package/@opentiny/tiny-robot-kit) | AI client tools, Vue composables (`useMessage`, `useConversation`), and storage strategies | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-kit.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-kit) | +| [`@opentiny/tiny-robot-svgs`](https://www.npmjs.com/package/@opentiny/tiny-robot-svgs) | SVG icon library for all components | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-svgs.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-svgs) | ## 🚀 Quick Start @@ -42,151 +106,158 @@ TinyRobot is a monorepo containing the following packages: - Node.js >= 20.13.0 - Vue >= 3.2.0 -- Package manager: npm, yarn, or pnpm - -### Installation +- Package manager: pnpm (recommended), npm, or yarn -**Core package** — `@opentiny/tiny-robot` is the main package. +### 1. Install ```bash -# Using pnpm (recommended) +# Core package (required) pnpm add @opentiny/tiny-robot -# Using npm -npm install @opentiny/tiny-robot - -# Using yarn -yarn add @opentiny/tiny-robot +# Kit package (optional — for AI model requests and composables) +pnpm add @opentiny/tiny-robot-kit ``` -**Optional packages**: - -- `@opentiny/tiny-robot-kit` — Only needed if you use AI model request or data-processing features. Add it when required: - - ```bash - pnpm add @opentiny/tiny-robot-kit - ``` +### 2. Import Styles -- `@opentiny/tiny-robot-svgs` — Optional. Install separately only if you need to use the SVG icon library standalone or with custom icons: - - ```bash - pnpm add @opentiny/tiny-robot-svgs - ``` - -### Basic Usage - -#### 1. Import Styles - -In your `main.js` or `main.ts`: +In your `main.ts`: ```ts -import { createApp } from 'vue' -import App from './App.vue' import '@opentiny/tiny-robot/dist/style.css' - -const app = createApp(App) -app.mount('#app') ``` -#### 2. Use Components +### 3. Use Components ```vue ``` +### 4. Use AI Composables (with Kit) + +```vue + + + +``` + ## 📚 Documentation -- 📖 [Full Documentation](https://docs.opentiny.design/tiny-robot/) - Complete API reference and guides -- 🎯 [Quick Start Guide](https://docs.opentiny.design/tiny-robot/guide/quick-start) - Get started in minutes -- 🎨 [Theme Configuration](https://docs.opentiny.design/tiny-robot/guide/theme-config) - Customize themes -- 📝 [Update Log](https://docs.opentiny.design/tiny-robot/guide/update-log) - Version history -- 💡 [Examples](https://docs.opentiny.design/tiny-robot/examples/assistant) - Complete application examples +| Resource | Link | +|----------|------| +| 📖 Full Documentation | [docs.opentiny.design/tiny-robot](https://docs.opentiny.design/tiny-robot/) | +| 🎯 Quick Start Guide | [Get started in minutes](https://docs.opentiny.design/tiny-robot/guide/quick-start) | +| 🎨 Theme Configuration | [Customize themes](https://docs.opentiny.design/tiny-robot/guide/theme-config) | +| 📝 Update Log | [Version history](https://docs.opentiny.design/tiny-robot/guide/update-log) | +| 💡 Examples | [Complete app examples](https://docs.opentiny.design/tiny-robot/examples/assistant) | +| 🤖 TinyRobot Skills | [AI-assisted development](https://gitcode.csdn.net/69bb9b7f54b52172bc628048.html) | + +[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/opentiny/tiny-robot) ## 🏗️ Project Structure -```text +``` tiny-robot/ ├── packages/ │ ├── components/ # Core component library -│ │ ├── src/ -│ │ │ ├── bubble/ # Chat bubble components -│ │ │ ├── sender/ # Message input component -│ │ │ ├── container/ # Container component -│ │ │ ├── history/ # Conversation history -│ │ │ ├── attachments/ # File attachments -│ │ │ └── ... # Other components -│ │ └── package.json -│ ├── kit/ # Utility functions and AI tools -│ │ ├── src/ -│ │ │ ├── providers/ # AI provider implementations -│ │ │ ├── vue/ # Vue composables -│ │ │ │ ├── message/ # useMessage composable -│ │ │ │ └── conversation/ # useConversation composable -│ │ │ └── storage/ # Storage utilities -│ │ └── package.json +│ │ └── src/ +│ │ ├── bubble/ # Chat bubble components +│ │ ├── sender/ # Message input component +│ │ ├── container/ # Container component +│ │ ├── conversations/ # Multi-conversation management +│ │ ├── prompts/ # Preset prompts +│ │ ├── attachments/ # File attachments +│ │ ├── welcome/ # Welcome screen +│ │ ├── mcp-*/ # MCP server components +│ │ └── ... # Other components +│ ├── kit/ # AI tools and Vue composables +│ │ └── src/ +│ │ ├── providers/ # AI provider (OpenAI-compatible) +│ │ ├── vue/ # useMessage, useConversation +│ │ └── storage/ # LocalStorage, IndexedDB, custom │ ├── svgs/ # SVG icon library -│ ├── playground/ # Development playground +│ ├── playground/ # Interactive playground │ └── test/ # Test suite -├── docs/ # Documentation site -│ ├── src/ # Documentation source -│ └── demos/ # Component demos -├── scripts/ # Build and utility scripts -└── package.json +├── docs/ # Documentation site (VitePress) +└── scripts/ # Build and utility scripts ``` ## 🛠️ Development -### Setup - ```bash # Install dependencies pnpm install # Start development server (playground + docs) pnpm dev + +# Run tests +pnpm test + +# Build all packages +pnpm build ``` -### Development Workflow +## 🤝 Contributing -1. **Start Development Server**: - - Run `pnpm dev` in the project root directory - - This starts both the playground and documentation site - - After modifying components in `packages/components/src/`, changes will be automatically reflected in the documentation page +We love contributions! Whether it's a bug fix, new component, or documentation improvement: -2. **Documentation**: - - Documentation source: `docs/src/` - - Component demos: `docs/demos/` +1. Read the [Contributing Guide](https://github.com/opentiny/tiny-robot/blob/HEAD/CONTRIBUTING.md) +2. Pick a [Good First Issue](https://github.com/opentiny/tiny-robot/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) +3. Fork → Branch → PR -3. **Testing**: - - Run `pnpm test` to execute tests +[![Contributors](https://img.shields.io/github/contributors/opentiny/tiny-robot)](https://github.com/opentiny/tiny-robot/graphs/contributors) -## 📄 License +## 🌟 Ecosystem -MIT License - see [LICENSE](https://github.com/opentiny/tiny-robot/blob/HEAD/LICENSE) file for details. +TinyRobot is part of the [OpenTiny](https://github.com/opentiny) ecosystem: -## 🤝 Contributing +- [TinyVue](https://github.com/opentiny/vue) — Enterprise-grade Vue 3 component library +- [TinyEngine](https://github.com/opentiny/tiny-engine) — Low-code engine for building apps +- [TinyRobot](https://github.com/opentiny/tiny-robot) — AI chat component library *(you are here)* +- [OpenTiny NEXT](https://opentiny.design) — Next-gen AI-powered development platform -Contributions are welcome! Please read our [Contributing Guide](https://github.com/opentiny/tiny-robot/blob/HEAD/CONTRIBUTING.md) to understand the recommended workflow, commit message conventions, and how to submit Issues and Pull Requests. +## 📄 License -## 📞 Support +[MIT](https://github.com/opentiny/tiny-robot/blob/HEAD/LICENSE) — free for personal and commercial use. -- 📖 [Documentation](https://docs.opentiny.design/tiny-robot/) -- 🐛 [Issue Tracker](https://github.com/opentiny/tiny-robot/issues) -- 💬 [Discussions](https://github.com/opentiny/tiny-robot/discussions) +--- -## 🙏 Acknowledgments +
-Built with ❤️ by the OpenTiny team. +**If TinyRobot helps you build better AI apps, please consider giving us a ⭐!** ---- +[![Star History Chart](https://api.star-history.com/svg?repos=opentiny/tiny-robot&type=Date)](https://star-history.com/#opentiny/tiny-robot&Date) -**Note**: This project is part of the [OpenTiny](https://github.com/opentiny) ecosystem. +
diff --git a/README.zh-CN.md b/README.zh-CN.md index b99ae591e..995555965 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,40 +1,104 @@ -# TinyRobot +
-

- - OpenTiny Logo - -

+# 🤖 TinyRobot +**Vue 3 AI 对话组件库 — 几分钟构建企业级 AI 对话应用，而非几周。** + +[![GitHub Stars](https://img.shields.io/github/stars/opentiny/tiny-robot?style=social)](https://github.com/opentiny/tiny-robot/stargazers) [![npm version](https://img.shields.io/npm/v/@opentiny/tiny-robot.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot) +[![npm downloads](https://img.shields.io/npm/dw/@opentiny/tiny-robot)](https://www.npmjs.com/package/@opentiny/tiny-robot) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![Vue 3](https://img.shields.io/badge/Vue-3.x-42b883.svg)](https://vuejs.org/) +[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178c6.svg)](https://www.typescriptlang.org/) -**TinyRobot** 是一个基于 Vue 3 构建的 AI 组件库，遵循 OpenTiny Design 设计体系。它提供了丰富的 AI 交互组件，帮助开发者快速构建企业级 AI 应用。 +[🚀 在线演示](https://docs.opentiny.design/tiny-robot/examples/assistant) · [📖 完整文档](https://docs.opentiny.design/tiny-robot/) · [💬 社区讨论](https://github.com/opentiny/tiny-robot/discussions) · [🐛 提交问题](https://github.com/opentiny/tiny-robot/issues) -## ✨ 特性 +[English](https://github.com/opentiny/tiny-robot/blob/HEAD/README.md) | 简体中文 -- 🤖 **丰富的 AI 组件**：包含聊天气泡、消息输入、会话管理等完整的 AI 交互组件 -- 🎨 **OpenTiny Design**：遵循 OpenTiny Design 设计体系，提供一致的 UI/UX -- 🚀 **开箱即用**：几分钟内即可开始使用，配置简单 -- 🎯 **TypeScript 支持**：完整的 TypeScript 支持，提供完整的类型定义 -- 🌈 **主题定制**：灵活的主题系统，支持多种主题和自定义样式 -- 📦 **Tree Shaking**：针对 Tree Shaking 优化，按需导入 -- 🔄 **流式支持**：内置流式 AI 响应支持 -- 💾 **存储策略**：灵活的存储策略（LocalStorage、IndexedDB、自定义） +
-[English](https://github.com/opentiny/tiny-robot/blob/HEAD/README.md) | 简体中文 +--- -[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/opentiny/tiny-robot) +## ❓ 为什么选择 TinyRobot？ + +从零构建 AI 对话产品，你需要处理**流式渲染**、**多轮会话状态管理**、**工具调用展示**、**Markdown/代码渲染**、**输入增强**……还没上线就已经耗费数周。 + +**TinyRobot 帮你解决这些问题。** 它为 Vue 3 提供了生产级 AI 交互组件，让你从想法到可运行的 AI 应用只需数小时。 + +```vue + + + + +``` + +## ✨ 特性 + +| | 特性 | 说明 | +|---|------|------| +| 🤖 | **丰富的 AI 组件** | Bubble、Sender、Container、Conversations、Prompts、Attachments、Welcome、Suggestion、MCP 等 | +| 🔄 | **流式支持** | 内置流式 AI 响应渲染，支持中断控制 | +| 🧠 | **Agent UI** | ThoughtChain、ToolCall 展示、MCP Server 集成 — 专为 AI Agent 应用设计 | +| 🎨 | **OpenTiny Design** | 遵循 OpenTiny Design 设计体系，一致的 UI/UX | +| 🚀 | **开箱即用** | 几分钟内即可开始使用，配置简单 | +| 🎯 | **TypeScript** | 完整的 TypeScript 支持，提供完整的类型定义 | +| 🌈 | **主题定制** | 灵活的主题系统，支持多种主题和自定义样式 | +| 📦 | **Tree Shaking** | 针对 Tree Shaking 优化，按需导入 | +| 💾 | **存储策略** | 灵活的存储策略（LocalStorage、IndexedDB、自定义） | +| 🔌 | **AI Provider** | 内置 OpenAI 兼容的 Provider，提供 `useMessage` / `useConversation` 组合式函数 | + +## 📊 竞品对比 + +TinyRobot 与其他 AI 对话组件库的对比： + +| 特性 | TinyRobot | Ant Design X | Element Plus X | TDesign Chat | +|------|-----------|-------------|---------------|-------------| +| **框架** | Vue 3 | React | Vue 3 | Vue 3 | +| **流式渲染** | ✅ | ✅ | ✅ | ✅ | +| **工具调用展示** | ✅ | ✅ | ❌ | ❌ | +| **MCP 协议** | ✅ | ❌ | ❌ | ❌ | +| **Agent UI 组件** | ✅ | ❌ | ❌ | ❌ | +| **AI Provider 组合式函数** | ✅ | ✅ | ❌ | ❌ | +| **会话管理** | ✅ | ✅ | ✅ | ✅ | +| **主题定制** | ✅ | ✅ | ✅ | ✅ | +| **Tree Shaking** | ✅ | ✅ | ✅ | ✅ | +| **TypeScript** | ✅ | ✅ | ✅ | ✅ | +| **Skills / Agent 集成** | ✅ | ❌ | ❌ | ❌ | +| **开源协议** | MIT | MIT | MIT | MIT | + +> 💡 **TinyRobot 是目前唯一内置 MCP 协议支持和 Agent UI 组件的 Vue 3 AI 组件库。** + +## 🧩 组件一览 + +TinyRobot 提供了一套完整的 AI 交互组件： + +| 组件 | 说明 | +|------|------| +| `TrBubble` | 对话气泡，支持流式文本、Markdown、代码块和工具调用渲染 | +| `TrSender` | 消息输入框，支持文件附件、语音输入和发送操作 | +| `TrContainer` | 对话布局容器，支持拖拽面板 | +| `TrConversations` | 多会话管理侧边栏 | +| `TrPrompts` | 预设提示词，快速输入 | +| `TrAttachments` | 文件附件预览和管理 | +| `TrWelcome` | 欢迎页，新会话的建议引导 | +| `TrSuggestionPills` | 快捷建议胶囊按钮 | +| `TrSuggestionPopover` | 弹出式建议 | +| `TrMcpServerPicker` | MCP 服务器选择和配置 | +| `TrMcpAddForm` | MCP 服务器添加/编辑表单 | +| `TrThemeProvider` | 主题配置提供者 | +| `TrHistory` | 会话历史展示 | +| `TrFeedback` | 消息反馈（点赞/点踩） | +| `TrActionGroup` | 消息操作按钮组 | ## 📦 包说明 TinyRobot 是一个 monorepo，包含以下包： -| 包 | 说明 | 版本 | -| --------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| `@opentiny/tiny-robot` | 核心组件库，包含所有 AI 交互组件 | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot) | -| `@opentiny/tiny-robot-kit` | 工具函数和 AI 客户端工具，用于模型交互 | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-kit.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-kit) | -| `@opentiny/tiny-robot-svgs` | SVG 图标库，包含所有组件所需的图标 | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-svgs.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-svgs) | +| 包 | 说明 | 版本 | +|---|------|------| +| [`@opentiny/tiny-robot`](https://www.npmjs.com/package/@opentiny/tiny-robot) | 核心组件库，包含所有 AI 交互组件 | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot) | +| [`@opentiny/tiny-robot-kit`](https://www.npmjs.com/package/@opentiny/tiny-robot-kit) | AI 客户端工具、Vue 组合式函数（`useMessage`、`useConversation`）和存储策略 | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-kit.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-kit) | +| [`@opentiny/tiny-robot-svgs`](https://www.npmjs.com/package/@opentiny/tiny-robot-svgs) | SVG 图标库，包含所有组件所需的图标 | [![npm](https://img.shields.io/npm/v/@opentiny/tiny-robot-svgs.svg)](https://www.npmjs.com/package/@opentiny/tiny-robot-svgs) | ## 🚀 快速开始 @@ -42,151 +106,158 @@ TinyRobot 是一个 monorepo，包含以下包： - Node.js >= 20.13.0 - Vue >= 3.2.0 -- 包管理器：npm、yarn 或 pnpm - -### 安装 +- 包管理器：pnpm（推荐）、npm 或 yarn -**核心包** — `@opentiny/tiny-robot` 是主包。 +### 1. 安装 ```bash -# 使用 pnpm（推荐） +# 核心包（必需） pnpm add @opentiny/tiny-robot -# 使用 npm -npm install @opentiny/tiny-robot - -# 使用 yarn -yarn add @opentiny/tiny-robot +# Kit 包（可选 — 用于 AI 模型请求和组合式函数） +pnpm add @opentiny/tiny-robot-kit ``` -**可选包**： - -- `@opentiny/tiny-robot-kit` — 仅在需要 AI 模型请求或数据处理功能时使用。需要时添加： - - ```bash - pnpm add @opentiny/tiny-robot-kit - ``` +### 2. 引入样式 -- `@opentiny/tiny-robot-svgs` — 可选。仅在需要单独使用 SVG 图标库或自定义图标时单独安装： - - ```bash - pnpm add @opentiny/tiny-robot-svgs - ``` - -### 基本用法 - -#### 1. 引入样式 - -在 `main.js` 或 `main.ts` 中： +在 `main.ts` 中： ```ts -import { createApp } from 'vue' -import App from './App.vue' import '@opentiny/tiny-robot/dist/style.css' - -const app = createApp(App) -app.mount('#app') ``` -#### 2. 使用组件 +### 3. 使用组件 ```vue ``` +### 4. 使用 AI 组合式函数（配合 Kit） + +```vue + + + +``` + ## 📚 文档 -- 📖 [完整文档](https://docs.opentiny.design/tiny-robot/) - 完整的 API 参考和指南 -- 🎯 [快速开始指南](https://docs.opentiny.design/tiny-robot/guide/quick-start) - 几分钟内快速上手 -- 🎨 [主题配置](https://docs.opentiny.design/tiny-robot/guide/theme-config) - 自定义主题 -- 📝 [更新日志](https://docs.opentiny.design/tiny-robot/guide/update-log) - 版本历史 -- 💡 [示例](https://docs.opentiny.design/tiny-robot/examples/assistant) - 完整的应用示例 +| 资源 | 链接 | +|------|------| +| 📖 完整文档 | [docs.opentiny.design/tiny-robot](https://docs.opentiny.design/tiny-robot/) | +| 🎯 快速开始指南 | [几分钟快速上手](https://docs.opentiny.design/tiny-robot/guide/quick-start) | +| 🎨 主题配置 | [自定义主题](https://docs.opentiny.design/tiny-robot/guide/theme-config) | +| 📝 更新日志 | [版本历史](https://docs.opentiny.design/tiny-robot/guide/update-log) | +| 💡 示例 | [完整应用示例](https://docs.opentiny.design/tiny-robot/examples/assistant) | +| 🤖 TinyRobot Skills | [AI 辅助开发](https://gitcode.csdn.net/69bb9b7f54b52172bc628048.html) | + +[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/opentiny/tiny-robot) ## 🏗️ 项目结构 -```text +``` tiny-robot/ ├── packages/ │ ├── components/ # 核心组件库 -│ │ ├── src/ -│ │ │ ├── bubble/ # 聊天气泡组件 -│ │ │ ├── sender/ # 消息输入组件 -│ │ │ ├── container/ # 容器组件 -│ │ │ ├── history/ # 会话历史 -│ │ │ ├── attachments/ # 文件附件 -│ │ │ └── ... # 其他组件 -│ │ └── package.json -│ ├── kit/ # 工具函数和 AI 工具 -│ │ ├── src/ -│ │ │ ├── providers/ # AI 提供商实现 -│ │ │ ├── vue/ # Vue 组合式函数 -│ │ │ │ ├── message/ # useMessage 组合式函数 -│ │ │ │ └── conversation/ # useConversation 组合式函数 -│ │ │ └── storage/ # 存储工具 -│ │ └── package.json +│ │ └── src/ +│ │ ├── bubble/ # 对话气泡组件 +│ │ ├── sender/ # 消息输入组件 +│ │ ├── container/ # 容器组件 +│ │ ├── conversations/ # 多会话管理 +│ │ ├── prompts/ # 预设提示词 +│ │ ├── attachments/ # 文件附件 +│ │ ├── welcome/ # 欢迎页 +│ │ ├── mcp-*/ # MCP 服务器组件 +│ │ └── ... # 其他组件 +│ ├── kit/ # AI 工具和 Vue 组合式函数 +│ │ └── src/ +│ │ ├── providers/ # AI Provider（OpenAI 兼容） +│ │ ├── vue/ # useMessage、useConversation +│ │ └── storage/ # LocalStorage、IndexedDB、自定义 │ ├── svgs/ # SVG 图标库 -│ ├── playground/ # 开发演练场 +│ ├── playground/ # 交互式演练场 │ └── test/ # 测试套件 -├── docs/ # 文档站点 -│ ├── src/ # 文档源码 -│ └── demos/ # 组件示例 -├── scripts/ # 构建和工具脚本 -└── package.json +├── docs/ # 文档站点（VitePress） +└── scripts/ # 构建和工具脚本 ``` ## 🛠️ 开发 -### 环境设置 - ```bash # 安装依赖 pnpm install # 启动开发服务器（演练场 + 文档） pnpm dev + +# 运行测试 +pnpm test + +# 构建所有包 +pnpm build ``` -### 开发流程 +## 🤝 贡献 -1. **启动开发服务器**： - - 在项目根目录运行 `pnpm dev` - - 这将同时启动演练场和文档站点 - - 修改 `packages/components/src/` 中的组件后，更改会自动反映在文档页面中 +我们欢迎各种形式的贡献！无论是修复 Bug、新增组件还是改进文档： -2. **文档**： - - 文档源码：`docs/src/` - - 组件示例：`docs/demos/` +1. 阅读[贡献指南](https://github.com/opentiny/tiny-robot/blob/HEAD/CONTRIBUTING_zh.md) +2. 选择一个 [Good First Issue](https://github.com/opentiny/tiny-robot/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) +3. Fork → Branch → PR -3. **测试**： - - 运行 `pnpm test` 执行测试 +[![Contributors](https://img.shields.io/github/contributors/opentiny/tiny-robot)](https://github.com/opentiny/tiny-robot/graphs/contributors) -## 📄 许可证 +## 🌟 生态 -MIT 许可证 - 查看 [LICENSE](https://github.com/opentiny/tiny-robot/blob/HEAD/LICENSE) 文件了解详情。 +TinyRobot 是 [OpenTiny](https://github.com/opentiny) 生态的一部分： -## 🤝 贡献 +- [TinyVue](https://github.com/opentiny/vue) — 企业级 Vue 3 组件库 +- [TinyEngine](https://github.com/opentiny/tiny-engine) — 低代码引擎，快速构建应用 +- [TinyRobot](https://github.com/opentiny/tiny-robot) — AI 对话组件库 *（你在这里）* +- [OpenTiny NEXT](https://opentiny.design) — 下一代 AI 驱动开发平台 -欢迎贡献！请阅读[贡献指南](https://github.com/opentiny/tiny-robot/blob/HEAD/CONTRIBUTING_zh.md)了解推荐的工作流程、Commit 规范以及如何提交 Issue 和 Pull Request。 +## 📄 许可证 -## 📞 支持 +[MIT](https://github.com/opentiny/tiny-robot/blob/HEAD/LICENSE) — 个人和商业使用均免费。 -- 📖 [文档](https://docs.opentiny.design/tiny-robot/) -- 🐛 [问题追踪](https://github.com/opentiny/tiny-robot/issues) -- 💬 [讨论](https://github.com/opentiny/tiny-robot/discussions) +--- -## 🙏 致谢 +
-由 OpenTiny 团队用 ❤️ 构建。 +**如果 TinyRobot 帮助你构建了更好的 AI 应用，请给我们一个 ⭐！** ---- +[![Star History Chart](https://api.star-history.com/svg?repos=opentiny/tiny-robot&type=Date)](https://star-history.com/#opentiny/tiny-robot&Date) -**注意**：本项目是 [OpenTiny](https://github.com/opentiny) 生态系统的一部分。 +