@opentiny/tiny-robot-cli 0.4.2-alpha.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 - present OpenTiny Authors.
+Copyright (c) 2025 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @opentiny/tiny-robot-cli
+
+A lightweight CLI for scaffolding TinyRobot-based product projects.
+
+## Usage
+
+```bash
+npx @opentiny/tiny-robot-cli create my-app
+pnpm dlx @opentiny/tiny-robot-cli create my-app
+```
+
+## Options
+
+- `-t, --template <name>`: template name, currently supports `basic`
+- `-h, --help`: show help
+
+## Template Documentation
+
+Template-specific features and environment variables are documented in each template directory, for example:
+
+- `packages/cli/templates/basic/README.md`

package/bin/cli.js

@@ -0,0 +1,187 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { input, select } from '@inquirer/prompts'
+import { Command } from 'commander'
+
+const TEMPLATE_PLACEHOLDER = '__PROJECT_NAME__'
+const DEFAULT_TEMPLATE = 'basic'
+const DEFAULT_PROJECT_NAME = 'tiny-robot-app'
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const templatesRoot = path.resolve(__dirname, '../templates')
+
+function getAvailableTemplates() {
+  if (!fs.existsSync(templatesRoot)) {
+    return []
+  }
+
+  return fs
+    .readdirSync(templatesRoot, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => entry.name)
+}
+
+function validateProjectName(name) {
+  // Keep project naming rules strict for npm package compatibility.
+  const npmSafePattern = /^[a-z0-9-]+$/
+  return npmSafePattern.test(name)
+}
+
+function getTemplateDir(templateName) {
+  return path.join(templatesRoot, templateName)
+}
+
+async function resolveProjectName(initialProjectName, skipPrompts) {
+  if (initialProjectName) {
+    return initialProjectName
+  }
+
+  if (skipPrompts) {
+    return DEFAULT_PROJECT_NAME
+  }
+
+  return input({
+    message: 'Project name:',
+    default: DEFAULT_PROJECT_NAME,
+    validate: (value) => {
+      if (!value) {
+        return 'Project name is required.'
+      }
+      if (!validateProjectName(value)) {
+        return 'Project name can only contain lowercase letters, numbers, and dashes.'
+      }
+      const targetDir = path.resolve(process.cwd(), value)
+      if (fs.existsSync(targetDir)) {
+        return `Target directory already exists: ${targetDir}`
+      }
+      return true
+    },
+  })
+}
+
+async function resolveTemplateName(initialTemplateName, availableTemplates, skipPrompts) {
+  if (initialTemplateName) {
+    return initialTemplateName
+  }
+
+  if (skipPrompts) {
+    return availableTemplates.includes(DEFAULT_TEMPLATE) ? DEFAULT_TEMPLATE : availableTemplates[0]
+  }
+
+  return select({
+    message: 'Template:',
+    default: availableTemplates.includes(DEFAULT_TEMPLATE) ? DEFAULT_TEMPLATE : availableTemplates[0],
+    choices: availableTemplates.map((templateName) => ({
+      name: templateName,
+      value: templateName,
+    })),
+  })
+}
+
+function copyTemplate(sourceDir, targetDir) {
+  fs.cpSync(sourceDir, targetDir, {
+    recursive: true,
+    filter: (source) => {
+      const name = path.basename(source)
+      // Ignore local build artifacts to keep generated projects clean.
+      return !['node_modules', '.git', 'dist', '.DS_Store', '.vite'].includes(name)
+    },
+  })
+}
+
+function renameSpecialFiles(targetDir) {
+  const from = path.join(targetDir, '_gitignore')
+  const to = path.join(targetDir, '.gitignore')
+
+  if (fs.existsSync(from)) {
+    fs.renameSync(from, to)
+  }
+}
+
+function replaceProjectName(targetDir, projectName) {
+  const filesToReplace = ['package.json', 'README.md']
+
+  for (const relativeFile of filesToReplace) {
+    const absoluteFile = path.join(targetDir, relativeFile)
+
+    if (!fs.existsSync(absoluteFile)) {
+      continue
+    }
+
+    const content = fs.readFileSync(absoluteFile, 'utf-8')
+    const nextContent = content.replaceAll(TEMPLATE_PLACEHOLDER, projectName)
+    fs.writeFileSync(absoluteFile, nextContent, 'utf-8')
+  }
+}
+
+async function createProject(initialProjectName, initialTemplateName, skipPrompts) {
+  const availableTemplates = getAvailableTemplates()
+  if (availableTemplates.length === 0) {
+    console.error('Error: no templates found.')
+    process.exit(1)
+  }
+
+  const projectName = await resolveProjectName(initialProjectName, skipPrompts)
+  const templateName = await resolveTemplateName(initialTemplateName, availableTemplates, skipPrompts)
+
+  if (!validateProjectName(projectName)) {
+    console.error('Error: project name can only contain lowercase letters, numbers, and dashes.')
+    process.exit(1)
+  }
+
+  const templateDir = getTemplateDir(templateName)
+  const targetDir = path.resolve(process.cwd(), projectName)
+
+  if (!fs.existsSync(templateDir)) {
+    console.error(`Error: template "${templateName}" does not exist. Available: ${availableTemplates.join(', ')}`)
+    process.exit(1)
+  }
+
+  if (fs.existsSync(targetDir)) {
+    console.error(`Error: target directory already exists: ${targetDir}`)
+    process.exit(1)
+  }
+
+  copyTemplate(templateDir, targetDir)
+  renameSpecialFiles(targetDir)
+  replaceProjectName(targetDir, projectName)
+
+  console.log('\nProject created successfully!')
+  console.log(`\nNext steps:`)
+  console.log(`  cd ${projectName}`)
+  console.log('  pnpm install')
+  console.log('  pnpm dev\n')
+}
+
+function run() {
+  const program = new Command()
+  program
+    .name('tiny-robot-cli')
+    .description('CLI to scaffold TinyRobot product projects')
+    .showHelpAfterError()
+
+  program
+    .command('create [project-name]')
+    .description('Create a TinyRobot project from template')
+    .option('-t, --template <name>', 'template name')
+    .action((projectName, options) => {
+      const skipPrompts = !process.stdout.isTTY
+      createProject(projectName ?? '', options.template ?? '', skipPrompts).catch((error) => {
+        console.error(`Error: ${error instanceof Error ? error.message : String(error)}`)
+        process.exit(1)
+      })
+    })
+
+  if (process.argv.length <= 2) {
+    program.outputHelp()
+    return
+  }
+
+  program.parse(process.argv)
+}
+
+run()

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@opentiny/tiny-robot-cli",
+  "version": "0.4.2-alpha.0",
+  "description": "CLI to scaffold TinyRobot product projects",
+  "type": "module",
+  "homepage": "https://docs.opentiny.design/tiny-robot/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opentiny/tiny-robot.git"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-robot/issues"
+  },
+  "bin": {
+    "tiny-robot-cli": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "node ./bin/cli.js"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.13.0"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^8.3.2",
+    "commander": "^14.0.3"
+  },
+  "gitHead": "9d5703d90bf641988103e5a665b63fcaeb1f9394"
+}

package/templates/basic/.env.example

@@ -0,0 +1,2 @@
+VITE_ALIYUN_DASHSCOPE_KEY=
+VITE_DEEPSEEK_API_KEY=

package/templates/basic/README.md

@@ -0,0 +1,45 @@
+# __PROJECT_NAME__
+
+TinyRobot AI chat starter built with Vue 3 + Vite.
+
+## Features
+
+- Vue 3 + Vite + TypeScript project scaffold
+- TinyRobot chat UI with `TrBubbleList`, `TrSender`, and markdown rendering
+- Conversation management via `useConversation`
+- Model switch with thinking/search capability toggles
+- MCP server picker for add/toggle/delete server usage
+- MCP transport support for both `sse` and `streamableHttp`
+- Tool calling pipeline through `toolPlugin` + MCP `listTools` / `callTool`
+- Theme toggle and responsive layout for desktop/mobile
+
+## Setup
+
+1. Copy environment variables:
+
+```bash
+cp .env.example .env
+```
+
+2. Fill your provider keys in `.env`:
+
+```env
+VITE_ALIYUN_DASHSCOPE_KEY=your_dashscope_key
+VITE_DEEPSEEK_API_KEY=your_deepseek_key
+```
+
+`VITE_ALIYUN_DASHSCOPE_KEY` is also used by configured MCP servers that require DashScope authorization.
+
+## Development
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Build
+
+```bash
+pnpm build
+pnpm preview
+```

package/templates/basic/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TinyRobot AI Chat</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/basic/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.18.1",
+    "@opentiny/tiny-robot": "^0.4.1",
+    "@opentiny/tiny-robot-kit": "^0.4.1",
+    "@opentiny/tiny-robot-svgs": "^0.4.1",
+    "dompurify": "^3.3.1",
+    "markdown-it": "^14.1.0",
+    "vue": "^3.5.30"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1",
+    "vue-tsc": "^3.2.5"
+  }
+}

package/templates/basic/src/App.vue

@@ -0,0 +1,130 @@
+<template>
+  <TrTheme>
+    <main class="app chat-card">
+      <ConversationHistory />
+
+      <section class="chat-panel">
+        <div class="chat-panel-content">
+          <p v-if="!hasApiConfig" class="config-warning">
+            缺少 API 配置，请在 <code>.env</code> 中设置当前模型服务商对应的 Key。
+          </p>
+          <header class="chat-header">
+            <HistoryDrawerButton @click="historyDrawerOpen = true" />
+            <h3 v-if="currentConversationTitle">{{ currentConversationTitle }}</h3>
+            <ThemeToggleButton v-if="isWelcomePage" />
+          </header>
+
+          <ChatList />
+
+          <ChatSender />
+        </div>
+      </section>
+    </main>
+  </TrTheme>
+</template>
+
+<script setup lang="ts">
+import { TrThemeProvider as TrTheme } from '@opentiny/tiny-robot'
+import { computed, provide, ref } from 'vue'
+import ChatList from './components/ChatList.vue'
+import ChatSender from './components/ChatSender.vue'
+import ConversationHistory from './components/ConversationHistory.vue'
+import HistoryDrawerButton from './components/HistoryDrawerButton.vue'
+import ThemeToggleButton from './components/ThemeToggleButton.vue'
+import { useChat } from './composables/useChat'
+import { useModel } from './composables/useModel'
+
+const { activeConversation, messages } = useChat()
+const { hasApiConfig } = useModel()
+const historyDrawerOpen = ref(false)
+provide('historyDrawerOpen', historyDrawerOpen)
+
+const isWelcomePage = computed(() => {
+  return messages.value.filter((item) => item.role !== 'system').length === 0
+})
+
+const currentConversationTitle = computed(() => {
+  return activeConversation.value?.title
+})
+</script>
+
+<style scoped>
+.app {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  padding: 0;
+}
+
+.chat-card {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  gap: 0;
+  overflow: hidden;
+  align-items: stretch;
+  flex-direction: row;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  background: var(--tr-container-bg-default);
+  box-shadow: none;
+}
+
+.chat-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  padding: 12px;
+}
+
+.chat-panel-content {
+  width: 100%;
+  max-width: 980px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.chat-header h3 {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-warning {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--tr-color-warning-light);
+  color: var(--tr-color-warning);
+  font-size: 14px;
+}
+
+@media (max-width: 959px) {
+  .chat-header {
+    position: relative;
+    justify-content: center;
+    min-height: 32px;
+  }
+
+  .chat-header h3 {
+    width: 100%;
+    text-align: center;
+    padding: 0 48px;
+    flex: none;
+  }
+}
+</style>

package/templates/basic/src/components/ChatList.vue

@@ -0,0 +1,82 @@
+<template>
+  <tr-bubble-provider :fallback-content-renderer="BubbleRenderers.Markdown">
+    <tr-welcome
+      v-if="visibleMessages.length === 0"
+      title="TinyRobot AI 助手"
+      description="您好，我是TinyRobot，您专属的 AI 智能专家"
+      :icon="welcomeIcon"
+      class="chat-list chat-welcome"
+    />
+    <tr-bubble-list
+      v-else
+      :messages="messages"
+      :role-configs="roles"
+      :auto-scroll="true"
+      class="chat-list"
+    ></tr-bubble-list>
+  </tr-bubble-provider>
+</template>
+
+<script setup lang="ts">
+import { BubbleRenderers, TrBubbleList, TrBubbleProvider, TrWelcome, type BubbleRoleConfig } from '@opentiny/tiny-robot'
+import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
+import { computed, h } from 'vue'
+import { useChat } from '../composables/useChat'
+
+const { messages } = useChat()
+
+const aiAvatar = h(IconAi, { style: { fontSize: '28px' } })
+const userAvatar = h(IconUser, { style: { fontSize: '28px' } })
+const welcomeIcon = h(IconAi, { style: { fontSize: '40px' } })
+const visibleMessages = computed(() => messages.value.filter((item) => item.role !== 'system'))
+
+const roles: Record<string, BubbleRoleConfig> = {
+  assistant: {
+    placement: 'start',
+    avatar: aiAvatar,
+  },
+  user: {
+    placement: 'end',
+    avatar: userAvatar,
+  },
+  system: {
+    hidden: true,
+  },
+}
+</script>
+
+<style scoped>
+.chat-list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  border-radius: 10px;
+  padding: 8px;
+}
+
+.chat-welcome {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10%;
+
+  &.tr-welcome {
+    --title-color: var(--tr-text-primary);
+    --description-color: var(--tr-text-secondary);
+  }
+}
+
+:deep() {
+  [data-box-type='box'][data-role='user'] {
+    --tr-bubble-box-bg: var(--tr-color-primary-light);
+  }
+
+  [data-box-type='box']:not([data-role='user']) {
+    --tr-bubble-box-bg: transparent;
+  }
+
+  [data-type='markdown'] p {
+    margin: 0;
+  }
+}
+</style>