# AI Model Web

Use this skill when a browser/Web app (React, Vue, Next, Nuxt, static sites, SPAs...

- Repository: https://github.com/TencentCloudBase/CloudBase-AI-Toolkit (1153 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ai-model-web -g -a claude-code -y`
Codex: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ai-model-web -g -a codex -y`
Cursor: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ai-model-web -g -a cursor -y`
Gemini CLI: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ai-model-web -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add TencentCloudBase/CloudBase-AI-Toolkit`

## Description

Use this skill when a browser/Web app (React, Vue, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI, 页面, 前端, 网页) needs AI models via @cloudbase/js-sdk. Default routing for Web/frontend AI, call directly from the browser, do NOT propose a Node.js proxy. Covers generateText and streamText; models via ai.createModel with groups cloudbase, the legacy hunyuan-v3 / hunyuan-exp, or custom-*, model id in the `model` field. MUST run two-step preflight before code, see body. NOT for Node.js backend (use ai-model-nodejs), Mini Program (use ai-model-wechat), or image generation (Node SDK only).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## Sibling skills (local only)

Sibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.

If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin (or the missing skill). Do **not** HTTP-fetch remote skill or protocol markdown into the agent context.

## When to use this skill

Use this skill for **calling AI models in browser/Web applications** via `@cloudbase/js-sdk`.

> 🧭 **Runtime-plane default for Web.** Any time the user's request is framed around a page, a Web app, the frontend, React/Vue/Next/Nuxt, a dashboard UI, or "add AI to my H5", this skill is the default routing target. **Do NOT first propose a Node.js / cloud-function / CloudRun proxy**; `@cloudbase/js-sdk` can call the model from the browser directly. Only switch to `ai-model-nodejs` if the user explicitly asks for a backend/server call, image generation, or a scenario that truly needs server-side keys or long-running work. This decision is independent of which concrete model the user picks, model names (`deepseek-*`, `glm-*`, `hunyuan-*`, `kimi-*`, …) only affect the `model` field, not the routing plane.

**Use it when you need to:**

- Integrate AI text generation into a frontend Web app
- Stream AI responses for a better UX
- Call Hunyuan / DeepSeek / GLM / Kimi / MiniMax models from the browser

**Do NOT use for:**

- Node.js backend or cloud functions → use the `ai-model-nodejs` skill
- WeChat Mini Program → use the `ai-model-wechat` skill
- Image generation → use the `ai-model-nodejs` skill (Node SDK only)
- Runtimes without a CloudBase SDK (native apps, Python, Go, etc.) → use the `http-api-cloudbase` skill (it now includes the `ai_model` OpenAPI spec for direct HTTP calls; do NOT build a custom HTTP proxy)

---

## ⛔ STOP, `ai.createModel(...)` argument is **not** a vendor / model name

The rest: https://github.com/TencentCloudBase/CloudBase-AI-Toolkit/blob/HEAD/config/.claude/skills/ai-model-web/SKILL.md