Anyone who has built an AI chat UI knows that even a basic usable dialogue interface requires at least two weeks of development work. This includes message bubble styling, real-time streaming rendering, and full message state management. TinyRobot is here to eliminate repetitive boilerplate work for you.
1. Focus Exclusively on AI Chat Scenarios, Not Generic UI
Many developers may wonder: Is this another UI library competing with TinyVue? The answer is absolutely no — they are complementary tools.
- TinyVue covers general page UI: back-end dashboards, forms, modals, and standard enterprise components.
- TinyRobot is built solely for AI chat interaction scenarios.
With TinyRobot, you only need to focus on your core business logic: what data the AI returns and what workflows you need to implement. All UI rendering logic, interactive behaviors, and message state maintenance are fully handled by the library.
Current version: v0.4.1, released under MIT License, with 22 iterative releases.
Code composition: 58.1% TypeScript + 35.4% Vue, delivering robust full type safety.
2. Architecture Breakdown: Monorepo Three-Package Division
TinyRobot adopts a pnpm workspace monorepo structure, split into three independent packages with clear responsibilities:
| Package Name | Core Function | Installation Requirement |
|---|---|---|
@opentiny/tiny-robot |
Core UI components (bubble, sender, container, etc.) | Mandatory |
@opentiny/tiny-robot-kit |
AI data layer utilities (Provider integration, composables, storage, plugins) | Optional; install only if connecting LLMs |
@opentiny/tiny-robot-svgs |
Built-in SVG icon library | Optional; install only if using official icons |
The design philosophy behind this three-layer separation is Separation of Concerns:
- Component Layer: Only responsible for rendering and user interactions, independent of LLM requests or data persistence logic.
- Tool Layer: Handles heavy logic including model provider access, message state machines, plugins, conversation lifecycle, and storage strategies.
- Resource Layer: Icons are packaged separately without tight coupling to core UI components.
You only need the core package for basic chat UI capabilities; add the kit package on demand for AI integration. Minimal dependencies, maximum flexibility.
3. The Soul of the Kit Package: Composable Architecture
Building chat pages is often plagued by messy state management — either cumbersome prop drilling or bloated global state stores. TinyRobot solves this elegantly with two Vue composable hooks, usable anywhere within component trees to access full conversation capabilities.
Directory structure of composables:
packages/kit/src/vue/
├── message/ # useMessage composable
└── conversation/ # useConversation composable
useMessage — Message Management Hook
- Create, update, delete, and stream-append chat messages with simple APIs
- Message states wrapped in Vue reactive objects, auto-reactive with components (no manual state sync)
- Built-in role classification (user / ai / system), eliminating repetitive
if (role === 'ai')conditional logic
useConversation — Conversation Session Hook
- Manage full conversation context: chat rounds, history records, and session switching
- Natively integrated with storage strategies for automatic chat persistence
- Full lifecycle control: session creation, loading, switching, and destruction
In short: Call useXxx() inside any Vue component to access complete chat management logic — no prop passing, no heavy global stores, clean and lightweight.
4. ResponseProvider Pattern: Plug-and-Play AI Data Sources
Many teams face painful refactoring work when switching LLM vendors: migrating from OpenAI to DeepSeek, private local models, or internal enterprise AI gateways often requires rewriting massive front-end chat logic.
TinyRobot Kit decouples traditional fixed AI client implementations via the ResponseProvider pattern. The component and message engine remain agnostic to your underlying LLM service; they only require data formatted to match the OpenAI Chat Completions standard.
- Swap LLM services freely: OpenAI, DeepSeek, local private models, internal enterprise gateways are all supported
- Flexible access modes: Frontend direct requests, backend proxy forwarding, unified model gateways — no changes required to UI components
- Stable response structure: Standardized formats for plain text, streaming chunks, and tool call payloads
All vendor-specific differences are isolated to the data access layer, leaving the UI layer relying on a unified stable schema. This makes integration with existing backends, permission systems, and model routing logic far simpler.
5. Built-In Persistence Strategies: 3 Storage Options + Custom Extensions
No need to implement local storage logic from scratch. The framework ships with three mature built-in storage adapters, plus support for fully custom implementations.
Storage module directory:
packages/kit/src/storage/
| Storage Strategy | Best For | Key Features |
|---|---|---|
| LocalStorage | Lightweight short-term chat history | Synchronous read/write, simple implementation, limited capacity |
| IndexedDB | Large volumes of long-term conversation records | Asynchronous operation, large storage capacity, structured query support |
| Custom Adapter | Enterprise backend database integration | Fully self-defined logic, ideal for production business systems |
Simply implement the unified StorageAdapter interface to connect any database (MongoDB, MySQL, Redis, etc.) with consistent APIs.
6. Deep Dive into Core Components
Full Project Structure
tiny-robot/
├── packages/
│ ├── components/ # Core UI component library
│ │ ├── src/
│ │ │ ├── bubble/ # Chat message bubbles
│ │ │ ├── sender/ # Message input box
│ │ │ ├── container/ # Chat layout container
│ │ │ ├── history/ # Conversation history sidebar
│ │ │ ├── attachments/ # File upload attachments
│ │ │ └── ... # Other auxiliary components
│ ├── kit/ # AI data tool package
│ ├── svgs/ # SVG icon library
│ ├── playground/ # Local development playground
│ └── test/ # Test suites
├── docs/ # Official documentation site
├── scripts/ # Build scripts
└── package.json
Bubble & BubbleList (Message Bubble + Message List)
The Bubble component is the fundamental visual unit for single chat messages:
-
roleprop: Auto-styled differentiation for ai / user / system identities -
placementprop: Left (start) / Right (end) alignment fully configurable - Native streaming rendering: Incrementally render token-by-token AI output without waiting for full responses
- Built-in Markdown parser: Auto-format code blocks, lists, hyperlinks with zero extra code
BubbleList renders full multi-turn chat streams:
- Accept a complete
messagesarray for batch rendering of all chat records -
roleConfigs: Global unified configuration for avatar, position, and visibility rules for all roles (no repeated props per message) - Customizable grouping strategies: Merge consecutive same-role messages or split by user messages; fully custom grouping functions supported
- Intelligent
autoScroll: Only auto-follow streaming content when users are scrolled to the bottom, avoiding disruption while browsing history
Sender (Message Input Box)
The user message entry component:
- Multi-line text input, configurable send shortcuts (Enter / Ctrl+Enter)
- Native file upload integration linked with the attachments component
- Built-in send status management: loading / success / error states out of the box
- Prefix & suffix slots for custom widgets (emoji pickers, voice buttons, etc.)
History (Conversation History Sidebar)
Navigation component for multi-session chat applications:
- Supports flat list and grouped list data structures for history records
- Native UI for selection, renaming, deletion, pinning, and context menu operations
- Customizable slots for item icons, tags, and custom title content
- Seamless integration with
useConversationto build complete "history list + active chat page" workflows quickly
7. Full Theme System: One-Click Dark Mode & Brand Customization
- Tokenized CSS variable design: All colors, spacing, font sizes, and border radians controlled via CSS variables — no source code edits required for rebranding
- One-click dark mode toggle with complete built-in dark theme styles
- Zero-intrusion brand customization: Override CSS variables only to match corporate design guidelines
8. Native Tree-Shaking Support, Controllable Bundle Size
// Import only the components you need
import { TrBubble } from '@opentiny/tiny-robot'
- Every component exports independently; unused components are fully tree-shaken by modern bundlers
- Kit and SVG packages are optional peer dependencies — they won’t increase bundle size if unused
- No bloated "full library" overhead; keep production builds lightweight
9. Position in the OpenTiny Ecosystem
| Ecosystem Partner | Relationship |
|---|---|
| TinyVue | Shared OpenTiny Design system; TinyVue for general UI, TinyRobot exclusive to AI chat scenarios |
| GenUI SDK | GenUI’s Vue renderer reuses TinyRobot’s base chat UI components |
| NEXT SDK |
@opentiny/next-remoter builds AI chat interfaces directly on top of TinyRobot |
| TinyEngine | TinyEngine low-code platform integrates TinyRobot for built-in LLM dialogue modules |
TinyRobot serves as the foundational UI layer of OpenTiny’s AI ecosystem, supplying standardized chat interaction components for all upper-layer intelligent applications.
10. Summary: Is TinyRobot Worth Adopting?
Advantages 👍
- Precise vertical positioning: Specialized for AI chat instead of generic UI, no feature overlap with TinyVue
- Clean Composable architecture: Decouples chat business logic from UI rendering
- Plug-and-play ResponseProvider: Swap LLM vendors without rewriting front-end chat code
- Modular three-package design: Install only what you need, avoid full-library bloat
- Native streaming rendering built-in — a mandatory feature for AI chat that otherwise requires custom implementation
Areas for Improvement 🤔
- Additional best practice documentation needed: SSE parsing, error recovery, model gateway integration, auth & tool call workflow examples
- Early-stage community ecosystem with limited real-world production case studies
- Component coverage to expand: Native rendering for reasoning chains, complex tool call outputs, and AI-specific interactive widgets
Ideal Use Cases 🎯
- Enterprise AI assistants & intelligent customer service dialogue interfaces
- AI code assistant chat panels
- Low-code platform embedded AI dialogue modules
- Any Vue3 application requiring AI conversation interaction
Project Resources
| Resource Type | Link |
|---|---|
| GitHub Source Code | https://github.com/opentiny/tiny-robot |
| Official Documentation | https://docs.opentiny.design/tiny-robot |
| Quick Start Guide | https://docs.opentiny.design/tiny-robot/quick-start |
| Theme Configuration Docs | https://docs.opentiny.design/tiny-robot/theme |
| Official Website | https://opentiny.design/tiny-robot |
| NPM Core Package | https://www.npmjs.com/package/@opentiny/tiny-robot |
If this article is helpful, give it a like and star the repository! Feel free to leave comments with questions or feedback.
Top comments (0)