skills.rest
mrpersimmon
mrpersimmonCOMMUNITY
Explore all skills by this author →
GitHub

ai-model-web

Call CloudBase AI models from React, Vue, Next, or Nuxt apps.

Updated Aug 23, 2026
Search Tags:#streaming#generateText#model enablement#token credits#web ai#cloudbase js-sdk#frontend chat ui
One-click install
npx skills add https://github.com/mrpersimmon/xiao-han-studio --skill ai-model-web-mrpersimmon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-model-web
Source: https://github.com/mrpersimmon/xiao-han-studio/tree/main/.agents/skills/cloudbase/references/ai-model-web
Command: npx skills add https://github.com/mrpersimmon/xiao-han-studio --skill ai-model-web-mrpersimmon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Calling AI models from a Web or frontend app is hard to wire correctly, especially when you must verify token credits, model group readiness, and model enablement before invoking the SDK.

Core Features & Use Cases

  • Browser/Web AI via @cloudbase/js-sdk: Generate text and stream responses for frontend experiences like AI chat UIs and dashboards.
  • Managed-model routing for common providers: Use ai.createModel("cloudbase") and select concrete model IDs in the model field (e.g., DeepSeek, Hunyuan, GLM, Kimi, MiniMax).
  • Mandatory two-step preflight guardrails: Checks Token Credits eligibility and ensures the target model is enabled in the cloudbase group before any code calls.

Quick Start

Use the ai-model-web skill to generate a streamed reply for the prompt "Draft a short onboarding checklist for new users" in a React or Next.js page.

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 directly from a web frontend without a Node.js proxy?▼

You can call AI models directly from a web frontend by using the @cloudbase/js-sdk to generate text and stream responses, bypassing the need for a Node.js proxy. This Skill enables browser-based AI chat UIs and dashboards.

What prerequisites must I check before invoking generateText or streamText in a web app?▼

Before invoking generateText or streamText, you must verify Token Credits eligibility and ensure the target AI model is enabled in the cloudbase group via DescribeAIModels and DescribeManagedAIModelList APIs.

Can I use @cloudbase/js-sdk for streaming AI responses in React or Next.js?▼

Yes, @cloudbase/js-sdk supports streaming AI responses directly in React, Vue, Next.js, and Nuxt SPAs. It routes requests through the cloudbase managed model group for providers like DeepSeek and Hunyuan.

How do I enable a specific AI model before calling it from my frontend application?▼

To enable a specific AI model, you must perform a preflight readiness check using DescribeManagedAIModelList and apply UpdateAIModel if necessary. This ensures the target model ID is active in the cloudbase group before invocation.

Why does my web AI text generation fail despite having the correct SDK installed?▼

Web AI text generation fails if preflight guardrails are skipped, meaning Token Credits eligibility is unverified or the target model is not enabled in the cloudbase group. Mandatory readiness checks via DescribeAIModels must pass first.

Related Skills

Explore More Software Engineering Skills→
williamwang25williamwang25

ai-model-nodejs

Verify Token Credits and enable AI models before Node.js calls on Tencent CloudBase.

Community
Advanced
lxb031018lxb031018
2

ai-model-web

Generate and stream AI text in React, Vue, or Angular apps via @cloudbase/js-sdk.

Community
Intermediate
lostsock1lostsock1
1

frontend-dev

Orchestrate full-stack frontend development with UI design, motion, and AI-generated assets.

Community
Advanced
TencentCloudBaseTencentCloudBase
72

ai-model-web

Generate and stream AI text responses in frontend apps via CloudBase JS SDK.

Official
Intermediate