TinyRobot

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.

✨ Features

• 🤖 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 | 简体中文

📦 Packages

TinyRobot is a monorepo containing the following packages:

Package	Description	Version
@opentiny/tiny-robot	Core component library with all AI interaction components
@opentiny/tiny-robot-kit	Utility functions and AI client tools for model interactions
@opentiny/tiny-robot-svgs	SVG icon library with all component icons

🚀 Quick Start

Prerequisites

• Node.js >= 20.13.0
• Vue >= 3.2.0
• Package manager: npm, yarn, or pnpm

Installation

Core package — @opentiny/tiny-robot is the main package.

# Using pnpm (recommended)
pnpm add @opentiny/tiny-robot
# Using npm
npm install @opentiny/tiny-robot
# Using yarn
yarn add @opentiny/tiny-robot

Optional packages:

• @opentiny/tiny-robot-kit — Only needed if you use AI model request or data-processing features. Add it when required:

  pnpm add @opentiny/tiny-robot-kit

• @opentiny/tiny-robot-svgs — Optional. Install separately only if you need to use the SVG icon library standalone or with custom icons:

  pnpm add @opentiny/tiny-robot-svgs

Basic Usage

1. Import Styles

In your main.js or main.ts:

import{createApp}from'vue'importAppfrom'./App.vue'import'@opentiny/tiny-robot/dist/style.css'constapp=createApp(App)app.mount('#app')

2. Use Components

<template>
<divclass="chat-container">
<tr-bubblerole="ai"content="Hello! I'm TinyRobot, an AI component library for Vue 3."placement="start" />
<tr-bubblerole="user"content="That's great! How can I get started?"placement="end" />
</div>
</template>
<script setup>import { TrBubble } from'@opentiny/tiny-robot'</script>

📚 Documentation

• 📖 Full Documentation - Complete API reference and guides
• 🎯 Quick Start Guide - Get started in minutes
• 🎨 Theme Configuration - Customize themes
• 📝 Update Log - Version history
• 💡 Examples - Complete application examples

🏗️ Project Structure

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
│ ├── svgs/ # SVG icon library
│ ├── playground/ # Development playground
│ └── test/ # Test suite
├── docs/ # Documentation site
│ ├── src/ # Documentation source
│ └── demos/ # Component demos
├── scripts/ # Build and utility scripts
└── package.json

🛠️ Development

Setup

# Install dependencies
pnpm install
# Start development server (playground + docs)
pnpm dev

Development Workflow

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

2. Documentation:

   • Documentation source: docs/src/
   • Component demos: docs/demos/

3. Testing:

   • Run pnpm test to execute tests

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide to understand the recommended workflow, commit message conventions, and how to submit Issues and Pull Requests.

📞 Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

🙏 Acknowledgments

Built with ❤️ by the OpenTiny team.

---

Note: This project is part of the OpenTiny ecosystem.