DEV Community

OpenTiny
OpenTiny

Posted on

Add AI Chat Entry with One Single Command! TinyRobot Makes It Super Easy

Introduction

In the AI era, AI capabilities are advancing rapidly. Many teams want to add an AI chat entry to their projects. It sounds simple, yet implementation brings lots of work: chat UI, streaming response rendering, conversation state management, Markdown rendering, responsive layout, and more. These features are trivial separately, but combined together, they take massive development effort.

Is there a simpler, low-effort way to quickly build an AI chat application or embed an AI dialogue entry into existing projects?

Absolutely! That’s exactly what TinyRobot is built for.
Besides providing basic AI components like chat bubbles and input boxes as a component library, TinyRobot now ships with the TinyRobot CLI. Two simple commands cover two core scenarios:

  • Create a full project: Run the create command to generate a fully functional runnable TinyRobot demo project.
  • Integrate into existing projects: Run the add command to inject AI chat components into your existing Vue project.

To put it simply:

  • If you don’t have a project yet or want to preview the complete experience, use create.
  • If you own an existing project and only need an extra chat entry, use add.

What Is TinyRobot?

TinyRobot is a Vue 3 interactive component library and dialogue framework built for enterprise AI applications.
Built on the OpenTiny design system, it solves common front-end challenges for AI applications, including:

  • Organizing chat messages and dialogue UI
  • Rendering real-time streaming messages
  • Managing conversation states
  • Rapidly building AI assistants, intelligent customer service, and multi-turn dialogue pages
  • Responsive UI layout
  • Unified component styling and easy extension

You can write a simple chat box from scratch for small demos. But real production projects introduce extra complexity: message statuses, loading states, error prompts, multi-turn context, multi-model vendor configuration, and business component integration. All of these require heavy front-end encapsulation.

TinyRobot pre-packages repetitive interaction logic and engineering infrastructure for AI dialogue applications, allowing teams to move straight to business validation faster.

Why We Built the CLI Tool

From questionnaires, Q&A sessions and live stream feedback, we repeatedly received these requests:

  • I want to build an AI Q&A interface quickly without writing every component manually.
  • Is there a complete dialogue UI component I can import directly?
  • I already have an existing business project — can TinyRobot be integrated quickly?

These demands reflect the universal pursuit of higher development efficiency in the AI age. The CLI enables fast project initialization and code injection to cut development time. It also works seamlessly with AI Agents: you can pass this article to an AI and let it execute CLI commands automatically to finish integration, saving manual work. Meanwhile, the CLI lays groundwork for future AI-native features.

We identified two distinct usage scenarios:

  1. Start from scratch for validation: Teams without an existing integration solution want to preview the full TinyRobot experience with minimal commands.
  2. Incremental integration into live projects: Systems such as admin dashboards, workbenches and portals are already online or under development. The priority is to add an AI dialogue entry with minimal code changes.

Thus, TinyRobot CLI provides two core commands to cover both scenarios:

Scenario Recommended Command Use Cases
No existing project, or want to preview full features create to generate a complete project Demos, prototypes, PoCs, solution validation
Existing Vue project ready add to inject chat components AI entry for admin systems, workbenches, portals

Summary:

  • Run create if you need a fully functional standalone demo.
  • Run add if you only want to add chat capabilities to an existing project.

Path 1: Create a Full Project with create Command

The create command is ideal for rapid preview. It generates a complete project for first-time users to experience the full feature set of TinyRobot.

Step 1: Execute creation command

Run via npm or pnpm:

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

# pnpm
pnpm dlx @opentiny/tiny-robot-cli create
Enter fullscreen mode Exit fullscreen mode

After generation, enter the project directory:

cd <project-name>
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure environment variables

The generated project comes with sample configs for two LLM providers: DeepSeek and Alibaba DashScope.
Copy the sample env file and fill in your API keys:

cd <your-project-path>
cp .env.example .env
# Edit .env afterwards
Enter fullscreen mode Exit fullscreen mode

Sample env config:

# Alibaba DashScope API Key (required for some MCP plugins)
VITE_ALIYUN_DASHSCOPE_KEY=

# DeepSeek API Key
VITE_DEEPSEEK_API_KEY=
Enter fullscreen mode Exit fullscreen mode

The template includes 3 built-in MCP plugin examples:

  1. 12306 ticket query powered by Alibaba DashScope
  2. Amap Maps
  3. Generic Model Context Protocol demo

The DashScope MCP plugins require VITE_ALIYUN_DASHSCOPE_KEY.

Note: Variables prefixed with VITE_ are injected into the build output and exposed to the browser. They are only suitable for local testing and quick validation. For production, route model API calls through backend services or gateways to avoid exposing sensitive keys on the client side.

Step 3: Install dependencies and launch the project 

pnpm install && pnpm dev
# Or npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

Open the local address in browser:

http://localhost:5173/
Enter fullscreen mode Exit fullscreen mode

You can now test the full TinyRobot demo application.

Suitable Scenarios for create

  • First-time users who want to preview complete features
  • Fast demo, prototype or PoC development
  • Internal team validation of AI dialogue solutions before production integration
  • Building a runnable base project for further customization

Advantage: Clear workflow without worrying about compatibility with legacy systems. Teams can verify interactions, LLM vendors, MCP plugins and business logic before formal integration.

Path 2: Inject Chat Components into Existing Projects with add Command

If you already maintain an admin system, enterprise workbench or internal portal, rebuilding a separate application just for AI chat is unnecessary — the add command fits perfectly here.

Step 1: Run the command in your project root

Execute the TinyRobot CLI add command inside your Vue project root:

npx @opentiny/tiny-robot-cli add chat
Enter fullscreen mode Exit fullscreen mode

If your project uses a monorepo workspace, the CLI will auto-detect and prompt you to select the target package. For standard single-package projects, injection runs directly in the current directory.

Step 2: File modifications handled automatically by CLI

Based on your selected options, the CLI auto-completes repetitive integration work:

Modified File Purpose
src/TinyRobotChat.vue Generate a ready-to-use TinyRobot chat component
main.ts / main.js Auto-import TinyRobot global styles
.env Inject required environment variables
package.json Install or upgrade @opentiny/tiny-robot dependency

The add command automates tedious repetitive work: component generation, dependency installation, style importing and environment variable setup.

This minimizes changes to existing business code. You can mount the chat component on a dedicated page to verify API calls and interactions before deeper integration with business data, permissions and layouts.

Step 3: Use the component in business pages

After generation, place TinyRobotChat.vue wherever you want the chat entry to appear.


Example usage in src/App.vue:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TinyRobotChat from './TinyRobotChat.vue'
</script>

<template>
  <HelloWorld />
  <TinyRobotChat />
</template>
Enter fullscreen mode Exit fullscreen mode

The CLI automatically injects global style imports into main.ts / main.js:

import '@opentiny/tiny-robot/dist/style.css'
Enter fullscreen mode Exit fullscreen mode

You can move the generated component to drawers, modals, sidebars or specific business pages later, following your project’s component organization standards.

Step 4: Fill in environment variables

You can preview component styling without API keys, but actual LLM requests require valid keys in .env:

VITE_DEEPSEEK_API_KEY=
Enter fullscreen mode Exit fullscreen mode

If a .env file already exists, the CLI merges new variables; if not, it creates one automatically.

Important reminder: Client-side environment variables are unsafe for production API keys. Always use backend proxy, authentication and rate limiting for formal deployments.

Step 5: Reinstall dependencies and start dev server

If package.json has been updated, reinstall dependencies:

pnpm install && pnpm dev
# Or npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Suitable Scenarios for add

  • Existing admin dashboards, workbenches and portal websites
  • Need a lightweight AI chat entry without rebuilding the entire project
  • Low-cost pilot validation before deep business integration
  • Minimal modification to preserve original project structure
  • Verify interaction and API flow before implementing permission, data and knowledge base features

Compared to generating a full standalone project, add acts as a lightweight plug-in entry. It does not build a complete business workflow, but lets you preview AI dialogue components running inside your real production project quickly.

Summary

TinyRobot now provides two simple CLI commands to accelerate AI dialogue integration:

  • Use create to generate a complete standalone project for end-to-end preview of TinyRobot interactions, model configuration and MCP plugin examples.
  • Use add to incrementally inject chat components into existing Vue projects with minimal disruption to your codebase, enabling fast AI capability validation.

For teams evaluating AI assistants, intelligent customer service and multi-turn dialogue systems, these two approaches cover two core stages:

  1. Validate whether TinyRobot meets your requirements
  2. Integrate dialogue capabilities into formal business projects

Future Roadmap & Community Contribution

TinyRobot will keep expanding AI component sets and interactive capabilities, including layout components, chain-of-thought rendering, full dialogue application components, Skill management & loading, and more.

If you are building AI assistants, intelligent workbench chat entries, or Vue3-based AI interaction components, feel free to follow and contribute to TinyRobot. Star the repository if you find it useful!

You are welcome to submit feedback via GitHub Issues, including usage confusion, bugs, and feature requests for future iterations. Your input directly shapes our product roadmap.

Top comments (0)