Frontend · Vue.js · GitHub

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

By OpenTiny社区 · Jul 20, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Agent Skills decouple domain rules from chat UI code, so teams can version and reuse business logic across projects without touching the frontend. Combined with a one-command CLI, the framework lowers the setup cost for enterprise AI assistants from days to hours.

Summary

The OpenTiny team released TinyRobot v0.5.0, a Vue-based front-end framework for building AI chat applications. The update centers on four additions: an Agent Skills system that loads domain-specific instructions from local files, Node.js, or GitHub and feeds them into model requests; a CLI that scaffolds a full project or injects chat into an existing Vue app with a single command; an Anchor component that generates a searchable, scroll-synced table of contents for long conversations; and a Layout component that handles docked sidebars, drawer panels, and detachable floating workspaces.

Skills are packaged as directories containing a SKILL.md file with task instructions and optional reference files. A skillPlugin converts them into unified definitions and generates runtime instructions and file-reading tools, so a model can follow, say, Vue best practices or read attached docs on demand. Skills persist across sessions via memory, IndexedDB, or the filesystem, and switching them does not require recreating the chat instance.

The CLI offers two paths: `create` spins up a complete project preconfigured with DeepSeek and Alibaba Bailian providers plus three MCP plugins; `add chat` drops a TinyRobotChat component into an existing codebase. Together with the new Anchor and Layout components, the release targets the friction between having UI components and shipping a usable AI product.

Takeaways

— Agent Skills are directory-based packages with a SKILL.md file that defines task instructions and optional reference files the model can read at runtime.

— Skills load from browser file pickers, Node.js filesystems, or GitHub repos, then normalize into a single SkillDefinition.

— Persistent storage options include in-memory, IndexedDB for cross-session browser use, and direct filesystem access for Node.js.

— Switching Skills reads the latest configuration on each message; no need to rebuild the chat instance.

— A new Anchor component produces a scroll-synced, searchable table of contents with brief highlight on jump, built for long AI responses.

— The Layout component provides dock, drawer, and floating modes with collapsible, resizable sidebars for complex workbench UIs.

— CLI `create` scaffolds a full project with DeepSeek and Alibaba Bailian providers plus three MCP plugins preconfigured.

— CLI `add chat` injects a TinyRobotChat component into an existing Vue project and adds the required dependencies.

— Reasoning bubbles now default to expanded; Sender counts grapheme clusters to handle emoji length correctly.

— Tiptap dependency is locked, CSS sideEffects are declared to prevent tree-shaking, and E2E test coverage expanded for Sender scenarios.

Conclusions

TinyRobot's Skill system mirrors the agent-tool pattern but keeps instructions provider-agnostic, which avoids lock-in to a single model's system-message convention.

Loading Skills from GitHub turns repositories into version-controlled knowledge bases that non-developers can update without touching application code.

Decoupling Skill persistence from UI enablement means the same saved Skill can be surfaced through checkboxes, dropdowns, or model-driven auto-selection without storage logic leaking into the view layer.

The floating Layout mode essentially gives every page a detachable secondary workspace, which is uncommon in Vue component libraries and directly targets multi-panel AI workflows like side-by-side editing and chat.

Concepts & terms

Agent Skills

A lightweight, open format for extending AI agents with domain knowledge. Each Skill is a directory containing a SKILL.md file with name, description, and task instructions, plus optional reference files, templates, or scripts.

skillPlugin

A TinyRobot plugin that parses enabled Skills for a request, generates model instructions, and provides runtime tools like list_skill_files and read_skill_file so the model can access attached reference material on demand.

MCP (Model Context Protocol)

An open protocol for connecting AI models to external tools and data sources. TinyRobot's basic template ships with MCP plugins for services like 12306 ticket queries and Amap maps.

Grapheme cluster counting

A method of counting user-perceived characters rather than code units, so emoji and combined characters (like family emoji or accented letters) count as one character instead of several.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗