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'
import App from './App.vue'
import '@opentiny/tiny-robot/dist/style.css'

const app = createApp(App)
app.mount('#app')

2. Use Components

<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>
</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.