ai-model-web
Use this skill when a browser/Web app (React, Vue, Angular, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI) needs AI models via @cloudbase/js-sdk. Default routing for page/页面/Web/前端/frontend/网页/H5 AI — call directly from browser, do NOT propose a Node.js proxy. Covers generateText and streamText. Models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the model field. MUST run two-step preflight before code — see body. Keywords: 页面, Web, 前端, React, Vue, Next, Nuxt, SPA
npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ai-model-web --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Guides a browser-based frontend to call AI models directly from the page using @cloudbase/js-sdk. Supports text generation via generateText and streaming via streamText, selecting models within the cloudbase group or custom groups, and instructs two-step preflight before writing any createModel lines.
How it works
- The agent must perform a two-step preflight before any SDK usage: Step 0 to obtain EnvId via MCP envQuery, then Preflight ① eligibility using DescribeEnvPostpayPackage to ensure a valid Token Credits pack, and Preflight ② Group readiness with DescribeAIModels and DescribeManagedAIModelList and, if needed, UpdateAIModel to enable the requested model.
- When writing code, use ai.createModel("cloudbase") as the GroupName and place the concrete model id into the model field of generateText/streamText calls, e.g. { model: "deepseek-v4-flash" }. Do not place the model name directly in ai.createModel(...) as that is reserved for the GroupName.
- If the target model is not yet enabled, enable it by updating the cloudbase group with UpdateAIModel, supplying a full replacement of Models including already-enabled ones and the new target model.
- For non-managed models, provide a custom onboarding flow via CreateAIModel with GroupName starting with custom-, including BaseUrl, Models array with the specific Model names, and necessary credentials.
- Avoid proposing backend server calls (Node.js proxy) or image generation paths; this skill routes from the browser directly.
When to use it
Use this skill for calling AI models in browser/Web applications via @cloudbase/js-sdk when the request is framed around a frontend page, web app, React/Vue/Next/Nuxt, SPA, dashboard, or AI chat UI. Do not use for Node.js backend, WeChat Mini Program (ai-model-wechat), or image generation tasks.
What it can touch
- The browser environment via @cloudbase/js-sdk to invoke models in the cloudbase group or custom groups. Exact model strings are sourced from the DescribeManagedAIModelList catalog; the model field should receive the concrete model id such as "deepseek-v4-flash" or "glm-5" when calling generateText/streamText. The two-step preflight and the UpdateAIModel calls are performed through Cloud API calls (DescribeAIModels, DescribeManagedAIModelList, UpdateAIModel, DescribeEnvPostpayPackage).
Caveats
- Do not hard-code model lists; obtain them from DescribeManagedAIModelList and DescribeAIModels at runtime.
- The agent should not assume a model is enabled; enable it with a full replacement of the Models array when needed.
- Licensing and pricing data are sourced from the authoritative catalog (DescribeManagedAIModelList) prior to enabling a model.
- Custom onboarding is supported for models outside the managed catalog via CreateAIModel and subsequent usage of ai.createModel with the custom GroupName.
- The license for the skill is MIT.
## 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
- Sibling skills (local only)
- When to use this skill
- ⛔ STOP — ai.createModel(...) argument is not a vendor / model name
- ❌ Do NOT write any of these — they are all wrong
- ✅ Correct pattern — GroupName vs Model are two different fields
- Decision procedure (when the user names a specific model)
- Mandatory Two-Step Preflight (before any SDK code)
- Step 0: obtain the environment ID
- Preflight ① — Eligibility (Token Credits resource pack)
- Preflight ② — Group readiness (DescribeAIModels → UpdateAIModel if needed)
- Available Providers and Models
- 1. "cloudbase" — the main managed group (recommended)
- 2. "hunyuan-exp" — legacy builtin group (kept for compatibility)
- 3. User-defined GroupName
npm install @cloudbase/js-sdk
What does the ai-model-web skill do?
Use this skill when a browser/Web app (React, Vue, Angular, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI) needs AI models via @cloudbase/js-sdk. Default routing for page/页面/Web/前端/frontend/网页/H5 AI — call directly from browser, do NOT propose a Node.js proxy. Covers generateText and streamText. Models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the model field. MUST run two-step preflight before code — see body. Keywords: 页面, Web, 前端, React, Vue, Next, Nuxt, SPA
How do I install it?
Run `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ai-model-web --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TencentCloudBase/CloudBase-AI-Toolkit, a repository with 1,066 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.