TinyRobot

TinyRobot

What is TinyRobot about?

TinyRobot offers a rich set of ready‑to‑use Vue 3 components such as chat bubbles, message input, conversation containers, and attachment handlers. It follows the OpenTiny design system, enabling developers to quickly assemble interactive AI assistants and integrate them with any AI model backend.

How to use TinyRobot?

1. Install the core package (and optional kits) via npm, yarn, or pnpm. Example using npx for a quick install:

   npx -y pnpm add @opentiny/tiny-robot
   

   Optional packages:
   • @opentiny/tiny-robot-kit for AI model request utilities.
   • @opentiny/tiny-robot-svgs for standalone SVG icons.
2. Import styles in your entry file:

   import '@opentiny/tiny-robot/dist/style.css';
   

3. Use components in Vue templates:

   <template>
     <tr-bubble role="ai" content="Hello!" placement="start" />
     <tr-bubble role="user" content="How do I start?" placement="end" />
   </template>
   
   <script setup>
   import { TrBubble } from '@opentiny/tiny-robot';
   </script>
   

4. For AI model interactions, add the kit package and use the provided composables like useMessage or useConversation.

Key Features of TinyRobot

• Rich AI Components: Bubbles, input fields, history, attachments, and more.
• OpenTiny Design System: Consistent UI/UX across all components.
• TypeScript Support: Full typings out of the box.
• Theme Customization: Multiple themes and custom style overrides.
• Tree Shaking Friendly: Import only needed components.
• Streaming Responses: Real‑time display of AI replies.
• Flexible Storage: LocalStorage, IndexedDB, or custom storage strategies.
• Monorepo Packages: Core library, utility kit, and SVG icon set.

Use Cases of TinyRobot

• Building corporate AI assistants for customer support.
• Creating interactive demo pages that showcase AI model capabilities.
• Integrating chat interfaces into SaaS dashboards.
• Rapid prototyping of AI‑driven features with minimal UI work.
• Developing educational tools that require AI‑guided conversations.

FAQ

Q: Which Vue version is required? A: Vue 3.2 or higher.

Q: Do I need the kit package to display chat components? A: No, the core package handles UI. The kit is only needed for model request utilities.

Q: Can I customize the component theme? A: Yes, TinyRobot provides a theme configuration API and supports custom CSS variables.

Q: How does streaming work? A: The components expose a streaming slot that updates as partial responses arrive from the backend.

Q: Is the library tree‑shakable? A: Yes, you can import individual components to keep bundle size minimal.

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.