-
Notifications
You must be signed in to change notification settings - Fork 11
docs: revamp README for better first impression and discoverability #359
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
kagol
wants to merge
1
commit into
develop
Choose a base branch
from
kagol/revamp-readme
base: develop
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,192 +1,263 @@ | ||
| # TinyRobot | ||
| <div align="center"> | ||
|
|
||
| <p align="center"> | ||
| <a href="https://opentiny.design" target="_blank" rel="noopener noreferrer"> | ||
| <img alt="OpenTiny Logo" src="https://raw.githubusercontent.com/opentiny/tiny-robot/HEAD/logo.svg" height="100" style="max-width:100%;"> | ||
| </a> | ||
| </p> | ||
| # 🤖 TinyRobot | ||
|
|
||
| **The Vue 3 AI Chat Component Library — Build enterprise-grade AI conversations in minutes, not weeks.** | ||
|
|
||
| [](https://github.com/opentiny/tiny-robot/stargazers) | ||
| [](https://www.npmjs.com/package/@opentiny/tiny-robot) | ||
| [](https://www.npmjs.com/package/@opentiny/tiny-robot) | ||
| [](https://opensource.org/licenses/MIT) | ||
| [](https://vuejs.org/) | ||
| [](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) | ||
| </div> | ||
|
|
||
| English | [简体中文](https://github.com/opentiny/tiny-robot/blob/HEAD/README.zh-CN.md) | ||
| --- | ||
|
|
||
| [](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 | ||
| <!-- That's it. A working AI chat in 3 lines. --> | ||
| <tr-bubble role="ai" content="Hello! How can I help you?" placement="start" /> | ||
| <tr-bubble role="user" content="Tell me about TinyRobot" placement="end" /> | ||
| <tr-sender placeholder="Type your message..." /> | ||
| ``` | ||
|
|
||
| ## ✨ 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 | [](https://www.npmjs.com/package/@opentiny/tiny-robot) | | ||
| | `@opentiny/tiny-robot-kit` | Utility functions and AI client tools for model interactions | [](https://www.npmjs.com/package/@opentiny/tiny-robot-kit) | | ||
| | `@opentiny/tiny-robot-svgs` | SVG icon library with all component icons | [](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 | [](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 | [](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 | [](https://www.npmjs.com/package/@opentiny/tiny-robot-svgs) | | ||
|
|
||
| ## 🚀 Quick Start | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| - 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 | ||
| <template> | ||
| <div class="chat-container"> | ||
| <tr-bubble role="ai" content="Hello! I'm TinyRobot, an AI component library for Vue 3." placement="start" /> | ||
| <tr-bubble role="user" content="That's great! How can I get started?" placement="end" /> | ||
| </div> | ||
| <tr-container> | ||
| <tr-bubble role="ai" content="Hello! I'm TinyRobot." placement="start" /> | ||
| <tr-bubble role="user" content="How can I get started?" placement="end" /> | ||
| <tr-sender placeholder="Type your message..." /> | ||
| </tr-container> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { TrBubble } from '@opentiny/tiny-robot' | ||
| import { | ||
| TrContainer, | ||
| TrBubble, | ||
| TrSender | ||
| } from '@opentiny/tiny-robot' | ||
| </script> | ||
| ``` | ||
|
|
||
| ### 4. Use AI Composables (with Kit) | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| import { useMessage } from '@opentiny/tiny-robot-kit' | ||
|
|
||
| const { messages, sendMessage, isLoading } = useMessage({ | ||
| provider: 'openai', | ||
| model: 'gpt-4o-mini' | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <tr-container> | ||
| <tr-bubble | ||
| v-for="msg in messages" | ||
| :key="msg.id" | ||
| :role="msg.role" | ||
| :content="msg.content" | ||
| :placement="msg.role === 'user' ? 'end' : 'start'" | ||
| /> | ||
| <tr-sender @send="sendMessage" :loading="isLoading" /> | ||
| </tr-container> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## 📚 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) | | ||
|
|
||
| [](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 | ||
| [](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 | ||
| <div align="center"> | ||
|
|
||
| Built with ❤️ by the OpenTiny team. | ||
| **If TinyRobot helps you build better AI apps, please consider giving us a ⭐!** | ||
|
|
||
| --- | ||
| [](https://star-history.com/#opentiny/tiny-robot&Date) | ||
|
|
||
| **Note**: This project is part of the [OpenTiny](https://github.com/opentiny) ecosystem. | ||
| </div> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a language tag to the project-structure code fence.
At Line 190, the fenced block is missing a language identifier (
MD040). Please label it to keep markdown lint clean.✅ Suggested fix
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 190-190: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents