ai-model-web_skill

Overview

This skill integrates CloudBase AI models into browser and web applications (React, Vue, Angular, static sites, SPAs) using the @cloudbase/js-sdk. It exposes text generation (generateText) and streaming (streamText) APIs and ships with recommended built-in models such as Hunyuan and DeepSeek. Use it when you want client-side AI text capabilities without running a Node backend. It is not intended for server-side Node.js, WeChat Mini Programs, or image generation.

How this skill works

Initialize the CloudBase SDK in your app entry point, sign in the user (anonymous sign-in supported), then call ai().createModel(provider) to obtain a model instance. generateText returns a single completed response with usage and history, while streamText returns async iterables for incremental text or full data plus promises for final messages and usage. Recommended providers include hunyuan-exp (hunyuan-2.0-instruct-20251111) and deepseek (deepseek-v3.2).

When to use it

• Add text generation features directly in the browser for chat UIs, assistants, or content tools.
• Deliver progressive streaming responses to improve perceived latency for long outputs.
• Call Hunyuan or DeepSeek models from frontend code where a publishable client key is acceptable.
• Build demos, prototypes, or production SPAs that require on-device AI calls without a server middle layer.
• When you need token usage, full message history, and raw model responses in the client.

Best practices

• Initialize the SDK synchronously at the app entry point and authenticate the user before AI calls.
• Prefer streamText for long responses to render incremental output and improve UX.
• Wrap AI calls in try/catch and provide clear retry or fallback behavior for network or model errors.
• Keep accessKey limited and use publishable keys from the CloudBase console; never embed secret keys in client code.
• Choose recommended models (hunyuan-2.0-instruct-20251111, deepseek-v3.2) for best quality and compatibility.

Example use cases

• A chat assistant in a React SPA that streams replies token-by-token for faster perceived response.
• A content generation tool in a single-page app that uses generateText to produce article drafts and shows token usage.
• An in-browser tutor that uses DeepSeek for knowledge retrieval and Hunyuan for instructive responses.
• A demo or sandbox site that authenticates anonymously and showcases different model outputs via the CloudBase client.