TinyRobot v0.5.0 Released: Brand-New Capabilities Including Agent Skills, Navigation & Custom Layouts Launched Simultaneously

Preface

TinyRobot is a front-end interaction framework exclusively built for AI applications. It empowers teams to rapidly build enterprise AI assistants, intelligent customer service platforms and multi-turn dialogue systems. Built on the OpenTiny design system, Tiny delivers full capabilities covering dialogue UI, streaming rendering and session management. Developers can build consistent, extensible AI products without developing complex interaction logic from scratch — functional AI applications can be finished within hours from initial prototypes.

We are proud to announce the official release of TinyRobot v0.5.0. This release is far more than just a handful of new components; it drastically simplifies the entire workflow of building AI chat applications.

• Open Source Repository: https://github.com/opentiny/tiny-robot (Star ⭐ appreciated!)
• Official Website: https://opentiny.design/tiny-robot

Feel free to test this version. If you have suggestions, ideas or issues during usage, submit feedback via GitHub Issues, PRs or discussion threads to help us refine TinyRobot together.

v0.5.0 Feature Overview

• [New Feature] Agent Skills support added
• [New Component] Anchor: content navigation component for lengthy answers & dialogues
• [New Component] Layout: layout component supporting standard & floating modes
• [New Tool] CLI scaffolding: spin up a TinyRobot project with one single command
• Miscellaneous interaction refinements & bug fixes

In-Depth Breakdown of TinyRobot v0.5.0 New Features

1. New Feature: Agent Skills Support

Agent Skills is a lightweight, open format designed to extend AI Agent capabilities via professional domain knowledge and standardized workflows. Each Skill is a directory containing a SKILL.md file, which records skill name, description and task specifications. The directory may also attach reference documents and template files.

Within TinyRobot Kit, Skills from different sources are normalized into unified SkillDefinition objects. Applications can activate appropriate Skills based on current scenarios, guiding LLMs to follow defined rules when answering questions or executing tasks. Teams can isolate business logic and task requirements as reusable Skills across multiple projects and chat scenarios.

When a Skill is enabled for a conversation, skillPlugin parses the target Skill and generates corresponding instruction prompts and runtime tools. The plugin does not hardcode how instructions are passed to LLMs; developers can inject instructions into system messages, user messages or dedicated request fields based on the LLM provider’s protocol. If a Skill includes reference files, the model can fetch file content on demand via built-in runtime tools.

Example: vue-best-practices Skill

After enabling this Skill on the frontend, users can ask Vue development questions, and the LLM will strictly follow standardized Vue specifications. When users need deeper details about reactivity, single-file components or component data flow, the model can retrieve attached reference materials from the Skill directory.

1.1 Load Skills From Multiple Sources

TinyRobot Kit supports loading Skills from browser local files, Node.js file systems and GitHub repositories. Developers can let users select local Skill folders on the page, load preconfigured Skill directories from the server, or directly use centrally maintained repository Skills.
All Skill sources will be normalized into identical definition structures after loading, so the chat workflow logic does not need to distinguish their original origins. This design fits both quick local testing and centralized team version control via code repositories.

1.2 Persist & Reuse Skills

TinyRobot provides multiple storage adapters for different runtime environments:

• Memory Storage: for temporary preview and testing
• IndexedDB Storage: persist user-imported Skills across browser sessions
• File System Storage: for Node.js services and projects with local directory structures

Applications can import and save Skills first, then load them by name for subsequent chat sessions. Skill persistence status is decoupled from UI toggle states — developers can implement custom interaction controls such as checkboxes or dropdowns to activate Skills freely.

1.3 Integrate Skills Into Chat Workflows

In chat scenarios, applications can either activate user-selected Skills directly, or pass candidate Skills to the LLM for automatic matching based on user queries. Once matching Skills are confirmed, skillPlugin generates standardized instructions. If the Skill contains attached documents, runtime tools like list_skill_files and read_skill_file will be exposed, and toolPlugin collects & executes all tool calls returned by the model.

Vue applications can integrate this capability through skillPlugin. Active Skill configurations update with UI state in real time. There is no need to recreate entire chat instances every time users switch Skills.

Skills are not merely a set of low-level APIs — they introduce a standardized organizational paradigm for chat applications. Task logic, reference materials and execution rules can be decoupled from page code and reused across multiple projects.

2. New Component: Anchor — Navigation For Long Content

The new Anchor anchor component generates table-of-contents navigation for lengthy articles, long dialogue threads and content-heavy pages, supporting quick jumps, scroll-based highlighting and directory search to help users locate target information instantly.

2.1 Generate Table of Contents

Integrating Anchor is straightforward: define directory items and map them to corresponding page content blocks, and the component will automatically organize all long content into a navigable sidebar directory.
This component works seamlessly for both article pages and chat interfaces with segmented content.

2.2 Jump & Scroll Highlight

Users can click directory items to scroll directly to matching content blocks. The active directory entry will automatically highlight as users scroll the page.
After jumping to a section, the target content will flash a temporary highlight for better visibility, delivering a smoother reading experience for long-form content.

2.3 Search & Collapse Controls

When directory lists grow lengthy, users can filter entries via built-in search functionality to quickly locate target sections.
The directory panel supports expand/collapse toggles and left/right docking modes. It can function as a lightweight persistent sidebar or a temporary auxiliary navigation panel, compatible with all mainstream page layouts.

Anchor encapsulates directory generation, fast jumping, scroll tracking and keyword search into a unified navigation solution, drastically improving readability for long content pages.

3. New Component: Layout — Standard & Floating Layout Modes

The Layout component provides standardized page structures, collapsible sidebars and floating workspace containers, ideal for chat interfaces, dashboards and complex editing pages. Complex pages with multi-region interaction (navigation, main content, auxiliary info, temporary panels) often suffer fragmented layout logic without unified layout management, which Layout solves thoroughly.

3.1 Build Standard Page Structures

Layout provides standardized area slots: left-aside, header, main, footer, right-aside. Developers can quickly assemble fully structured pages for admin backends, editors and chat platforms with stable, consistent layout logic.

3.2 Unified Sidebar Interactions

Layout supports two sidebar modes:

1. dock: permanent sidebar integrated into the page layout for persistent navigation & info panels
2. drawer: overlay floating sidebar for temporary functional panels

Sidebars support collapse states and resizable width via drag-and-drop. All common sidebar interaction patterns are encapsulated to unify page layout and state management.

3.3 Floating Workspace Extension

Layout can switch to floating mode to create draggable, resizable panels outside the normal document flow. Floating panels retain complete layout slot support (header, main, left/right sidebars) for independent task workspaces.

Layout unifies standard page structures, sidebar interactions and floating workspaces under a single component, turning disjoint page blocks into organized, coordinated workspaces for complex business scenarios.

4. New Tool: CLI Scaffolding — One Command To Generate TinyRobot Projects

TinyRobot CLI provides two streamlined workflows:

1. basic: spin up a complete standalone project from scratch
2. add chat: incrementally inject chat components into existing Vue projects

4.1 Create Full Project With create Command

Run the CLI to generate a complete template project:

# npm
npx @opentiny/tiny-robot-cli create
# pnpm
pnpm dlx @opentiny/tiny-robot-cli create

Follow terminal prompts to install dependencies and launch the development server.

LLM Key Configuration
The basic template comes pre-configured with DeepSeek and Alibaba DashScope integrations. Copy .env.example to .env and fill in your API keys:

# Alibaba DashScope API Key (required for partial MCP plugins)
VITE_ALIYUN_DASHSCOPE_KEY=
# DeepSeek API Key
VITE_DEEPSEEK_API_KEY=

3 built-in MCP plugins are included: 12306 Ticket Query (Alibaba DashScope), Amap Maps, generic MCP demo. DashScope plugins require the corresponding environment variable.
Visit http://localhost:5173 in your browser to preview the full AI chat application.

4.2 Inject Chat Components Into Existing Projects With add chat

Execute the command inside your Vue project root directory:

# npm
npx @opentiny/tiny-robot-cli add chat
# pnpm
pnpm dlx @opentiny/tiny-robot-cli add chat

Follow prompts to complete auto-injection. The generated

TinyRobotChat.vue component can be imported anywhere in your project, e.g. App.vue:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TinyRobotChat from './TinyRobotChat.vue'
</script>

<template>
  <HelloWorld />
  <TinyRobotChat />
</template>

Add your LLM API key to the .env file:

VITE_DEEPSEEK_API_KEY=

Reinstall dependencies and launch dev server:

pnpm install && pnpm dev

Open http://localhost:5173 to view the embedded AI chat module within your existing project.

5. Miscellaneous Optimizations & Bug Fixes

New Capability Additions

• Bubble: unified bubble-event event channel + state-change state sync; support injecting box/content attributes at Provider level
• Sender: grapheme-based character counting for accurate Emoji & composite character length calculation
• Sender: hasExternalContent prop to factor attachments into send state logic
• useMessage: refactored core message engine into adapter architecture, reusable for both Vue and vanilla JS
• toolPlugin: aggregate runtime tool providers + tool source tracking for dynamic tool injection based on message context

Optimizations

• Reasoning: reasoning bubble expanded by default to reduce user clicks
• McpServerPicker: unified style variables for consistent visual design
• Attachments / Dropdown / Suggestion: complete dark mode variable coverage, optimized hover & interactive styles
• Feedback / Welcome: improved dark theme rendering
• Docs & Demo: refined shell layout, navigation, code blocks and dark mode styles
• Build: lock Tiptap dependency versions; update Playground IDB import maps
• Build: add CSS sideEffects field to ensure styles are retained during bundling
• Testing: supplement E2E selectors for Sender; add test coverage for Mention, Suggestion & Template scenarios

Bug Fixes

• Layout: stabilize type declarations, simplify slot existence judgment logic
• Bubble: fix rendering errors when non-standard APIs return empty reasoning_content
• Attachments: resolve attachment list normalization defects, add corresponding test cases
• Sender: fix tooltip spacing & rendering anomalies for action buttons; stabilize template deletion test cases
• Playground / Docs: fix share link path config; remove hardcoded VitePress brand colors
• CI & Workflow: optimize preview comment workflows; exclude CLI template packages from workspace bundling

Summary

The core value of v0.5.0 lies in shortening the development cycle from component integration to production-ready AI products:

• Skills: standardized organization of AI task logic & reference resources
• CLI: one-click project scaffolding for new & existing Vue projects
• Anchor: readable navigation for long dialogue & content
• Layout: unified complex page construction

All four upgrades streamline development workflows and deliver fully functional AI chat applications faster.

About OpenTiny NEXT

OpenTiny NEXT is an enterprise intelligent front-end solution built on Generative UI and WebMCP core technologies. It delivers intelligent upgrades for legacy products including the TinyVue component library and TinyEngine low-code engine, while launching Agent-native products such as front-end NEXT-SDKs, AI Extension, TinyRobot AI Assistant and GenUI. It enables AI to interpret user intentions and complete tasks autonomously, accelerating enterprise intelligent transformation.

Join the OpenTiny Open Source Community

WeChat Assistant: opentiny-official

• TinyRobot Official Website: https://opentiny.design/tiny-robot
• TinyRobot GitHub Repository: https://github.com/opentiny/tiny-robot (Star ⭐ appreciated)

If you wish to contribute, look for issues tagged good first issue in the repository. Feel free to leave comments with any questions or feedback!