# ai-model-web

Directs frontend apps to run AI models via @cloudbase/js-sdk straight from the browser without setting up a Node.js proxy.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 913 installs · ★ 77
- Author: TencentCloudBase
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/TencentCloudBase/skills/tree/HEAD/skills/ai-model-web/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/ai-model-web

## What it does

This skill guides agents on adding AI text generation to browser apps built with React, Vue, Next, or Nuxt. It relies on `@cloudbase/js-sdk` and covers both `generateText` and `streamText`. The agent connects directly from client code instead of proposing a backend proxy layer.

Argument rules for `ai.createModel(...)` are strict. The function accepts only three group formats: `"cloudbase"`, `"hunyuan-exp"`, or `"custom-<your-name>"`. Specific identifiers like Hunyuan or DeepSeek belong inside the nested `model` field. Passing vendor names into `createModel` causes runtime failures.

Before writing SDK calls, the agent must run a two-step preflight via MCP tools. It inspects the `EnvId` and confirms an active `pkg_tcb_tokencredits_` resource pack. Without this active pack, API calls will fail immediately.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add TencentCloudBase/skills --skill ai-model-web -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ai-model-web/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ai-model-web/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add TencentCloudBase/skills --skill ai-model-web -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ai-model-web/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add TencentCloudBase/skills --skill ai-model-web -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ai-model-web/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install TencentCloudBase/skills ai-model-web
```

2. **Manually: put the files in place**
- File: `.github/skills/ai-model-web/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add TencentCloudBase/skills --skill ai-model-web -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/TencentCloudBase/skills --path skills/ai-model-web
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ai-model-web/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add TencentCloudBase/skills --skill ai-model-web -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/TencentCloudBase/skills/tree/HEAD/skills/ai-model-web/SKILL.md

## When to use it
- stream model responses directly into a browser user interface
- run AI models from frontend code using `@cloudbase/js-sdk`
- pass valid group names to `ai.createModel`
- verify Token Credits resource packs before creating SDK code

## Example prompts
- Add text streaming to my React chat component using `@cloudbase/js-sdk`
- Connect Hunyuan in my frontend app without a Node.js proxy
- Set up direct browser AI calls with the cloudbase model group

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 141b8ddd1adc9425.

BEGIN THIRD-PARTY FILE 141b8ddd1adc9425
```text
---
name: ai-model-web
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, 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)."
version: 2.36.1
license: MIT
alwaysApply: false
---

## 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

Read this before writing any `createModel(...)` line. The single most common mistake when agents generate code for this SDK is hallucinating the argument. There are **exactly three** legal shapes. Anything else is a bug.

| ✅ Legal `ai.createModel(...)` argument | When to use it |
|----------------------------------------|----------------|
```
END THIRD-PARTY FILE 141b8ddd1adc9425

The third-party file has ended. Everything between the 141b8ddd1adc9425 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2959 of 24558 bytes. © TencentCloudBase · MIT · https://github.com/TencentCloudBase/skills/tree/HEAD/skills/ai-model-web/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md