TinyRobot 0.5 Ships Agent Skills, CLI Scaffolding, and Complex Layout Primitives

Foreword

TinyRobot is a front-end interaction framework built specifically for AI applications, helping teams quickly construct enterprise-grade AI assistants, intelligent customer service, and multi-turn dialogue systems. Based on the OpenTiny design system, TinyRobot provides complete capabilities from dialogue UI, streaming rendering, to session management, allowing developers to build AI products with a consistent experience and scalability without developing complex interaction logic from scratch. From prototype to a runnable AI application takes only a few hours. Recently, we officially released the TinyRobot v0.5.0 version. This update is not just about adding a few more components, but about making "building an AI chat application" even simpler.

• Open-source repository: https://github.com/opentiny/tiny-robot (Welcome to Star ⭐)
• Official website: https://opentiny.design/tiny-robot

Everyone is welcome to experience this version. If you have suggestions, ideas, or questions during use, you are also welcome to actively provide feedback through Issues, PRs, and the discussion area, and together make TinyRobot better.

Overview of v0.5.0 Changed Features

• [New Feature] Added Skills capability
• [New Feature] CLI: Added scaffolding, one command to start a TinyRobot project
• [New Component] Anchor: Added content navigation component, making long answers and long conversations easier to read
• [New Component] Layout: Added layout component, supporting regular layout and floating panel layout modes
• [Others] Interaction, functional detail optimizations & bug fixes

Interpretation of TinyRobot v0.5.0 New Features:

1. [New Feature]: Added Skills Capability

Added Agent Skills access capability. Agent Skills is a lightweight, open format used to extend the capabilities of AI Agents with specialized knowledge and workflows. Each Skill is a directory containing a SKILL.md file; SKILL.md includes the name, description, and task instructions, and the directory can also include reference materials, templates, and other files.

In TinyRobot Kit, Skills from different sources are converted into a unified SkillDefinition. The application can enable the appropriate Skill based on the current scenario, allowing the model to follow corresponding requirements when answering questions or executing tasks; teams can also maintain business knowledge and task requirements independently and reuse them across different projects and chat scenarios.

When a Skill participates in a conversation, the skillPlugin is responsible for parsing the Skills enabled for this request and generating the corresponding instructions and runtime tools. The plugin does not fix how instructions are carried in the model request; the application can write them into system message, user message, or an independent request field based on the model or provider protocol. When a Skill has reference files, the model can also read the text content within them on demand through runtime tools.

Below is an example using vue-best-practices. After the user enables the Skill in the interface and asks a Vue development question, the model will follow the development specifications within it; when needing to further understand reactivity, single-file components, or component data flow, it can also read the reference materials attached to the Skill.

1.1 Loading Skills from Multiple Sources

TinyRobot Kit supports loading Skills from browser files, the Node.js file system, and GitHub repositories. Developers can let users select local directories on the page, read existing Skill directories on the server side, or directly use content uniformly maintained in a repository. After loading, all different sources are converted into a consistent Skill definition, so there is no need to worry about where it originally came from when subsequently integrating it into the chat flow. This is suitable for both individual developers quickly trying things out and teams centrally maintaining and version-managing through code repositories.

1.2 Saving and Reusing Skills

For different runtime environments, TinyRobot provides multiple saving methods. Memory Storage is suitable for temporary previews and testing; IndexedDB Storage can retain user-imported Skills across sessions in the browser; File System Storage is suitable for Node.js services or projects with existing local directories.

The application can first import and save Skills, then read them by name and use them for chat. The saving of Skills and their enabled state in the interface are independent of each other, allowing developers to continue using checkboxes, dropdowns, or other interaction methods that fit the product experience.

1.3 Integrating into the Chat Flow

In a chat scenario, the application can either directly enable the Skills already specified by the user, or provide candidate Skills to the model for automatic matching based on the current question. Once the Skill is determined, the skillPlugin generates the corresponding instructions; if the Skill has attached files, it also provides runtime tools like list_skill_files and read_skill_file, which are collected and executed by the toolPlugin when the model returns tool calls.

Vue applications can access these capabilities through the skillPlugin. The currently used Skill and selection method can change with the interface state, reading the latest configuration each time a message is sent, so there is no need to recreate the entire chat instance to switch Skills.

Skills are not just an addition of a set of low-level APIs, but provide a clearer way to organize capabilities for chat applications: how the model completes tasks and what content it needs to reference can be separated from the page code and continuously reused across different projects.

2. [New Component] Anchor: Added Content Navigation Component, Making Long Answers and Conversations Easier to Read

Added the Anchor anchor component, used to add table-of-contents navigation to long articles, long conversations, and pages with a lot of information. It can organize page content into a table of contents, supporting quick jumps, scroll-following highlighting, and table-of-contents searching, helping users find the content they want to see faster.

2.1 Table of Contents Establishment

The integration method for Anchor is relatively straightforward. We just need to prepare the table of contents content, and then make the corresponding content in the main text correspond one-to-one with the table of contents, and the component can organize the entire long piece of content into a jumpable table of contents.

This method is suitable for both article pages and conversation pages; as long as the content itself has clear segmentation, it can naturally integrate table-of-contents navigation.

2.2 Jumping and Highlighting

After using the Anchor component, users can directly jump within long content through the table of contents. Clicking on an item scrolls the page to the corresponding content; scrolling to a section makes the table of contents highlight the corresponding item.

To make it easier for users to confirm their current position, Anchor also supports briefly highlighting the target content after a jump. This makes it more convenient for users to obtain information, making the browsing process smoother.

2.3 Searching and Expanding

When the number of table-of-contents items increases, the speed of finding effective content slows down. Anchor supports searching directly within the table of contents, allowing users to quickly find target content through keywords, making it less effort to find information in long pages.

Besides searching, the table-of-contents panel also supports expanding, collapsing, and docking left or right. This way, it can exist as a lightweight sidebar table of contents or as a stable auxiliary navigation within the page, adapting to different types of page layouts.

Anchor is not simply adding a table-of-contents component, but placing "organizing a table of contents, quick jumping, scroll following, and searching" into a navigation method more suitable for long content pages, making long pages easier to read and easier to find things in.

3. [New Component] Layout: Added Layout Component, Supporting Regular Layout and Floating Panel Layout Modes

The Layout layout component supports standard page structures, collapsible sidebars, and floating workspaces, suitable for conversation pages, workbenches, and complex editing pages. In complex pages, layout problems mainly manifest in how multiple areas achieve coordinated interaction. When a page simultaneously has a navigation area, main content area, information area, and temporarily expanded operation panels, if these capabilities are implemented separately, the structure and interaction can easily become scattered. The key issue Layout addresses this time is the organization problem of such complex workspaces.

3.1 Building Page Structure

Layout provides a complete and clear page structure. You can directly use the left-aside, header, main, footer, and right-aside areas to set up the most basic structure of the page. For interfaces with clear structures like backend pages, editing pages, and conversation pages, this method is more direct and more stable.

3.2 Unified Sidebar Interaction

Layout supports two sidebar modes: dock and drawer. The former is part of the overall layout, suitable for persistent navigation and information areas; the latter overlays the main area content, more suitable for temporary panels expanded on demand. Additionally, the component supports sidebar collapsing, retaining a narrow bar, and drag-to-resize width. It not only "places the sidebar into the page" but also involves the common interactions of sidebars in real workspaces, keeping the page structure and interaction state consistent.

3.3 Expanding Floating Area

When a temporary workbench is needed outside the page, Layout can further switch to floating mode. At this point, the entire layout detaches from the normal document flow and becomes a draggable, resizable floating panel. This floating layer internally still retains the complete layout capability, and the header, main area, and left/right sidebars can continue to be used.

Layout designs the page structure, sidebar interaction, and floating workspace area into one layout model, transforming complex pages from "being able to be laid out" to "being able to be organized."

4. [New Tool] CLI: Added Scaffolding, One Command to Start a TinyRobot Project

TinyRobot now provides two more convenient access methods through the CLI tool: basic - suitable for quickly starting a complete project from 0 to 1 add chat - suitable for incrementally injecting chat capabilities into an existing Vue project;

4.1 CLI Quickly Creates a Complete Project

Quick creation using the create command. Use the basic template to quickly set up a local project.

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

After creation, follow the instructions to install dependencies and start the project.

Configure the Large Model Key. The basic template project comes with two built-in large model service providers, DeepSeek and Alibaba Bailian. You can configure the corresponding API_KEY in the .env file.

It also comes with 3 built-in MCP plugins, which are the 12306 ticket query provided by Alibaba Bailian, Amap, and the Model Context Protocol example MCP. Alibaba Bailian's MCP plugin depends on VITE_ALIYUN_DASHSCOPE_KEY.

cd <your-project-path>
cp .env.example .env

# Edit .env
# Alibaba Bailian API_KEY. Some MCP plugins depend on this variable
VITE_ALIYUN_DASHSCOPE_KEY=
# DeepSeek
VITE_DEEPSEEK_API_KEY=

Open http://localhost:5173/ in the browser to experience the application.

4.2 CLI Quickly Injects Conversation Components

Inject into an existing application using the add chat command. Use the add chat template to quickly inject an AI chat application.

Execute in the root directory of an existing project:

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

Follow the instructions to select options.

After generation, place the TinyRobotChat component where you want to initialize the chat application.

For example, in src/App.vue:

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

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

Configure the Large Model Key. Fill in the corresponding API_KEY in the .env file.

The default example is:

VITE_DEEPSEEK_API_KEY=

Install dependencies and start the project.

If package.json was updated, remember to run an install:

pnpm install
pnpm dev

Open http://localhost:5173/ in the browser to experience the application.

5. [Others] Interaction, Functional Detail Optimizations & Bug Fixes

✨ New Capabilities

• Bubble: Added a unified bubble-event event channel and state-change state linkage, as well as provider-level box/content attributes injection.
• Sender: Added character counting by grapheme clusters, accurately handling Emoji and combined character lengths.
• Sender: Added the hasExternalContent property, allowing external content like attachments to participate in the send state judgment.
• useMessage: Extracted the message core engine and migrated to an adapter architecture, supporting the reuse of message processing capabilities in Vue and native JavaScript scenarios.
• toolPlugin: Supports runtime tool provider aggregation and tool source tracking, facilitating the dynamic provision of model tools based on the current message context.

🔨 Optimizations and Improvements

• Reasoning: Thinking bubbles are expanded by default, reducing extra operations when viewing reasoning content.
• McpServerPicker: Optimized style variables and overall visual consistency.
• Attachments / Dropdown / Suggestion: Improved dark theme variables, card hover, and interaction surface styles.
• Feedback / Welcome: Optimized display effects in dark mode.
• Docs / Demo: Optimized example shell, navigation, code blocks, and dark mode display effects.
• Build: Locked Tiptap dependency and updated Playground idb import map.
• Build: Added CSS sideEffects to ensure style files are correctly retained during packaging.
• Testing: Added E2E selectors for Sender and coverage for Mention / Suggestion / Template scenarios.

🐛 Bug Fixes

• Layout: Stabilized declaration types and simplified slot existence judgment.
• Bubble: Fixed rendering handling when non-standard APIs return empty reasoning_content.
• Attachments: Fixed attachment list normalization processing issues and added test cases.
• Sender: Fixed action button tooltip spacing and rendering anomalies, and stabilized template deletion test scenarios.
• Playground / Docs: Fixed share link path configuration issues and removed VitePress brand color hardcoding.
• CI / Workspace: Preview workflow comment action, and excluded CLI template packages from entering the workspace.

Summary

The core of this version is not the number of components, but shortening the distance from components to product. Skills solve how to organize capabilities, CLI solves how to start a project, Anchor solves how to view long content, Layout solves how to structure complex pages. Four directions, all pointing to the same thing: making the building process shorter and the resulting application more complete.

About OpenTiny NEXT

OpenTiny NEXT is an enterprise intelligent front-end development solution, based on two core technologies: Generative UI and WebMCP. It intelligently upgrades existing traditional products like the TinyVue component library and TinyEngine low-code engine, building new products such as NEXT-SDKs for Agent applications, AI Extension, TinyRobot intelligent assistant, and GenUI, enabling AI to understand user intent and autonomously complete tasks, accelerating the intelligent transformation of enterprise applications.

Welcome to join the OpenTiny open-source community. Add WeChat assistant: opentiny-official to participate in exchanging front-end technology~ OpenTiny Official Website: https://opentiny.design TinyRobot Code Repository: https://github.com/opentiny/tiny-robot (Welcome to star ⭐)

If you also want to contribute, you can enter the code repository, find the good first issue tag, and participate in open-source contribution together~ If you have any questions, feel free to leave a comment in the comment section for discussion!