技能简介

「CloudBase AI模型网页集成」是一款帮助开发者直接在浏览器端集成腾讯云AI大模型的能力 Skill。它解决了前端工程师在接入AI能力时经常遇到的认证混乱、模型组配置错误、Token计费资格未确认等问题，让AI聊天界面从概念到上线变得顺畅可控。

该 Skill 由腾讯云官方团队（tencentcloudbase）开发和维护，版本 2.23.8，已通过 Skillstore 安全审核（riskLevel: safe），支持 Claude、Codex、Claude Code 三种主流 AI 编码助手。它以 prompt 模板形式提供指导，不包含任何可执行脚本，安全性高。

核心能力

浏览器端直连 AI：绕过后端代理，直接通过 @cloudbase/js-sdk 从浏览器发起 AI 请求，架构更简单

完整的预检查流程：在写代码之前先验证 Token Credits 余额和模型组开启状态，避免白跑一趟

模型组名称与模型 ID 分离：清晰解释 ai.createModel 中 group 名和 model ID 的区别，减少配置混淆

非流式与流式两种输出模式：提供 generateText（普通）和 streamText（流式）两种前端接入示例

自定义模型接入：支持通过 CloudBase AI 模型 API 接入OpenAI兼容的自定义模型

多框架兼容：示例覆盖 React、Vue、Next.js 等主流前端框架

安装配置

安装方式（任选一种）：

方式一：通过 skillstore CLI 安装

npx skillstore add tencentcloudbase/ai-model-web

方式二：手动下载 SKILL.md 到本地

从 https://skillstore.io/skills/tencentcloudbase-ai-model-web.md 获取

环境依赖：Node.js 环境、腾讯云 CloudBase 项目（已开通 AI 模型服务）、@cloudbase/js-sdk

使用步骤

确认计费状态：向 AI 助手说明「我要在网页中加入 AI 对话功能，请先检查腾讯云 Token Credits 余额」

验证模型组就绪：让 AI 助手查询目标模型是否已开启

选择接入模式：根据是否需要流式输出，选择 streamText 或 generateText

编写 SDK 代码：AI 助手会根据模板生成认证初始化、AI 模型创建、文本生成的完整代码

适用场景

React/Vue/Next.js 网页聊天：在业务系统中快速集成 AI 客服或对话模块

运营数据分析看板：接入 AI 模型实现自然语言查询和智能解读

企业内部知识库问答：结合 CloudBase 云开发能力，快速搭建私有知识检索

多轮对话表单：利用流式输出实现更自然的人机交互体验

适用人群

前端开发工程师（React/Vue/Next.js 技术栈）

全栈工程师，需要在网页中快速引入 AI 能力

腾讯云 CloudBase 现有用户，想扩展 AI 功能

产品经理或独立开发者，缺乏后端经验但想给网页加 AI 功能

官方链接

Skill 详情页：https://skillstore.io/skills/tencentcloudbase-ai-model-web GitHub 仓库：https://github.com/tencentcloudbase/skills/tree/main/skills/ai-model-web