Add CloudBase AI Models to Web Apps
Browser AI integration can fail when model groups, auth, or Token Credits are not prepared. This skill guides CloudBase preflight, model enabling, and SDK calls for web apps.
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "ai-model-web" from https://skillstore.io/skills/tencentcloudbase-ai-model-web.md and its manifest at https://skillstore.io/api/skills/tencentcloudbase-ai-model-web/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Using "ai-model-web". Add a CloudBase AI summary button to my web app.
Expected outcome:
A short implementation plan covering environment lookup, Token Credits status, enabled model checks, authentication, and browser SDK wiring.
Using "ai-model-web". Make responses stream into my dashboard.
Expected outcome:
A frontend streaming flow that updates the UI incrementally, handles errors, and confirms token usage after completion.
Using "ai-model-web". Use a custom OpenAI-compatible model from CloudBase.
Expected outcome:
A guided onboarding path that registers a custom model group, confirms readiness, and uses that group in the web SDK.
I found no confirmed security issues after reviewing SKILL.md. All static findings are false positives caused by Markdown backticks, documentation URLs, SDK examples, and benign references to model identifiers rather than executable shell behavior or reconnaissance. No prompt injection, secret exfiltration, or malicious network behavior was found.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/tencentcloudbase-ai-model-web/audits/2?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/tencentcloudbase-ai-model-web?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/tencentcloudbase-ai-model-web?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/tencentcloudbase-ai-model-web/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/tencentcloudbase-ai-model-web.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>tencentcloudbase. (2026). ai-model-web security audit report (audit version 2) [Author version 2.23.8]. Skillstore. https://skillstore.io/skills/tencentcloudbase-ai-model-web/audits/2@techreport{tencentcloudbase-tencentcloudbase-ai-model-web-2026,
author = {tencentcloudbase},
title = {ai-model-web security audit report (audit version 2)},
institution = {Skillstore},
year = {2026},
number = {2},
url = {https://skillstore.io/skills/tencentcloudbase-ai-model-web/audits/2},
note = {Author version 2.23.8}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ai-model-web security audit report (audit version 2)"
version: "2.23.8"
type: report
authors:
- name: "tencentcloudbase"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/tencentcloudbase-ai-model-web/audits/2"
identifiers:
- type: other
value: "skillstore:tencentcloudbase-ai-model-web:audit:2"
description: "Skillstore immutable audit report identifier"
Build an authenticated React, Vue, or Next.js chat UI that calls CloudBase AI from the browser.
Check Token Credits, inspect enabled models, show pricing, and enable the selected CloudBase model safely.
Create a repeatable preflight, auth, and SDK pattern for teams adding AI features to web dashboards.
Use ai-model-web to add a simple authenticated generateText call to my React page. Run the required preflight checks first.
Use ai-model-web to implement streaming answers in a Vue dashboard. Verify model readiness and show errors in the UI.
Use ai-model-web to enable the user-selected managed model after checking catalog pricing, then update the frontend SDK call.
Use ai-model-web to onboard an OpenAI-compatible custom model group, confirm readiness, and wire it into a Next.js chat interface.
Author
tencentcloudbaseLicense
MIT
Author version
v2.23.8
Skillstore revision
r1
Ref
24b2fe42a456262f3fd0fb3df72e12d9ed2c32ec
Maintenance freshness
7/18/2026
Usage
0 downloads ยท 1 views
File structure
๐ SKILL.md
Build CloudBase Node Auth Flows
Server-side CloudBase auth work can mix caller identity, user lookup, and custom login details. This skill guides Node.js agents through correct SDK methods and secure backend patterns.
Build CloudBase Mini Program Database Features
Mini Program database work requires correct SDK patterns and security rules. This skill guides Claude, Codex, and Claude Code through CloudBase document database tasks.
Build CloudBase AI Backends in Node.js
Backend AI setup often fails when model groups, credits, and SDK methods are guessed. This skill gives CloudBase Node.js patterns, preflight checks, and model enablement steps.
Design Distinctive UI Prototypes
Generic AI interfaces often lack visual direction and platform-aware detail. This skill guides Claude, Codex, and Claude Code to define design intent before building prototypes.
Plan Complex Coding Changes
Large coding changes often fail when scope, design, and acceptance criteria are vague. This skill guides Claude, Codex, and Claude Code through requirements, design, tasks, and staged confirmation.
Build WeChat Mini Program AI Calls
WeChat Mini Program AI setup has provider, billing, and streaming differences that are easy to misconfigure. This skill guides Claude, Codex, or Claude Code through CloudBase preflight checks and wx.cloud.extend.AI usage.
Improve React useEffect Code
by softaworks
React Effects are often used for state that can be calculated during render, creating extra renders and bugs. This skill guides Claude, Codex, and Claude Code toward safer useEffect patterns and better React alternatives.
Build React Email Templates
by resend
HTML email work is difficult because email clients render styles differently. This skill guides Claude, Codex, and Claude Code through React Email templates, previews, sending, and accessibility.
Implement React View Transitions
by vercel-labs
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Improve Vue 3 TypeScript Practices
by hyf0
Vue TypeScript projects often hit confusing template, router, and Volar errors. This skill gives targeted Vue 3 fixes for Codex, Claude, and Claude Code.
Improve Vue Options API Code
by vuejs-ai
Vue Options API projects often lose type safety and correct this binding. This skill gives focused rules for safer Vue 3 components.
Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.