Agent skill

ai-model-web

Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).

Stars 985
Forks 124

Install this agent skill to your Project

npx add-skill https://github.com/TencentCloudBase/CloudBase-MCP/tree/main/config/source/skills/ai-model-web

SKILL.md

When to use this skill

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

Use it when you need to:

  • Integrate AI text generation in a frontend Web app
  • Stream AI responses for better user experience
  • Call Hunyuan or DeepSeek models from browser

Do NOT use for:

  • Node.js backend or cloud functions → use ai-model-nodejs skill
  • WeChat Mini Program → use ai-model-wechat skill
  • Image generation → use ai-model-nodejs skill (Node SDK only)
  • HTTP API integration → use http-api skill

Available Providers and Models

CloudBase provides these built-in providers and models:

Provider Models Recommended
hunyuan-exp hunyuan-turbos-latest, hunyuan-t1-latest, hunyuan-2.0-thinking-20251109, hunyuan-2.0-instruct-20251111 hunyuan-2.0-instruct-20251111
deepseek deepseek-r1-0528, deepseek-v3-0324, deepseek-v3.2 deepseek-v3.2

Installation

bash
npm install @cloudbase/js-sdk

Initialization

js
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "<YOUR_ENV_ID>",
  accessKey: "<YOUR_PUBLISHABLE_KEY>"  // Get from CloudBase console
});

const auth = app.auth();
await auth.signInAnonymously();

const ai = app.ai();

Important notes:

  • Always use synchronous initialization with top-level import
  • User must be authenticated before using AI features
  • Get accessKey from CloudBase console

generateText() - Non-streaming

js
const model = ai.createModel("hunyuan-exp");

const result = await model.generateText({
  model: "hunyuan-2.0-instruct-20251111",  // Recommended model
  messages: [{ role: "user", content: "你好,请你介绍一下李白" }],
});

console.log(result.text);           // Generated text string
console.log(result.usage);          // { prompt_tokens, completion_tokens, total_tokens }
console.log(result.messages);       // Full message history
console.log(result.rawResponses);   // Raw model responses

streamText() - Streaming

js
const model = ai.createModel("hunyuan-exp");

const res = await model.streamText({
  model: "hunyuan-2.0-instruct-20251111",  // Recommended model
  messages: [{ role: "user", content: "你好,请你介绍一下李白" }],
});

// Option 1: Iterate text stream (recommended)
for await (let text of res.textStream) {
  console.log(text);  // Incremental text chunks
}

// Option 2: Iterate data stream for full response data
for await (let data of res.dataStream) {
  console.log(data);  // Full response chunk with metadata
}

// Option 3: Get final results
const messages = await res.messages;  // Full message history
const usage = await res.usage;        // Token usage

Type Definitions

ts
interface BaseChatModelInput {
  model: string;                        // Required: model name
  messages: Array<ChatModelMessage>;    // Required: message array
  temperature?: number;                 // Optional: sampling temperature
  topP?: number;                        // Optional: nucleus sampling
}

type ChatModelMessage =
  | { role: "user"; content: string }
  | { role: "system"; content: string }
  | { role: "assistant"; content: string };

interface GenerateTextResult {
  text: string;                         // Generated text
  messages: Array<ChatModelMessage>;    // Full message history
  usage: Usage;                         // Token usage
  rawResponses: Array<unknown>;         // Raw model responses
  error?: unknown;                      // Error if any
}

interface StreamTextResult {
  textStream: AsyncIterable<string>;    // Incremental text stream
  dataStream: AsyncIterable<DataChunk>; // Full data stream
  messages: Promise<ChatModelMessage[]>;// Final message history
  usage: Promise<Usage>;                // Final token usage
  error?: unknown;                      // Error if any
}

interface Usage {
  prompt_tokens: number;
  completion_tokens: number;
  total_tokens: number;
}

Best Practices

  1. Use streaming for long responses - Better user experience
  2. Handle errors gracefully - Wrap AI calls in try/catch
  3. Keep accessKey secure - Use publishable key, not secret key
  4. Initialize early - Initialize SDK in app entry point
  5. Ensure authentication - User must be signed in before AI calls

Expand your agent's capabilities with these related and highly-rated skills.

TencentCloudBase/CloudBase-MCP

cloudbase

Essential CloudBase (TCB, Tencent CloudBase, 云开发, 微信云开发) development guidelines. MUST read when working with CloudBase projects, developing web apps, mini programs, backend services, fullstack development, static deployment, cloud functions, mysql/nosql database, authentication, cloud storage, web search or AI(LLM streaming) using CloudBase platform. Great supabase alternative.

985 124
Explore
TencentCloudBase/CloudBase-MCP

skill-authoring

Design, improve, and evaluate reusable agent skills with high-quality SKILL.md files, precise trigger descriptions, progressive disclosure, and testable behavior. This skill should be used when users ask to create a new skill, rewrite or review an existing skill, audit a skill collection such as `config/source/skills` for redundancy or overlap, improve skill trigger quality, organize skill references, or evaluate whether a skill should trigger and behave correctly.

985 124
Explore
TencentCloudBase/CloudBase-MCP

git-workflows

Reusable git delivery workflows derived from local slash commands (commit, push, PR, release notes, and GitHub Actions failure triage with worktree-based fixes).

985 124
Explore
TencentCloudBase/CloudBase-MCP

codebase-audit

Perform a full codebase review, categorize findings by severity, file GitHub issues, then fix each issue in an isolated git worktree and submit PRs. Use this skill when the user asks to audit the codebase, do a comprehensive code review, find and fix security/quality/reliability issues, or run a proactive health check across the entire repository.

985 124
Explore
TencentCloudBase/CloudBase-MCP

manage-local-skills

Analyze, standardize, validate, and sync locally maintained skills into agent skill directories with a `skills` CLI-aligned workflow. Use this skill when Codex needs to turn ad-hoc prompt or rules folders into reusable `SKILL.md`-based skills, install or sync one or more local skills from `./skills` into Claude, Cursor, CodeBuddy, Codex, or similar agent directories, or manage local skill path mappings and symlink or copy installation behavior.

985 124
Explore
TencentCloudBase/CloudBase-MCP

planning-workflows

Spec and no-spec planning workflows derived from local slash commands (requirements, design, tasks).

985 124
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results