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

package/bin/utils.js

@@ -0,0 +1,337 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import pc from 'picocolors'
+
+const TEMPLATE_PLACEHOLDER = '__PROJECT_NAME__'
+
+export const BUILTIN_TEMPLATES = ['basic']
+export const DEFAULT_TEMPLATE = 'basic'
+export const DEFAULT_PROJECT_NAME = 'tiny-robot-app'
+
+const WORKSPACE_FILES = ['pnpm-workspace.yaml', 'pnpm-workspace.yml']
+
+const IGNORE_COPY_FILES = ['node_modules', '.git', 'dist', '.DS_Store', '.vite']
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const templatesRoot = path.resolve(__dirname, '../templates')
+
+function createStatusLabel(icon, label, color) {
+  return `${color(icon)} ${color(label)}`
+}
+
+export function logSuccess(message) {
+  console.log(`${createStatusLabel('✔', 'SUCCESS', pc.green)} ${message}`)
+}
+
+export function logSkip(message) {
+  console.log(`${createStatusLabel('○', 'SKIPPED', pc.dim)} ${message}`)
+}
+
+export function logError(message) {
+  console.log(`${createStatusLabel('✖', 'FAILED', pc.red)} ${message}`)
+}
+
+export function invariant(condition, message) {
+  if (!condition) {
+    console.error(`Error: ${message}`)
+    process.exit(1)
+  }
+}
+
+export function exists(file) {
+  return fs.existsSync(file)
+}
+
+function isPackageDir(dir) {
+  return exists(path.join(dir, 'package.json'))
+}
+
+function findUp(startDir, matcher) {
+  let dir = path.resolve(startDir)
+
+  for (;;) {
+    if (matcher(dir)) {
+      return dir
+    }
+
+    const parent = path.dirname(dir)
+
+    if (parent === dir) {
+      return null
+    }
+
+    dir = parent
+  }
+}
+
+export function getAvailableTemplates() {
+  if (!exists(templatesRoot)) {
+    return []
+  }
+
+  return fs
+    .readdirSync(templatesRoot, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory() && BUILTIN_TEMPLATES.includes(entry.name))
+    .map((entry) => entry.name)
+}
+
+export function getTemplateDir(templateName) {
+  return path.join(templatesRoot, templateName)
+}
+
+export function validateProjectName(name) {
+  return /^[a-z0-9-]+$/.test(name)
+}
+
+export function copyTemplate(sourceDir, targetDir) {
+  fs.cpSync(sourceDir, targetDir, {
+    recursive: true,
+    filter: (source) => {
+      return !IGNORE_COPY_FILES.includes(path.basename(source))
+    },
+  })
+}
+
+function renameSpecialFiles(targetDir) {
+  const files = [['_gitignore', '.gitignore']]
+
+  for (const [fromName, toName] of files) {
+    const from = path.join(targetDir, fromName)
+    const to = path.join(targetDir, toName)
+
+    if (exists(from)) {
+      fs.renameSync(from, to)
+    }
+  }
+}
+
+function replaceTemplateVariables(targetDir, variables) {
+  const replaceFiles = ['package.json', 'README.md']
+
+  for (const relativePath of replaceFiles) {
+    const file = path.join(targetDir, relativePath)
+
+    if (!exists(file)) {
+      continue
+    }
+
+    let content = fs.readFileSync(file, 'utf-8')
+
+    for (const [key, value] of Object.entries(variables)) {
+      content = content.replaceAll(key, value)
+    }
+
+    fs.writeFileSync(file, content, 'utf-8')
+  }
+}
+
+export function scaffoldProject(templateDir, targetDir, projectName) {
+  copyTemplate(templateDir, targetDir)
+
+  renameSpecialFiles(targetDir)
+
+  replaceTemplateVariables(targetDir, {
+    [TEMPLATE_PLACEHOLDER]: projectName,
+  })
+}
+
+function resolveWorkspaceFile(workspaceRoot) {
+  for (const name of WORKSPACE_FILES) {
+    const file = path.join(workspaceRoot, name)
+
+    if (exists(file)) {
+      return file
+    }
+  }
+
+  return null
+}
+
+export function findWorkspaceRoot(cwd) {
+  return findUp(cwd, (dir) => {
+    return WORKSPACE_FILES.some((name) => {
+      return exists(path.join(dir, name))
+    })
+  })
+}
+
+export function findProjectRoot(cwd) {
+  return findUp(cwd, (dir) => {
+    return isPackageDir(dir)
+  })
+}
+
+export function findSubPackageRoot(cwd, workspaceRoot) {
+  return findUp(cwd, (dir) => {
+    if (dir === workspaceRoot) {
+      return false
+    }
+
+    return isPackageDir(dir)
+  })
+}
+
+export function findWorkspacePackages(workspaceRoot) {
+  const workspaceFile = resolveWorkspaceFile(workspaceRoot)
+
+  if (!workspaceFile) {
+    return []
+  }
+
+  const content = fs.readFileSync(workspaceFile, 'utf-8')
+
+  const packages = []
+
+  let inPackages = false
+
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim()
+
+    if (trimmed === 'packages:') {
+      inPackages = true
+      continue
+    }
+
+    if (!inPackages) {
+      continue
+    }
+
+    const match = trimmed.match(/^-\s+(.+)$/)
+
+    if (match) {
+      const pattern = match[1]
+
+      if (!pattern.startsWith('!')) {
+        packages.push(pattern)
+      }
+
+      continue
+    }
+
+    if (trimmed && !trimmed.startsWith('#')) {
+      break
+    }
+  }
+
+  return packages
+}
+
+function normalizeWorkspacePattern(pattern) {
+  return pattern.replace(/\*\*?/g, '').replace(/\/$/, '')
+}
+
+export function listPackages(workspaceRoot, patterns) {
+  const packageDirs = []
+
+  const addPackage = (dir) => {
+    if (isPackageDir(dir)) {
+      packageDirs.push(dir)
+    }
+  }
+
+  for (const pattern of patterns) {
+    const base = normalizeWorkspacePattern(pattern)
+
+    const fullPath = path.join(workspaceRoot, base)
+
+    if (!exists(fullPath)) {
+      continue
+    }
+
+    if (pattern.includes('*')) {
+      const entries = fs.readdirSync(fullPath, {
+        withFileTypes: true,
+      })
+
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          addPackage(path.join(fullPath, entry.name))
+        }
+      }
+    } else {
+      addPackage(fullPath)
+    }
+  }
+
+  return packageDirs
+}
+
+function ensureDir(file) {
+  fs.mkdirSync(path.dirname(file), {
+    recursive: true,
+  })
+}
+
+export function copyFile(from, to) {
+  ensureDir(to)
+
+  fs.copyFileSync(from, to)
+}
+
+function parseEnv(content) {
+  const map = new Map()
+
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim()
+
+    if (!trimmed || trimmed.startsWith('#')) {
+      continue
+    }
+
+    const index = trimmed.indexOf('=')
+
+    if (index === -1) {
+      continue
+    }
+
+    const key = trimmed.slice(0, index).trim()
+
+    map.set(key, trimmed)
+  }
+
+  return map
+}
+
+export function mergeEnvFile(templateFile, targetFile) {
+  if (!fs.existsSync(targetFile)) {
+    copyFile(templateFile, targetFile)
+
+    return {
+      type: 'created',
+    }
+  }
+
+  const templateContent = fs.readFileSync(templateFile, 'utf-8')
+
+  const targetContent = fs.readFileSync(targetFile, 'utf-8')
+
+  const templateEnv = parseEnv(templateContent)
+
+  const targetEnv = parseEnv(targetContent)
+
+  const appendLines = []
+
+  for (const [key, line] of templateEnv) {
+    if (!targetEnv.has(key)) {
+      appendLines.push(line)
+    }
+  }
+
+  if (appendLines.length === 0) {
+    return {
+      type: 'skipped',
+    }
+  }
+
+  const nextContent = [targetContent.trimEnd(), '', ...appendLines, ''].join('\n')
+
+  fs.writeFileSync(targetFile, nextContent)
+
+  return {
+    type: 'merged',
+    added: appendLines.length,
+  }
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@opentiny/tiny-robot-cli",
+  "version": "0.4.1-alpha.0",
+  "description": "CLI to scaffold TinyRobot product projects",
+  "type": "module",
+  "bin": {
+    "tiny-robot-cli": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "node ./bin/cli.js"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.13.0"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^8.3.2",
+    "commander": "^14.0.3",
+    "picocolors": "^1.1.1",
+    "semver": "^7.8.1"
+  },
+  "gitHead": "22cb4503b47f2e1d2134d4a90d02b5643672ef6c"
+}

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>