React(Vite) 快速开始

AI 快速开始
完整开发指引

准备工作

在开始之前，请确保您已完成以下准备：

创建云开发环境：创建云开发环境
安装 Node.js：下载 Node.js（建议 LTS 版本）

Client

配置你的 AI 工具以连接 CloudBase 能力支持本地与托管两种连接方式，详见连接方式。

步骤 1：安装 / 配置 CloudBase

步骤 2：和 AI 对话

在 AI 对话中依次输入以下内容:

prompt

安装 CloudBase Skills：命令 npx skills add tencentcloudbase/cloudbase-skills -y

使用 CloudBase Skills： 使用 CloudBase Skills：在 React(Vite) 应用中集成 CloudBase Web SDK，包括认证和数据库功能

准备工作

在开始之前，请确保您已完成以下准备：

创建云开发环境：创建云开发环境
安装 Node.js：下载 Node.js（建议 LTS 版本）

更多详情请参考：React(Vite) 完整文档

安装 SDK

@cloudbase/js-sdk 可以让您在 Web 端（如 PC Web 页面、微信公众平台 H5 等）使用 JavaScript 访问 CloudBase 服务和资源。

npm

npm i @cloudbase/js-sdk

yarn

yarn add @cloudbase/js-sdk

pnpm

pnpm add @cloudbase/js-sdk

初始化 SDK

新增如下代码到您的 React 项目

src/utils/cloudbase.js

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

export const cloudbase = cloudbaseSDK.init({
  env: import.meta.env.VITE_CLOUDBASE_ENV_ID,
  region: import.meta.env.VITE_CLOUDBASE_REGION,
  accessKey: import.meta.env.VITE_CLOUDBASE_ACCESS_KEY,
});

.env

# 环境ID
VITE_CLOUDBASE_ENV_ID={%ENV_ID%}

# 环境所在地域
VITE_CLOUDBASE_REGION={%REGION%}

# 匿名访问令牌
VITE_CLOUDBASE_ACCESS_KEY={%PUBLISHABLE_KEY%}

身份认证

使用 短信验证码注册 请先前往身份认证/登录方式开启 短信验证码

调用方式：

import { cloudbase } from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ phone_number: phone });

// 验证验证码
const verifyRes = await auth.verify({
  verification_id: verificationId,
  verification_code: code,
});

// 注册（如用户已存在则自动登录）
await auth.signUp({
  phone_number: `+86 ${phone}`,
  verification_code: code,
  verification_token: verifyRes.verification_token,
  name: `user_${phone.slice(-4)}`,
  password: "admin@123",
});

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [verificationId, setVerificationId] = useState("");
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ phone_number: phone });
      setVerificationId(res.verification_id);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage("发送失败：" + error.message);
    }
  };

  // 注册
  const register = async () => {
    try {
      const auth = cloudbase.auth();
      // 验证验证码
      const verifyRes = await auth.verify({
        verification_id: verificationId,
        verification_code: code,
      });
      // 注册（如用户已存在则自动登录）
      await auth.signUp({
        phone_number: `+86 ${phone}`,
        verification_code: code,
        verification_token: verifyRes.verification_token,
        name: `user_${phone.slice(-4)}`,
        password: "admin@123",
      });
      setMessage("注册成功！");
    } catch (error) {
      setMessage("注册失败：" + error.message);
    }
  };

  return (
    <div>
      <label>手机号：</label>
      <input
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        placeholder="13800000000"
      />
      <div>
        <label>验证码：</label>
        <input
          value={code}
          onChange={(e) => setCode(e.target.value)}
          placeholder="验证码"
        />
        <button disabled={!phone} onClick={sendCode}>
          发送验证码
        </button>
      </div>
      <button disabled={!verificationId || !code} onClick={register}>
        注册
      </button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

使用 邮箱验证码注册 请先前往身份认证/登录方式开启 邮箱验证码

调用方式：

import { cloudbase } from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ email });

// 验证验证码
const verifyRes = await auth.verify({
  verification_id: verificationId,
  verification_code: code,
});

// 注册（如用户已存在则自动登录）
await auth.signUp({
  email,
  verification_code: code,
  verification_token: verifyRes.verification_token,
  name: `user_${email.slice(-4)}`,
  password: "admin@123",
});

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [verificationId, setVerificationId] = useState("");
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ email });
      setVerificationId(res.verification_id);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage("发送失败：" + error.message);
    }
  };

  // 注册
  const register = async () => {
    try {
      const auth = cloudbase.auth();
      // 验证验证码
      const verifyRes = await auth.verify({
        verification_id: verificationId,
        verification_code: code,
      });
      // 注册（如用户已存在则自动登录）
      await auth.signUp({
        email,
        verification_code: code,
        verification_token: verifyRes.verification_token,
        name: `user_${email.slice(-4)}`,
        password: "admin@123",
      });
      setMessage("注册成功！");
    } catch (error) {
      setMessage("注册失败：" + error.message);
    }
  };

  return (
    <div>
      <label>邮箱：</label>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="example@email.com"
      />
      <div>
        <label>验证码：</label>
        <input
          value={code}
          onChange={(e) => setCode(e.target.value)}
          placeholder="验证码"
        />
        <button disabled={!email} onClick={sendCode}>
          发送验证码
        </button>
      </div>
      <button disabled={!verificationId || !code} onClick={register}>
        注册
      </button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

使用 账号密码登录 请先前往身份认证/登录方式开启 用户名密码登录

调用方式：

import { cloudbase } from "./utils/cloudbase";

const auth = cloudbase.auth();

await auth.signIn({
  username, // 可以是用户名、手机号或邮箱
  password,
});

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");

  // 登录
  const login = async () => {
    try {
      const auth = cloudbase.auth();
      await auth.signIn({
        username: username, // 可以是用户名、手机号或邮箱
        password: password,
      });
      setMessage("登录成功！");
    } catch (error) {
      setMessage("登录失败：" + error.message);
    }
  };

  return (
    <div>
      <label>账号：</label>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="用户名/手机号/邮箱"
      />
      注：手机号登录请添加区号 +86
      <br />
      <label>密码：</label>
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="请输入密码"
      />
      <br />
      <button disabled={!username || !password} onClick={login}>
        登录
      </button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

使用 短信验证码登录 请先前往身份认证/登录方式开启 短信验证码登录

调用方式：

import { cloudbase } from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ phone_number: `+86 ${phone}` });

// 登录
await auth.signInWithSms({
  verificationInfo: res,
  verificationCode: code,
  phoneNum: `+86 ${phone}`,
});

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [verificationInfo, setVerificationInfo] = useState(null);
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ phone_number: `+86 ${phone}` });
      setVerificationInfo(res);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage("发送失败：" + error.message);
    }
  };

  // 登录
  const login = async () => {
    try {
      const auth = cloudbase.auth();
      await auth.signInWithSms({
        verificationInfo,
        verificationCode: code,
        phoneNum: `+86 ${phone}`,
      });
      setMessage("登录成功！");
    } catch (error) {
      setMessage("登录失败：" + error.message);
    }
  };

  return (
    <div>
      <label>手机号：</label>
      <input
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        placeholder="13800000000"
      />
      <div>
        <label>验证码：</label>
        <input
          value={code}
          onChange={(e) => setCode(e.target.value)}
          placeholder="验证码"
        />
        <button onClick={sendCode} disabled={!phone}>
          发送验证码
        </button>
      </div>
      <button onClick={login} disabled={!verificationInfo || !code}>
        登录
      </button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

使用 邮箱验证码登录 请先前往身份认证/登录方式开启 邮箱验证码

调用方式：

import { cloudbase } from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ email });

// 登录
await auth.signInWithEmail({
  verificationInfo: res,
  verificationCode: code,
  email,
});

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [verificationInfo, setVerificationInfo] = useState(null);
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ email });
      setVerificationInfo(res);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage("发送失败：" + error.message);
    }
  };

  // 登录
  const login = async () => {
    try {
      const auth = cloudbase.auth();
      await auth.signInWithEmail({
        verificationInfo,
        verificationCode: code,
        email,
      });
      setMessage("登录成功！");
    } catch (error) {
      setMessage("登录失败：" + error.message);
    }
  };

  return (
    <div>
      <label>邮箱：</label>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="example@email.com"
      />
      <div>
        <label>验证码：</label>
        <input
          value={code}
          onChange={(e) => setCode(e.target.value)}
          placeholder="验证码"
        />
        <button onClick={sendCode} disabled={!email}>
          发送验证码
        </button>
      </div>
      <button onClick={login} disabled={!verificationInfo || !code}>
        登录
      </button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

使用 Google 授权登录 请先前往身份认证/登录方式开启 Google 授权登录

调用方式：

import { cloudbase } from "./utils/cloudbase";

const auth = cloudbase.auth();

// 步骤1：生成Google授权URL并跳转
const state = Date.now().toString();
localStorage.setItem("google_login_state", state);
const { uri } = await auth.genProviderRedirectUri({
  provider_id: "google",
  provider_redirect_uri: window.location.href,
  state: state,
});
window.location.href = uri;

// 步骤2：使用code换取provider_token
const { provider_token } = await auth.grantProviderToken({
  provider_id: "google",
  provider_redirect_uri: window.location.origin + window.location.pathname,
  provider_code: code,
});

// 步骤3：使用provider_token登录
await auth.signInWithProvider({
  provider_token: provider_token,
});

完整示例：

import { useState, useEffect } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [message, setMessage] = useState("");
  const [isCallback, setIsCallback] = useState(false);

  useEffect(() => {
    // 检查是否是Google回调页面
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    const state = urlParams.get("state");

    if (code && state) {
      setIsCallback(true);
      handleGoogleCallback(code, state);
    }
  }, []);

  // 步骤1：跳转到Google授权页
  const startGoogleLogin = async () => {
    try {
      const auth = cloudbase.auth();
      const state = Date.now().toString(); // 生成唯一标识，防止CSRF攻击

      // 保存state到本地，用于回调时验证
      localStorage.setItem("google_login_state", state);

      // 生成Google授权URL
      const { uri } = await auth.genProviderRedirectUri({
        provider_id: "google", // 固定值，代表Google开放平台
        provider_redirect_uri: window.location.href, // 授权后回调当前页面
        state: state,
      });

      // 跳转到Google授权页
      window.location.href = uri;
    } catch (error) {
      setMessage("跳转失败：" + error.message);
    }
  };

  // 步骤2和3：处理Google回调并完成登录
  const handleGoogleCallback = async (code, state) => {
    try {
      // 验证state是否匹配，防止CSRF攻击
      const savedState = localStorage.getItem("google_login_state");
      if (savedState !== state) {
        setMessage("登录失败：状态验证失败");
        return;
      }

      const auth = cloudbase.auth();

      // 使用code换取provider_token
      const { provider_token } = await auth.grantProviderToken({
        provider_id: "google",
        provider_redirect_uri:
          window.location.origin + window.location.pathname,
        provider_code: code,
      });

      try {
        // 尝试直接登录
        await auth.signInWithProvider({
          provider_token: provider_token,
        });

        setMessage("登录成功！");

        // 清除URL参数并清除本地存储
        localStorage.removeItem("google_login_state");
        window.history.replaceState(
          {},
          document.title,
          window.location.pathname
        );
      } catch (loginError) {
        // 如果是首次Google登录，需要先注册并绑定
        if (loginError.error === "not_found") {
          setMessage("检测到首次Google登录，需要绑定账号...");

          // 这里需要引导用户完成注册流程
          // 例如：收集手机号验证码进行注册
          // 注册成功后调用 bindWithProvider 绑定Google身份

          // 示例：假设已有其他方式注册的账号，直接绑定
          await auth.bindWithProvider({
            provider_token: provider_token,
          });

          // 绑定成功后重新登录
          await auth.signInWithProvider({
            provider_token: provider_token,
          });

          setMessage("绑定并登录成功！");

          // 清除URL参数和本地存储
          localStorage.removeItem("google_login_state");
          window.history.replaceState(
            {},
            document.title,
            window.location.pathname
          );
        } else {
          throw loginError;
        }
      }
    } catch (error) {
      setMessage("登录失败：" + error.message);
      localStorage.removeItem("google_login_state");
    }
  };

  return (
    <div>
      {!isCallback && <button onClick={startGoogleLogin}>Google登录</button>}
      {isCallback && <p>正在处理Google登录...</p>}
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

文档型数据库

查询数据
新增数据
更新数据
删除数据

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 查询 {%TABLE_NAME%} 表前10条数据
const db = cloudbase.database();
const res = await db.collection("{%TABLE_NAME%}").limit(10).get();
console.log(res.data);

完整示例：

import { useState, useEffect } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    // 查询 {%TABLE_NAME%} 表前10条数据
    const db = cloudbase.database();
    const res = await db.collection("{%TABLE_NAME%}").limit(10).get();
    setData(res.data || []);
  };

  return (
    <ul>
      {data.map((item) => (
        <li key={item._id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default Page;

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 新增 {%TABLE_NAME%} 表数据
const db = cloudbase.database();
const res = await db.collection("{%TABLE_NAME%}").add({ title: "示例标题" });
console.log(`新增成功! id: ${res.id}`);

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [message, setMessage] = useState("");

  const addData = async () => {
    try {
      // 新增 {%TABLE_NAME%} 表数据
      const db = cloudbase.database();
      const res = await db
        .collection("{%TABLE_NAME%}")
        .add({ title: "示例标题" });
      setMessage(`新增成功! id: ${res.id}`);
    } catch (error) {
      setMessage("新增失败：" + error.message);
    }
  };

  return (
    <div>
      <button onClick={addData}>新增</button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 更新 {%TABLE_NAME%} 表中 id 为指定值的数据
const db = cloudbase.database();
await db
  .collection("{%TABLE_NAME%}")
  .doc("<数据id>")
  .update({ title: "新标题" });

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [message, setMessage] = useState("");

  const updateData = async () => {
    try {
      // 更新 {%TABLE_NAME%} 表中 id 为指定值的数据
      const db = cloudbase.database();
      await db
        .collection("{%TABLE_NAME%}")
        .doc("<数据id>")
        .update({ title: "新标题" });
      setMessage("更新成功！");
    } catch (error) {
      setMessage("更新失败：" + error.message);
    }
  };

  return (
    <div>
      <button onClick={updateData}>更新</button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 删除 {%TABLE_NAME%} 表中 id 为指定值的数据
const db = cloudbase.database();
await db.collection("{%TABLE_NAME%}").doc("<数据id>").remove();

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [message, setMessage] = useState("");

  const deleteData = async () => {
    try {
      // 删除 {%TABLE_NAME%} 表中 id 为指定值的数据
      const db = cloudbase.database();
      await db.collection("{%TABLE_NAME%}").doc("<数据id>").remove();
      setMessage("删除成功！");
    } catch (error) {
      setMessage("删除失败：" + error.message);
    }
  };

  return (
    <div>
      <button onClick={deleteData}>删除</button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

云存储

上传文件
获取文件链接
下载文件
删除文件

调用方式：

import { cloudbase } from "./utils/cloudbase";

const res = await cloudbase.uploadFile({
  cloudPath: `images/${Date.now()}-${file.name}`, // 上传至云端的路径
  filePath: file,
});
console.log(res.fileID);

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [fileID, setFileID] = useState("");

  const uploadFile = async (e) => {
    const file = e.target.files[0];
    const res = await cloudbase.uploadFile({
      cloudPath: `images/${Date.now()}-${file.name}`, // 上传至云端的路径
      filePath: file,
    });
    setFileID(res.fileID);
  };

  return (
    <div>
      <input type="file" onChange={uploadFile} />
      {fileID && <p>上传成功: {fileID}</p>}
    </div>
  );
}

export default Page;

调用方式：

import { cloudbase } from "./utils/cloudbase";

const res = await cloudbase.getTempFileURL({
  fileList: ["cloud://xxx.png"], // 文件 fileID 列表
});
console.log(res.fileList[0].tempFileURL);

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [fileUrl, setFileUrl] = useState("");

  const getData = async () => {
    const res = await cloudbase.getTempFileURL({
      fileList: ["cloud://xxx.png"], // 文件 fileID 列表
    });
    setFileUrl(res.fileList[0].tempFileURL);
  };

  return (
    <div>
      <button onClick={getData}>获取链接</button>
      {fileUrl && <p>链接: {fileUrl}</p>}
    </div>
  );
}

export default Page;

调用方式：

import { cloudbase } from "./utils/cloudbase";

await cloudbase.downloadFile({
  fileID: "cloud://xxx.png", // 文件 fileID
});

完整示例：

import { cloudbase } from "./utils/cloudbase";

function Page() {
  const downloadFile = async () => {
    await cloudbase.downloadFile({
      fileID: "cloud://xxx.png", // 文件 fileID
    });
  };

  return <button onClick={downloadFile}>下载文件</button>;
}

export default Page;

调用方式：

import { cloudbase } from "./utils/cloudbase";

const res = await cloudbase.deleteFile({
  fileList: ["cloud://xxx.png"], // 文件 fileID 列表
});
if (res.fileList[0].code === "SUCCESS") {
  console.log("删除成功");
}

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [message, setMessage] = useState("");

  const deleteFile = async () => {
    const res = await cloudbase.deleteFile({
      fileList: ["cloud://xxx.png"], // 文件 fileID 列表
    });
    if (res.fileList[0].code === "SUCCESS") {
      setMessage("删除成功！");
    } else {
      setMessage("删除失败！", res.fileList);
    }
  };

  return (
    <div>
      <button onClick={deleteFile}>删除文件</button>
      {message && <p>{message}</p>}
    </div>
  );
}

export default Page;

云函数

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 调用 {%FUNCTION_NAME%} 云函数
const res = await cloudbase.callFunction({
  name: "{%FUNCTION_NAME%}",
  data: {},
});
console.log(res.result);

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [data, setData] = useState(null);

  const getData = async () => {
    // 调用 {%FUNCTION_NAME%} 云函数
    const res = await cloudbase.callFunction({
      name: "{%FUNCTION_NAME%}",
      data: {},
    });
    setData(res.result);
  };

  return (
    <div>
      <button onClick={getData}>调用云函数</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default Page;

大模型

生文模型
生图模型

调用方式：

import { cloudbase } from "./utils/cloudbase";

const res = await cloudbase
  .ai()
  .createModel("{%AI_MODEL_NAME%}")
  .streamText({
    model: "{%AI_SUB_MODEL_NAME%}",
    messages: [{ role: "user", content: "你好" }],
  });

for await (let data of res.dataStream) {
  // 如果有则打印思维链内容
  const think = data?.choices?.[0]?.delta?.reasoning_content;
  if (think) console.log(think);

  // 打印生成文本内容
  const text = data?.choices?.[0]?.delta?.content;
  if (text) console.log(text);
}

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [data, setData] = useState("");
  const [input, setInput] = useState("");

  const getData = async () => {
    const res = await cloudbase
      .ai()
      .createModel("{%AI_MODEL_NAME%}")
      .streamText({
        model: "{%AI_SUB_MODEL_NAME%}",
        messages: [{ role: "user", content: input }],
      });

    let result = "";
    for await (let data of res.dataStream) {
      // 如果有则打印思维链内容
      const think = data?.choices?.[0]?.delta?.reasoning_content;
      if (think) {
        result += think;
      }

      // 打印生成文本内容
      const text = data?.choices?.[0]?.delta?.content;
      if (text) result += text;

      setData(result);
    }
  };

  return (
    <div>
      <input
        value={input}
        placeholder="请输入大模型对话内容"
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={getData}>发送</button>
      <p>{data}</p>
    </div>
  );
}

export default Page;

生图模型通过调用云函数来实现，在生图模型页面点击「一键创建云函数」，函数调用示例如下：

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 调用生图云函数
const res = await cloudbase.callFunction({
  name: "<YOUR_FUNCTION_NAME>",
  data: {
    prompt: "一只可爱的猫咪在阳光下玩耍",
  },
});

const result = res.result;

if (result.success) {
  // 生成成功
  console.log("生成成功!");
  console.log("图片URL:", result.imageUrl);
  console.log("优化后的提示词:", result.revised_prompt);

  // 使用图片
  // 注意：图片URL有效期为24小时，请及时保存或转存
} else {
  // 生成失败
  console.error("生成失败:", result.code, result.message);
}

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [prompt, setPrompt] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);

  const generateImage = async () => {
    setLoading(true);
    setMessage("");
    setImageUrl("");

    try {
      // 调用生图云函数
      const res = await cloudbase.callFunction({
        name: "<YOUR_FUNCTION_NAME>",
        data: {
          prompt: prompt,
        },
      });

      const result = res.result;

      if (result.success) {
        setImageUrl(result.imageUrl);
        setMessage("生成成功！");
      } else {
        setMessage(`生成失败：${result.message}`);
      }
    } catch (error) {
      setMessage("调用失败：" + error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <input
        value={prompt}
        placeholder="请输入图片描述"
        onChange={(e) => setPrompt(e.target.value)}
      />
      <button onClick={generateImage} disabled={!prompt || loading}>
        {loading ? "生成中..." : "生成图片"}
      </button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
      {imageUrl && (
        <div>
          <img src={imageUrl} alt="生成的图片" style={{ maxWidth: "100%" }} />
          <p style={{ fontSize: "12px", color: "#666" }}>
            注意：图片URL有效期为24小时，请及时保存
          </p>
        </div>
      )}
    </div>
  );
}

export default Page;

准备工作​

步骤 1：安装 / 配置 CloudBase

步骤 2：和 AI 对话

准备工作​

安装 SDK​

npm​

yarn​

pnpm​

初始化 SDK​

src/utils/cloudbase.js​

.env​

身份认证​

文档型数据库​

云存储​

云函数​

大模型​

准备工作

准备工作

安装 SDK

npm

yarn

pnpm

初始化 SDK

src/utils/cloudbase.js

.env

身份认证

文档型数据库

云存储

云函数

大模型