skills.rest
study-yang
study-yangCOMMUNITY
Explore all skills by this author →
GitHub

ai-model-web

Integrate AI text generation into browser web apps via @cloudbase/js-sdk.

Updated May 14, 2026
Search Tags:#streaming#ai models#preflight#cloudbase#web frontend#javascript sdk#generatetext
One-click install
npx skills add https://github.com/study-yang/Vieb-Coding-- --skill ai-model-web-study-yang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-model-web
Source: https://github.com/study-yang/Vieb-Coding--/tree/main/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E5%BF%AB%E8%AE%B0/.codebuddy/skills/ai-model-web
Command: npx skills add https://github.com/study-yang/Vieb-Coding-- --skill ai-model-web-study-yang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @cloudbase/js-sdk.

What problem does it solve? Adding AI model calls (Hunyuan, DeepSeek, GLM, Kimi, MiniMax) to a browser-based web app usually tempts developers into building an unnecessary Node.js proxy, and the @cloudbase/js-sdk AI surface is easy to misuse — wrong createModel arguments, unenabled models, missing resource packs, and anonymous-auth failures all cause runtime errors. This Skill provides the correct routing, preflight checks, and code patterns to call AI models directly from the frontend. ## Core Features & Use Cases - Correct SDK usage patterns: Enforces the three legal ai.createModel arguments ("cloudbase", "hunyuan-exp", "custom-*") and places concrete model IDs in the model field of generateText/streamText. - Mandatory two-step preflight: Verifies the Token Credits resource pack (DescribeEnvPostpayPackage) and model group readiness (DescribeAIModels / DescribeManagedAIModelList / UpdateAIModel) before any code is written. - Streaming and non-streaming generation: Provides generateText and streamText patterns with auth gating via auth.getSession(), error handling, and TypeScript type definitions. - Use Case: A developer building a React dashboard wants to add a DeepSeek-powered chat panel; the Skill checks the environment's resource pack, enables deepseek-v4-flash via UpdateAIModel, and generates a streaming browser call with no backend proxy. ## Quick Start Ask the AI to add a streaming DeepSeek chat feature to your React page using @cloudbase/js-sdk, running the CloudBase preflight checks first.

Frequently Asked Questions about ai-model-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I call AI models from a React or Vue frontend without a backend?▼

Use @cloudbase/js-sdk in the browser: initialize cloudbase with your env ID and publishable accessKey, authenticate the user, then call ai.createModel("cloudbase") and use generateText or streamText. No Node.js proxy is needed for Web apps.

What arguments does ai.createModel accept in @cloudbase/js-sdk?▼

createModel accepts exactly three kinds of values: "cloudbase" (the main managed group), "hunyuan-exp" (legacy builtin), or a custom GroupName starting with "custom-" registered via CreateAIModel. Vendor or model names like "deepseek" are invalid; model IDs go in the model field.

Why does my CloudBase AI call fail with model not found or not enabled?▼

No model is enabled by default in the cloudbase group. Run DescribeAIModels to inspect enabled models, check DescribeManagedAIModelList for the exact supported model spelling and pricing, then enable the target model with UpdateAIModel using a full-replacement Models array and Status 1.

Can anonymous users call AI models with @cloudbase/js-sdk?▼

No. Anonymous login is disabled by default for new environments, and anonymous users are denied AI model invocation permissions. Require a verified sign-in (phone, email, username+password, WeChat, or custom) and gate calls with auth.getSession() instead of the deprecated getLoginState().

When should I use ai-model-nodejs instead of calling AI from the browser?▼

Switch to the Node.js skill when the user explicitly needs backend or cloud-function calls, image generation (Node SDK only), server-side keys, or long-running work. WeChat Mini Program scenarios use the ai-model-wechat skill instead.

Related Skills

Explore More Software Engineering Skills→
yyds-xyyds-x

auth-tool-cloudbase

Configure CloudBase authentication providers and login flows via MCP tools.

Community
Advanced
danmaraudadanmarauda

Convex Agents Usage Tracking

Tracks LLM token usage and costs via usageHandler with billing-period persistence and cron invoicing.

Community
Advanced
actionbookactionbook
1.6k

actionbook-web-test

Executes declarative YAML browser tests via Actionbook CLI and generates json-ui HTML reports.

Official
Advanced
TugoukezhangTugoukezhang
8

ai-model-nodejs

Call AI models from Node.js and CloudBase using the CloudBase SDK.

Community
Intermediate