跳到主要内容
支持地域：上海

Web 应用

本文介绍 Web 应用 如何快速接入 云开发 AI 能力

准备工作​

指引​

指引一：调用大模型，实现文本生成​

在 Web 应用中，直接调用大模型的文本生成能力，实现最简单的文本生成。 这里以一个"七言绝句"生成器的简单 Demo 为例：

第 1 步：安装 SDK​

npm install @cloudbase/js-sdk

第 2 步：初始化云开发环境​

在代码中，通过以下代码进行云开发环境初始化：

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "<云开发环境ID>",
  accessKey: "<YOUR_PUBLISHABLE_KEY>"
});

其中 "<云开发环境ID>" 需替换为实际云开发环境 ID，"<YOUR_PUBLISHABLE_KEY>" 需替换为实际的 Publishable Key。初始化成功后，就可使用 app.ai() 调用 AI 能力。

第 3 步：创建 AI 模型，并调用生成文本​

// 获取 AI 实例
const ai = app.ai();

// 创建模型实例，这里我们使用 DeepSeek 大模型
const model = ai.createModel("cloudbase");

// 我们先设定好 AI 的系统提示词，这里以七言绝句生成为例
const systemPrompt =
  "请严格按照七言绝句或七言律诗的格律要求创作，平仄需符合规则，押韵要和谐自然，韵脚字需在同一韵部。创作内容围绕用户给定的主题，七言绝句共四句，每句七个字；七言律诗共八句，每句七个字，颔联和颈联需对仗工整。同时，要融入生动的意象、丰富的情感与优美的意境，展现出古诗词的韵味与美感。";

// 用户的自然语言输入，如'帮我写一首赞美玉龙雪山的诗'
const userInput = "帮我写一首赞美玉龙雪山的诗";

// 将系统提示词和用户输入，传入大模型
const res = await model.streamText({
  model: "hy3-preview", // 指定具体的模型
  messages: [
    { role: "system", content: systemPrompt },
    { role: "user", content: userInput },
  ],
});

// 接收大模型的响应
// 由于大模型的返回结果是流式的，所以我们这里需要循环接收完整的响应文本。
for await (let str of res.textStream) {
  console.log(str);
}
// 输出结果：
// "# 咏玉龙雪山\n"
// "皑皑峻岭入云巅，玉骨冰肌傲九天。\n"
// "雪影岚光添胜景，神山圣境韵绵绵。\n"

可见，仅需几行代码，就可以通过云开发直接调用大模型的文本生成能力。

指引二：通过 Agent（智能体）实现智能对话​

通过调用大模型的文本生成接口，可以快速实现一问一答的场景。但对于一个完整的对话功能来说，仅仅有一个大模型的输入、输出还不够，还需要把大模型变为完整的 Agent，才能更好地与用户进行对话。

云开发的 AI 能力不仅提供了原始的大模型接入，还提供了 Agent 接入的能力，开发者可以在云开发上定义自己的 Agent，然后通过 Web 应用直接调用 Agent 进行对话。

第 1 步：安装并初始化 SDK​

npm install @cloudbase/js-sdk
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "<云开发环境ID>",
  accessKey: "<YOUR_PUBLISHABLE_KEY>"
});

其中 "<云开发环境ID>" 需替换为实际云开发环境 ID。初始化成功后，就可使用 app.ai() 调用 AI 能力。

第 2 步：创建一个 Agent​

进入云开发平台-AI，选择模板并创建一个 Agent。

您可以通过 LangChain、LangGraph 等开源框架创建 Agent，也可以对接腾讯元器、智能体开发平台、Dify 等第三方 Agent。

image

复制页面上的 AgentID，即 Agent 的唯一标识，在下面的代码中会用到。

image

第 3 步：在 Web 应用中实现与 Agent 的对话​

刚才创建了一个"小程序开发专家"的 Agent 智能体，下面来试试与它进行对话，看他能不能处理云开发常见的报错问题。 在 Web 应用中，使用以下代码直接调用刚刚我们创建的 Agent，进行对话：

// 获取 AI 实例
const ai = app.ai();

// 用户的输入，这里我们以某个报错信息为例
const userInput =
  "我的小程序这个报错是什么意思：FunctionName parameter could not be found";

const res = await ai.bot.sendMessage({
  botId: "<AgentID>", // 第2步中获取的Agent唯一标识
  msg: userInput,
  history: [],
});

for await (let x of res.textStream) {
  console.log(x);
}
// 输出结果：
// "### 报错解释\n"
// "**错误信息：** `FunctionName \n"
// "parameter could not be found` \n
// "这个错误通常表示在调用某个函数时，\n"
// "指定的函数名参数没有找到。具体来说，\n"
// "可能是以下几种情况之一：\n"
// ……

我们也可以把对话内容记录下来，放在 history 数组中，重复调用 Agent 的接口，从而实现多轮对话：

const res = await ai.bot.sendMessage({
  botId: "<AgentID>", // 第2步中获取的Agent唯一标识
  msg: "请介绍一下云开发",
  history: [
    { role: "user", content: "你好" },
    { role: "assistant", content: "好的，我有什么可以帮到你" },
  ],
});