ai-model-web について
CloudBase を使う Web 開発者向けに、@cloudbase/js-sdk でブラウザーから AI モデルを呼び出し、応答をストリーミングする方法を案内します。SDK コードを書く前の利用資格とモデルグループの確認も定めています。
主な機能
- 01ブラウザーから AI モデルを呼び出す
- 02生成テキストのストリーミング
- 03Token Credits の利用資格確認
- 04モデルグループとモデルの確認・有効化
活用シーン
- 01Web アプリへのテキスト生成の追加
- 02ページでのモデル出力のストリーミング表示
- 03Hunyuan、DeepSeek、GLM の呼び出し
MCP 対応
SDK コードの作成前に MCP ツールで環境、Token Credits リソースパック、モデルグループの状態を確認し、必要に応じてモデルを有効化します。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ tencentcloudbase/ skills --skill ai-model-webインストール後、Claude Code で/ai-model-webを入力して読み込まれたか確認します。
同梱ファイルLICENSE.md
詳細
関連スキル(ローカルのみ)
関連する CloudBase スキルは、このスキルと同じ場所に配置されています。../auth-tool-cloudbase/SKILL.md のようなローカル相対パスを使用してください。
参照先の関連スキルファイルがこの環境にない場合は、CloudBase プラグイン一式(または不足しているスキル)のインストールをユーザーに依頼してください。リモートのスキルやプロトコルの Markdown を HTTP で取得して、エージェントのコンテキストに読み込んではいけません。
このスキルを使用する場面
@cloudbase/js-sdk を使用して、ブラウザー/Web アプリケーションから AI モデルを呼び出す場合に、このスキルを使用してください。
🧭 Web ではランタイムプレーンがデフォルトです。 ユーザーの依頼がページ、Web アプリ、フロントエンド、React/Vue/Next/Nuxt、ダッシュボード UI、または「H5 に AI を追加したい」といった内容の場合は、常にこのスキルをデフォルトのルーティング先にしてください。最初に Node.js/クラウド関数/CloudRun プロキシを提案してはいけません。
@cloudbase/js-sdkを使えば、ブラウザーからモデルを直接呼び出せます。ユーザーがバックエンド/サーバーからの呼び出し、画像生成、またはサーバー側のキーや長時間実行処理を本当に必要とするシナリオを明示的に求めた場合に限り、ai-model-nodejsに切り替えてください。この判断は、ユーザーが選ぶ具体的なモデルとは無関係です。モデル名(deepseek-*、glm-*、hunyuan-*、kimi-*など)はmodelフィールドにのみ影響し、ルーティングプレーンには影響しません。
次の場合に使用してください:
- フロントエンドの Web アプリに AI テキスト生成を組み込む
- UX を向上させるため、AI の応答をストリーミングする
- ブラウザーから Hunyuan/DeepSeek/GLM/Kimi/MiniMax モデルを呼び出す
次の場合には使用しないでください:
- Node.js バックエンドまたはクラウド関数 →
ai-model-nodejsスキルを使用 - WeChat ミニプログラム →
ai-model-wechatスキルを使用 - 画像生成 →
ai-model-nodejsスキルを使用(Node SDK のみ) - CloudBase SDK のないランタイム(ネイティブアプリ、Python、Go など)→
http-api-cloudbaseスキルを使用(直接 HTTP 呼び出し用のai_modelOpenAPI 仕様が追加されています。独自の HTTP プロキシを構築してはいけません)
⛔ 停止 — ai.createModel(...) の引数はベンダー名/モデル名ではありません
createModel(...) の行を書く前に、これを読んでください。エージェントがこの SDK のコードを生成する際に最もよくある間違いは、引数を誤って作り出すことです。使用できる形式は厳密に 4 種類です。それ以外はすべてバグです。
✅ 使用可能な ai.createModel(...) の引数 | 使用する場面 |
|---|---|
"cloudbase" | 新規プロジェクト向けの主要なマネージドグループ(TokenHub を利用したマルチベンダープール)。ベンダーと具体的なモデルは、generateText/streamText の model フィールドに指定します。例:{ model: "deepseek-v4-flash" }。デフォルトで有効なモデルはありません。SDK を呼び出す前に必ず DescribeAIModels を確認し、対象モデルがなければ UpdateAIModel で有効にしてください。 |
"hunyuan-v3" | 廃止予定のレガシープラングループ。 利用できるのは hy3 のみで、プラットフォームはこのグループに新しいモデルを追加しません。既存のコードは引き続き動作しますが、新しいコードでは cloudbase と { model: "hy3" } を使用してください。 |
"hunyuan-exp" | 現在の環境について、DescribeAIModels がこの旧レガシービルトイングループを明示的に返す場合に限り使用してください。元のデフォルトモデル hunyuan-2.0-instruct-20251111 はオフラインです(2026-05-31)。この ID を指定してはいけません。 |
"custom-<your-name>" | CreateAIModel で登録した、ユーザー定義の GroupName。custom- で始まる必要があります(例:custom-kimi、custom-openai-compat)。 |
❌ 次のいずれも記述してはいけません — すべて誤りです
ai.createModel("deepseek") // wrong — that's a vendor, not a GroupName
ai.createModel("deepseek-v4-flash") // wrong — that's a model name, goes in the `model` field
ai.createModel("hunyuan") // wrong — vendor family, not a GroupName
ai.createModel("hunyuan-2.0-instruct-20251111") // wrong — model name
ai.createModel("glm") / ai.createModel("kimi") / ai.createModel("minimax") // wrong — vendor names
ai.createModel("openai") / ai.createModel("moonshot") // wrong — vendor names
ai.createModel("custom") // wrong — placeholder; use your real custom-<name>
ai.createModel(modelName) // wrong — do not reuse the variable that holds the model id
✅ 正しいパターン — GroupName と Model は別々のフィールドです
const model = ai.createModel("cloudbase"); // ← GroupName
await model.generateText({
model: "deepseek-v4-flash", // ← concrete model id
messages: [...]
});
意思決定手順(ユーザーが特定のモデルを指定した場合)
- ユーザーが「DeepSeek v3.2 を使う」/「hunyuan instruct を使う」/「Kimi k2.6 を使う」/「GLM-5 を使う」/…と言います。
createModel("cloudbase")はそのままにします。- モデル ID を
modelフィールドに設定します:{ model: "deepseek-v3.2" }、{ model: "hy3" }、{ model: "kimi-k2.6" }、{ model: "glm-5" }、… - モデルがすでに有効になっていると決めつけないでください。 SDK 呼び出しを書く前に、
DescribeAIModels({ GroupName: "cloudbase" }).Models[]にモデルがあることを確認します。ない場合は、DescribeManagedAIModelListを呼び出して、プラットフォームがサポートする正確なModel名を確認してください(大文字と小文字は区別されます。綴りを推測しないでください)。その後、Status: 1を指定してUpdateAIModelで有効にします(Modelsは全置換なので、すでに有効なモデルすべてと新しいモデルを再送信することを忘れないでください)。
ai.createModel(を入力しようとしていて、括弧内の値がベンダー名、モデル名、または推測した値なら、いったん止めてください。上記の正当な値4つのいずれかである可能性が非常に高いです。
必須の2段階事前確認(SDK コードを書く前)
AI 関連の SDK コードを生成する前に、2段階の事前確認(①利用資格、②グループの準備状況)を実行してください。createModel(...) をすぐに出力し、ユーザーに実行時エラーをデバッグさせると、はるかに大きなコストがかかります。
ステップ 0:環境 ID の取得
MCP ツール queryEnv を action=info で呼び出し、応答から EnvId を読み取ります。以降の確認と購入リンクでは、すべてこの EnvId を使用します。
事前確認 ① — 利用資格(Token Credits リソースパック)
MCP ツールを呼び出します:
callCloudApi(service="tcb", action="DescribeEnvPostpayPackage", params={ EnvId })
合格条件(すべて必須):
-
envPostpayPackageInfoListに少なくとも1つのエントリが含まれている -
そのエントリの
postpayPackageIdがpkg_tcb_tokencredits_で始まっている -
そのエントリの
statusが[3, 4]に含まれていない(3 / 4 は通常、期限切れ/無効を意味します。実際の応答を優先してください) -
❌ 条件を満たさない → コードの記述を止め、
{envId}を実際の ID に置き換えて、次の内容をユーザーに提示します:現在の環境には、有効な Token Credits リソースパックがありません。AI API を呼び出す前に購入してください: https://buy.cloud.tencent.com/lowcode?buyType=resPack&envId={envId}&resourceType=token
購入が完了したらお知らせください。リソースパックの状態を再確認します。
-
✅ 条件を満たす → 事前確認 ② に進みます。
パラメーターの大文字・小文字の形式は、仕様上 PascalCase です。呼び出しが
InvalidParameterを返した場合は、camelCase(envId/envPostpayPackageInfoList)に切り替えて、実際の応答を優先してください。ミニプログラムのシナリオには、追加の成長プランの分岐があります。ai-model-wechatスキルに切り替えてください。
事前確認 ② — グループの準備状況(DescribeAIModels → 必要に応じて UpdateAIModel)
利用資格があるだけでは不十分です。まだ createModel("cloudbase") を呼び出さないでください。 まず、対象の GroupName が環境内に存在し、Status=1 であること、また対象の Model がその Models[] に含まれていることを確認します。
-
現在の環境で設定されているグループを一覧表示します:
callCloudApi(service="tcb", action="DescribeAIModels", params={ EnvId })AIModelGroups: AIModelGroup[]が返されます。各AIModelGroupには、GroupName、Type(builtin/custom)、Models: [{ Model, EnableMCP, Tags }]、Status(1 = オン / 2 = オフ)、BaseUrl、Secret、Remarkが含まれます。メインの管理対象GroupNameはcloudbaseです。 -
モデルがすでに有効になっていると思い込まないでください。
cloudbaseグループのAIModelGroups[?].Models[].Modelを確認します。対象モデル(ユーザーが指定していない場合は、deepseek-v4-flashなど、デフォルトとして使用するモデル)が見つからない場合は、ステップ 4 に進んで有効にします。まだcreateModel("cloudbase")は呼び出さないでください。cloudbaseグループ自体が見つからない場合、またはStatus=2の場合も、ステップ 4 に進んでください。 -
ユーザーが管理カタログに含まれるモデルを指定した場合(例:
deepseek-v3.2、hy3、glm-5、kimi-k2.6など):そのModelがcloudbaseグループのModels[]にすでに含まれているか確認します。含まれていない場合は、ステップ 4 に進みます。モデル ID の正確な表記を推測しないでください。まずDescribeManagedAIModelListで正式な表記を確認してください(ステップ 4 で説明します)。 -
管理対象モデルを有効化/追加します(必ず最初に信頼できるカタログと料金を確認します):
callCloudApi(service="tcb", action="DescribeManagedAIModelList", params={ EnvId })ManagedAIModelGroup[]が返されます。各グループには、GroupName(例:cloudbase)、Remark、およびModels: [{ Model, EnableMCP, ModelSpec{ContextLength, MaxInputToken, MaxOutputToken}, ModelChargingInfo[{Type, InputPrice, OutputPrice, InputOutputUnit, CachePrice}] }]が含まれます。対応モデル名と料金を確認できる唯一の信頼できる情報源です。記憶をもとに推測しないでください。UpdateAIModelの呼び出しには、ここで返されたModel文字列をそのまま使用してください。 有効化する前に、料金もユーザーに提示してください。次に有効化します(注意:
Modelsは全件置換です。有効化済みモデルと新しいモデルを、必ずまとめて再送してください):callCloudApi(service="tcb", action="UpdateAIModel", params={ EnvId, GroupName: "cloudbase", Models: [ // resend every model that DescribeAIModels already showed as enabled { Model: "<already-enabled model, e.g. deepseek-v4-flash>" }, // append the newly-requested one, using the exact spelling from DescribeManagedAIModelList { Model: "<target model>" } ], Status: 1 }) -
要求されたモデルが管理カタログに含まれていない場合(
DescribeManagedAIModelListで見つからない場合)→ 次のセクション「カスタムオンボーディング(管理カタログ外のモデル)」に進みます。
すべての Action で
service=tcb、Version=2018-06-08を使用します。パラメーターは PascalCase(EnvId/GroupName/Models/Status)です。呼び出しがInvalidParameterを返した場合に限り、camelCase に切り替えてください。
利用可能なプロバイダーとモデル
ai.createModel(<GroupName>) が受け付ける値は、正確に 4 種類です。
1. "cloudbase" — メインの管理対象グループ(推奨)
GroupName: "cloudbase"、Type: "builtin"、Remark: "腾讯云开发"(Tencent CloudBase)- Tencent Cloud TokenHub を基盤とする、複数のベンダーを対象とした統合管理プールです。Hunyuan(HY 2.0 Instruct、HY 2.0 Think、Hunyuan-role、Hy3 プレビューなど)、DeepSeek(DeepSeek-V4-Pro、DeepSeek-V4-Flash、Deepseek-v3.2、Deepseek-v3.1、Deepseek-r1-0528、Deepseek-v3-0324 など)、Zhipu GLM(GLM-5、GLM-5-Turbo、GLM-5.1、GLM-5V-Turbo)、Kimi(K2.5、K2.6)、MiniMax(M2.5、M2.7)などを利用できます。提供モデルは随時変更されます。アプリケーションコードに特定の SKU をハードコードしないでください。実行時に確認してください。
- デフォルトで有効になっているモデルはありません。 環境で実際に有効になっているモデルを確認するため、必ず最初に
DescribeAIModelsを呼び出してください。対象モデルが見つからない場合は、信頼できるカタログと料金を確認するためにDescribeManagedAIModelListを呼び出し、その後 SDK を呼び出す前にUpdateAIModel(Status: 1、Modelsは全件置換)で有効化してください。 - 信頼できるカタログと料金:
DescribeManagedAIModelList - 環境で有効なモデルの一覧:
DescribeAIModels
2. "hunyuan-v3" — レガシーのプラングループ(廃止予定)
hy3のみです。このグループに新しいモデルが追加されることはなく、廃止に向けて移行中です。移行先はcloudbase+{ model: "hy3" }です- 既存のコードでは引き続き使用できます。
createModel("hunyuan-v3")をcreateModel("hy3")に「修正」しないでください。hy3はモデル ID であり、GroupName ではありません - 主にミニプログラム成長プラン環境で関係します(
ai-model-wechatを参照)
3. "hunyuan-exp" — 旧レガシー組み込みグループ(互換性のため維持)
- 環境が明示的に返す場合を除き、Web から使用しないでください(そのフローでは
ai-model-wechatスキルに切り替えてください) - 元のデフォルトモデル
hunyuan-2.0-instruct-20251111は 2026-05-31 にオフラインになりました。このモデル ID を指定しないでください。このグループが現在公開しているモデルは、DescribeAIModels({ GroupName: "hunyuan-exp" }).Models[]から読み取る必要があります
4. ユーザー定義の GroupName
CreateAIModelで登録します(次のセクションを参照)。カスタムGroupNameは 必ずcustom-で始める必要があります(例:custom-kimi、custom-moonshot、custom-openai-compat)。この命名規則により、プラットフォームが将来追加する可能性のある組み込み/ベンダーの GroupName(cloudbase、hunyuan-exp、deepseek、glm、kimi、minimax、…)との衝突を防げます- 例:
createModel("custom-kimi")、createModel("custom-openai-compat")
DescribeAIModelsがその正確なGroupNameを明示的に返した場合を除き、createModel("deepseek")やcreateModel("custom")のような推測に基づく指定は絶対に行わないでください(古い環境では、過去のdeepseek/hunyuan-exp組み込みグループが残っている場合があります。互換性のため引き続き使用できますが、新しいプロジェクトでは必ずcloudbaseを使用してください)。
カスタム登録(管理対象カタログ外のモデル)
ユーザーが管理対象外のモデル(セルフホスト型、企業内モデル、サードパーティの OpenAI 互換エンドポイントなど)を呼び出したい場合、拒否しないでください。登録手順を案内してください。
オプション 1:コンソールでの手続き(推奨、ユーザーが操作)
https://tcb.cloud.tencent.com/dev?envId={envId}#/ai
オプション 2:プログラムによる登録(CreateAIModel)
callCloudApi(service="tcb", action="CreateAIModel", params={
EnvId: "<envId>",
GroupName: "custom-<your-name>", // MUST start with "custom-" (e.g. custom-kimi, custom-openai-compat); never start with "cloudbase"
BaseUrl: "<OpenAI-compatible endpoint, e.g. https://api.moonshot.cn/v1>",
Models: [
{ Model: "<model name, e.g. kimi-k2.5>", EnableMCP: true }
],
Remark: "<optional remark>",
Status: 1,
Secret: { ApiKey: "<vendor api key supplied by the user>" }
})
登録後、DescribeAIModels でグループが準備できていることを確認し、コードから ai.createModel("<the GroupName you just registered>") を呼び出してください。モデルの追加/削除、キーのローテーション、BaseUrl の変更には UpdateAIModel を使用してください(Models は全置換であることに注意してください)。カスタムグループを削除するには DeleteAIModel を使用します(組み込みグループは削除できません)。
カスタムモデルの料金はサードパーティプロバイダーが請求し、Token Credits リソースパックからは差し引かれません。フィールドの大文字/小文字は実際のコントラクトに従います。
InvalidParameterが返された場合は camelCase に切り替えてください。
インストール
npm install @cloudbase/js-sdk
初期化
⚠️ 匿名サインインをデフォルトとして使用しないでください。 新しい環境では匿名ログインはデフォルトで無効になっており、既存の非アクティブな環境も自動的に無効化されています。匿名ログインを手動で有効にした場合でも、匿名ユーザーにはデフォルトで AI モデルの呼び出し権限が付与されません。AI モデルスキルでは、特定のログイン UI を指定していません。この点は次のスキルに委ねてください。
- ログインプロバイダーの有効化/設定(電話番号の SMS、メール、WeChat Open Platform、ユーザー名+パスワード、OAuth など)→
auth-tool-cloudbaseスキルに従ってください(callCloudApiを使用したバックエンド設定)。- ブラウザーで実際のサインインフローを構築(ログインフォーム、コールバック、セッションのガード)→
auth-web-cloudbaseスキルに従ってください(@cloudbase/js-sdkの認証 API、例:signInWithPassword、signInWithPhone、getSession)。AI 機能で
signInAnonymously()にフォールバックしないでください。匿名ユーザーは AI モデルを呼び出せません。ユーザーが明示的に希望し、トレードオフを了承した場合に限り、AI を使わない読み取り専用のデモで匿名ログインを使用してください。
import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({
env: "<YOUR_ENV_ID>",
accessKey: import.meta.env.VITE_PUBLISHABLE_KEY // auto-provision via queryAppAuth / manageAppAuth, write to .env.local (see auth-web-cloudbase prerequisites)
});
const auth = app.auth;
// CRITICAL: Use auth.getSession() to check login — NOT the deprecated getLoginState().
// getLoginState() returns uid even without real login (just accessKey), causing false positives.
// getSession() returns data.session === undefined when no real login exists.
// Anonymous users are DENIED AI model permissions — calling AI without real login will fail.
const { data: sessionData } = await auth.getSession();
if (!sessionData?.session || sessionData.session.user?.is_anonymous) {
// No real login or anonymous session — route to sign-in page
window.location.href = "/login";
return;
}
const ai = app.ai();
重要な注意事項:
- トップレベルのインポートを使って同期的に初期化してください。
accessKeyを使うと、getLoginState()が誤解を招く認証データを返します。非推奨のgetLoginState()は、実際にログインしていなくてもuidを含むオブジェクトを返すため、単純な!!loginStateのチェックが機能しません。代わりにauth.getSession()を使用してください。実際にログインしていない場合はdata.session === undefinedが返されるため、!!data.sessionを信頼できる認証ゲートとして使用できます。- AI 機能を使用する前に、ユーザーは検証済みのログイン(電話番号、メール、WeChat、ユーザー名+パスワード、カスタム)で認証されている必要があります。匿名ユーザーには AI モデルの権限が付与されません。具体的なフローは
auth-web-cloudbaseスキルの責任範囲です。 accessKeyは CloudBase コンソールから取得してください。
generateText() — 非ストリーミング
前提条件: 2 段階の事前チェック(利用資格+グループの準備状況)が完了し、対象モデルが
DescribeAIModels({ GroupName: "cloudbase" }).Models[]に存在することを確認済みである必要があります。存在しない場合は、すでにUpdateAIModelで有効化されているはずです。以下の例では説明のためにdeepseek-v4-flashを使用しています。ユーザーが指定した実際のモデルに置き換えてください。
const model = ai.createModel("cloudbase");
const result = await model.generateText({
model: "deepseek-v4-flash", // must already be enabled in this env (DescribeAIModels → UpdateAIModel)
messages: [{ role: "user", content: "Give me a one-paragraph intro to Li Bai." }],
});
console.log(result.text); // generated text string
console.log(result.usage); // { prompt_tokens, completion_tokens, total_tokens }
console.log(result.messages); // full message history
console.log(result.rawResponses); // raw model responses
streamText() — ストリーミング
前提条件: 2 段階の事前チェックが完了している必要があります。
const model = ai.createModel("cloudbase");
const res = await model.streamText({
model: "deepseek-v4-flash",
messages: [{ role: "user", content: "Give me a one-paragraph intro to Li Bai." }],
});
// Option 1: iterate the text stream (recommended)
for await (let text of res.textStream) {
console.log(text); // incremental text chunks
}
// Option 2: iterate the data stream for full response chunks
for await (let data of res.dataStream) {
console.log(data); // full response chunk with metadata
}
// Option 3: access final results
const messages = await res.messages; // full message history
const usage = await res.usage; // token usage
エラー処理パターン
const model = ai.createModel("cloudbase");
try {
const result = await model.generateText({
model: "deepseek-v4-flash",
messages: [{ role: "user", content: "Generate a concise onboarding checklist." }],
});
console.log(result.text);
} catch (error) {
console.error("Failed to call CloudBase AI from Web", error);
}
型定義
interface BaseChatModelInput {
model: string; // required: model name
messages: Array<ChatModelMessage>; // required: message array
temperature?: number; // optional: sampling temperature
topP?: number; // optional: nucleus sampling
}
type ChatModelMessage =
| { role: "user"; content: string }
| { role: "system"; content: string }
| { role: "assistant"; content: string };
interface GenerateTextResult {
text: string; // generated text
messages: Array<ChatModelMessage>; // full message history
usage: Usage; // token usage
rawResponses: Array<unknown>; // raw model responses
error?: unknown; // error if any
}
interface StreamTextResult {
textStream: AsyncIterable<string>; // incremental text stream
dataStream: AsyncIterable<DataChunk>; // full data stream
messages: Promise<ChatModelMessage[]>;// final message history
usage: Promise<Usage>; // final token usage
error?: unknown; // error if any
}
interface Usage {
prompt_tokens: number;
completion_tokens: number;
total_tokens: number;
}
ベストプラクティス
- まず2段階の事前確認を実行します — ①利用資格(
DescribeEnvPostpayPackageを使用した Token Credits リソースパックの確認)+②グループの準備状況(有効になっているものを確認するDescribeAIModels、正式な対応モデルカタログを確認するDescribeManagedAIModelList、対象モデルが見つからない場合はModels[]全体を置き換えてStatus: 1を指定するUpdateAIModel)。事前確認を省略すると、実行時に「model not found」/「model not enabled」エラーが発生します。 - モデルがすでに有効になっていると決めつけないでください —
deepseek-v4-flashも、hunyuan-*も、その他のモデルも同様です。まず必ずDescribeAIModelsで確認してください。対象モデルが見つからない場合は、DescribeManagedAIModelListで正確なModel文字列を調べ(スペルを推測したり、ベンダーのプレフィックスを作ったりしないでください)、続けてUpdateAIModelで有効にします。 createModelが受け付ける値は、次の4種類だけです —"cloudbase"(メインのマネージドグループ)、"hunyuan-v3"(旧プラングループ。hy3のみで、廃止予定)、"hunyuan-exp"(さらに古い組み込みモデル)、またはCreateAIModelで登録したユーザー定義の GroupName(必ずcustom-で始めてください。例:custom-kimi、custom-openai-compat)。createModel("deepseek")/createModel("kimi")/createModel("custom")のように推測して指定することは絶対にしないでください。- SDK のメソッド名やパラメーターを作り出さないでください。 この SKILL.md は
@cloudbase/js-sdkの AI API に関する正式なリファレンスです。コードを書く前に、ここ(または以下の「型定義」セクション)でメソッドのシグネチャを確認してください。ここに記載されていないメソッドやフィールドがある場合は、作業を止めて確認を求めるか、MCP ツールを使って実際の契約を確認してください。推測は禁物です。 - 新しいマネージドモデルを有効にする前に料金を提示します —
DescribeManagedAIModelListはModelSpec(コンテキスト長、最大入出力トークン数)とModelChargingInfo(入力/出力/キャッシュの料金、課金単位)を返します。UpdateAIModelを呼び出す前に、料金をユーザーに提示してください。 - 長い応答にはストリーミングを使用します — 体感レイテンシーが改善し、対話性も高まります。
- エラーを適切に処理します — AI 呼び出しを try/catch で囲んでください。
accessKeyを安全に管理します — 公開可能なキーを使用し、シークレットキーは使用しないでください。- 早めに初期化します — アプリのエントリーポイントで SDK をセットアップし、ルーティングの前に認証と AI の両方を利用できる状態にします。
- AI 機能に匿名認証を使用しないでください — 新しい環境では匿名ログインはデフォルトで無効になっており、匿名ユーザーには AI モデルの権限が付与されません。AI API を呼び出す前に、確認済みのサインイン(電話番号、メールアドレス、ユーザー名+パスワード、WeChat、カスタム)を必須としてください。プロバイダーの設定は
auth-tool-cloudbaseスキルに、ブラウザーでのサインインフローはauth-web-cloudbaseスキルに委任してください。AI モデルスキルではauth.getSession()を確認し、呼び出しを許可する前にloginTypeを検証します。 - 「事前確認の失敗」と「モデル呼び出しの失敗」を区別します — 前者の場合、ユーザーはリソースパックを購入するか
UpdateAIModelを呼び出す必要があります。後者は、プロンプト/パラメーター/ネットワークの問題です。それぞれに適した異なる案内をユーザーに提示してください。 - TypeScript では、SDK の型エラーを抑えるために
anyを使用しないでください。 SDK には独自の型定義が含まれています。エラーが出た場合は、unknownと型ガードで型を絞り込むか、実際に使用する形状に合わせて正確なinterfaceを記述するか、ローカルの.d.tsで型を拡張してください。: any、as any、@ts-ignore、@ts-nocheckは絶対に使用しないでください。web-developmentスキルの Engineering constitution を参照してください。 - 完了を報告する前に、自分で検証します。
tsc --noEmitとプロジェクトのビルドを実行し、agent-browserでページを開いて、実際に AI 呼び出しを行ってください。次の点を確認します。(a) テキストストリームが UI に届くこと、(b) 新たなコンソールエラーがないこと、(c)result.usageがゼロ以外であること。根拠なしに「動作するはずです」と言うのは認められません。web-development/browser-testing.mdに従ってください。