Web - Intelligent Media Services - Alibaba Cloud ドキュメントセンター

このトピックでは、AICallKit SDK を使用して、メッセージング会話用の AI エージェントを Web アプリケーションに統合する方法について説明します。

環境要件

Node 18 以降。
NPM 10 以降。
Webpack 5 以降。

SDK の統合

SDK を統合するには、次のコマンドを実行します。

npm install aliyun-auikit-aicall --save

SDK 使用例

import { AIChatEngine, AIChatAgentInfo, AIChatUserInfo } from 'aliyun-auikit-aicall';

const chatEngine = new AIChatEngine();

chatEngine.on('requestAuthToken', async (userId, callback) => {
  //必須。 アプリサーバーまたは業務サーバー経由で generateMessageChatToken を呼び出して、トークンを取得します。
  // role と nonce はオプションのパラメーターです。
  return new AIChatAuthToken(appId, appSign, token, timestamp, role, nonce);

  // 戻り値が app_id と app_sign を含む JSON オブジェクトの場合は、次のように簡略化できます。
  // return AIChatAuthToken.fromData(data);
});

chatEngine.on('engineStateChange', (state) => {
  // エンジンステータスのコールバック。
});
chatEngine.on('receivedMessage', (message) => {
  // 受信メッセージのコールバック。
});
chatEngine.on('errorOccurs', (error) => {
  // エラーのコールバック。
});
chatEngine.on('receivedCustomMessage', (message) => {
  // 受信カスタムメッセージのコールバック。
});
chatEngine.on('messagePlayStateChange', (message, state) => {
  // メッセージ読み上げステータスのコールバック。
});

const userId = 'xxxx'; // 会話に参加するユーザーの一意の識別子。 業務システムのユーザー ID を使用することをお勧めします。
const agentId = 'xxxx'; // コンソールで作成された AI エージェントの ID。
const sessionId = ''; // 会話セッションの ID。 空の場合、セッション ID はデフォルトで userId と agentId の連結になります。
const region = 'cn-xxxx'; // AI エージェントがデプロイされているリージョン。 リージョンはデフォルトで cn-shanghai になります。
await chatEngine.startChat(new AIChatUserInfo(userId), new AIChatAgentInfo(agentId, region), sessionId);

API リファレンス

概要

クラス/プロトコル	API	説明
AIChatEngine メッセージングエンジンを管理するためのインターフェース	state	現在のエンジン状態を取得します。
	userInfo	現在のセッションに参加しているユーザーに関する情報を取得します。
	sessionId	現在のセッションの一意の識別子を取得します。
	agentInfo	現在のセッションに参加している AI エージェントに関する情報を取得します。
	agentResponseState	エージェントの現在の応答ステータスを取得します。
	voiceIdList	利用可能な音声一覧を取得します。
	startChat	チャットセッションを開始します。
	endChat	チャットセッションを終了します。
	sendMessage	メッセージを送信します。これにより、進行中のエージェントの応答が中断されます。
	queryMessageList	履歴メッセージをリクエストします。
	interruptAgentResponse	現在の返信を中断します。
	deleteMessage	メッセージを削除します。
	startPlayMessage	メッセージの読み上げを開始します。
	stopPlayMessage	メッセージの読み上げを停止します。
	isPlayingMessage	メッセージが読み上げ中かどうかを確認します。
	startPushVoiceMessage	プッシュツートークの音声録音を開始します。ボタンがタップされると、録音が開始され、音声入力がリアルタイムで送信されます。
	finishPushVoiceMessage	プッシュツートークの音声録音を終了します。このメソッドは、ボタンが離されたときに呼び出され、音声メッセージが送信されたことを示します。
	cancelPushVoiceMessage	プッシュツートークの音声録音をキャンセルします。
	createAttachmentUploader	画像、動画、またはその他のファイルを含むメッセージを送信するための添付ファイルアップローダーオブジェクトを作成します。
	destroy	リソースを解放します。
	parseShareAgentChat	共有エージェントに関する情報を解析します。
	generateShareAgentChat	共有エージェントとの会話を開始します。
AIChatEngineEvents メッセージングエンジンのコールバックイベント	errorOccurs	エラーが発生したときにトリガーされます。
	requestAuthToken	ChatEngine が IM ログインを実行する必要がある場合、または AuthToken の有効期限が切れた場合にトリガーされます。
	engineStateChange	エージェントの接続状態が変化したときにトリガーされます。
	receivedMessage	エージェントから新しい返信を受信した場合、または現在の返信ステータスが変化したときにトリガーされます。
	userMessageUpdated	ユーザーが送信したメッセージを更新する必要がある場合にトリガーされます。
	agentResponseStateChange	エージェントの応答ステータスが変化したときにトリガーされます。
	messagePlayStateChange	メッセージの読み上げステータスが変化したときにトリガーされます。
AIChatAttachmentUploader 添付ファイルのアップロードを管理するためのクラス	addAttachment	添付ファイルオブジェクトを追加します。
	removeAttachment	添付ファイルオブジェクトを削除します。
	allUploadSussess	すべての添付ファイルがアップロードされたかどうかを確認します。
AIChatAttachmentUploadEvents 添付ファイルアップロードのコールバック	uploadSuccess	添付ファイルがアップロードされたときにトリガーされます。
AIChatAttachmentUploadEvents 添付ファイルアップロードのコールバック	uploadFailure	添付ファイルのアップロードに失敗したときにトリガーされます。
AIChatAttachmentEvents 添付ファイルオブジェクト	progress	アップロードの進捗状況が更新されたときにトリガーされます。
AIChatAttachmentEvents 添付ファイルオブジェクト	stateChange	アップロードステータスが変化したときにトリガーされます。

AIChatEngineInterface

State

現在のエンジン状態を取得します。

state: AIChatEngineState;

Userinfo

現在のセッションに参加しているユーザーの情報を取得します。

userInfo: AIChatUserInfo;

Sessionid

現在のセッションの一意の識別子を取得します。

sessionId: string;

Agentinfo

現在のセッションに参加している AI エージェントの情報を取得します。

agentInfo: AIChatAgentInfo;

Agentresponsestate

エージェントの現在の応答状態を取得します。

agentResponseState: AIChatAgentResponseState;

VoiceIdList

利用可能な音声一覧を取得します。

voiceIdList: string[];

Startchat

チャットセッションを開始します。

async startChat(userInfo: AIChatUserInfo, agentInfo: AIChatAgentInfo, sessionId?: string);

パラメーター	型	説明
userInfo	AIChatUserInfo	セッションに参加するユーザーの情報。
agentInfo	AIChatAgentInfo	セッションに参加する AI エージェントの情報。
sessionId	string (オプション)	現在のセッションの一意の識別子。空の場合、セッション ID はデフォルトで `userId` と `agentId` の連結になります。

Endchat

チャットセッションを終了します。

async endChat(needLogout: boolean);

パラメーター	型	説明
needLogout	boolean	ユーザーがログアウトする必要があるかどうかを指定します。 false に設定すると、次回 startChat が呼び出されたときの接続時間が短縮されます。

Sendmessage

メッセージを送信します。これにより、進行中のエージェントの応答が中断されます。

async sendMessage(message: AIChatMessage): Promise<AIChatMessage>;

パラメーター	型	説明
message	AIChatMessage	メッセージの内容。

Querymessagelist

履歴メッセージをリクエストします。

async queryMessageList(request: AIChatMessageListRequest): Promise<AIChatMessage[]>;

パラメーター	型	説明
request	AIChatMessageListRequest	リクエストモデル。

InterruptAgentResponse

現在の返信を中断します。

interruptAgentResponse();

Deletemessage

メッセージを削除します。

async deleteMessage(dialogueIdOrMessage: string | AIChatMessage);

パラメーター	型	説明
dialogueIdOrMessage	string \| AIChatMessage	メッセージ ID またはメッセージオブジェクト。

Startplaymessage

メッセージの読み上げを開始します。

async startPlayMessage(message: AIChatMessage, voiceId?: string);

パラメーター	型	説明
message	AIChatMessage	読み上げるメッセージ。
voiceId	string?	音声 ID。

Stopplaymessage

メッセージの読み上げを停止します。

stopPlayMessage();

Isplayingmessage

メッセージが読み上げ中かどうかを確認します。

isPlayingMessage(dialogueId: string): boolean;

Startpushvoicemessage

プッシュツートークの音声録音を開始します。ボタンをタップすると、録音が開始され、音声入力がリアルタイムで送信されます。

async startPushVoiceMessage(request: AIChatSendMessageRequest): Promise<AIChatMessage | undefined>;

Finishpushvoicemessage

プッシュツートークの音声録音を終了します。このメソッドは、ボタンが離されたときに呼び出され、音声メッセージが送信されたことを示します。

async finishPushVoiceMessage(): Promise<AIChatMessage | undefined>;

Cancelpushvoicemessage

プッシュツートークの音声録音をキャンセルします。

cancelPushVoiceMessage();

Createattachmentuploader

画像、動画、またはその他のファイルを含むメッセージを送信するための、添付ファイルアップローダーオブジェクトを作成します。

/**
  * 添付ファイルアップローダーオブジェクトを作成します。 作成できるのは 1 つだけです。
  * @return
*/
public async createAttachmentUploader(): Promise<AIChatAttachmentUploader>;

Destroy

リソースを解放します。

destroy();

ParseShareAgentChat

共有エージェントの情報を解析します。

parseShareAgentChat(shareInfo: string): AIChatAgentShareConfig | undefined;

パラメーター	型	説明
shareInfo	string	共有情報。

GenerateShareAgentChat

共有エージェントとの会話を開始します。

async generateShareAgentChat(shareConfig: AIChatAgentShareConfig, userId: string);

パラメーター	型	説明
shareConfig	AIChatAgentShareConfig	共有情報。
userId	string	ユーザー ID。

AIChatEngineEvents

ErrorOccurs

エラーが発生したときにトリガーされます。

errorOccurs(error: AIChatError): void;

パラメーター	型	説明
error	Error	エラーメッセージ。

RequestAuthToken

ChatEngine が IM ログインを実行する必要がある場合、または AuthToken の有効期限が切れた場合にトリガーされます。

requestAuthToken(userId: string, responseBlock: (authToken: AIChatAuthToken | undefined, error: Error | undefined) => void): void;

パラメーター	型	説明
userId	string	ユーザー ID
responseBlock	(authToken: AIChatAuthToken \| undefined, error: Error \| undefined) => void	トークンコールバック。

Enginestatechange

エージェントの接続状態が変化したときにトリガーされます。

engineStateChange(state: AIChatEngineState): void;

パラメーター	型	説明
state	AIChatEngineState	エージェントの現在の接続状態。

Receivedmessage

エージェントから新しい返信を受信した場合、または現在の返信ステータスが変化したときにトリガーされます。

receivedMessage(message: AIChatMessage): void;

パラメーター	型	説明
message	AIChatMessage	メッセージオブジェクト。

Usermessageupdated

ユーザーが送信したメッセージを更新する必要がある場合にトリガーされます。

userMessageUpdated(message: AIChatMessage): void;

パラメーター	型	説明
message	AIChatMessage	メッセージオブジェクト。

AgentResponseStateChange

エージェントの応答ステータスが変化したときにトリガーされます。

agentResponseStateChange(state: AIChatAgentResponseState, requestId?: string): void;

パラメーター	型	説明
state	AIChatAgentResponseState	応答ステータス。
requestId	string?	現在のセッションの ID。

MessagePlayStateChange

メッセージ読み上げステータスが変化したときにトリガーされます。

messagePlayStateChange(message: AIChatMessage, state: AIChatMessagePlayState): void;

パラメーター	型	説明
message	AIChatMessage	メッセージオブジェクト。
state	AIChatMessagePlayState	読み上げステータス。

AIChatAttachmentUploader

Addattachment

添付オブジェクトを追加します。

/**
   * 添付を追加します。
   * @param attachment
   */
public async addAttachment(attachment: AIChatAttachment);

パラメーター	型	説明
attachment	AIChatAttachment	添付オブジェクト。

Removeattachment

添付オブジェクトを削除します。

 /**
   * 添付を削除します。
   * @param attachmentId
   */
public async removeAttachment(attachmentId: string)

パラメーター	型	説明
attachmentId	string	添付 ID。

AllUploadSussess

すべての添付ファイルがアップロードされたかどうかを確認します。

 /**
   * すべての添付ファイルがアップロードされたかどうかを確認します。
   */
const uploadSussess = uploader.allUploadSussess

AIChatAttachmentUploadEvents

uploadSuccess

添付ファイルがアップロードされたときにトリガーされます。

uploadSuccess: (attachment: AIChatAttachment): void; // uploadSuccess: (attachment: AIChatAttachment): void;

パラメーター	型	説明
attachment	ARTCAIChatAttachment	添付ファイルオブジェクト。

Uploadfailure

添付ファイルのアップロードが失敗したときにトリガーされます。

uploadFailure: (attachment: AIChatAttachment, error: Error): void; // uploadFailure: (attachment: AIChatAttachment, error: Error): void;

パラメーター	型	説明
attachment	ARTCAIChatAttachment	添付ファイルオブジェクト。
error	Error	アップロード失敗の理由。

AIChatAttachmentEvents

進捗状況

アップロードの進捗状況が更新されたときにトリガーされます。

progress: (progress: number) => void; // progress: 現在のアップロードの進捗状況

パラメーター	型	説明
progress	number	現在のアップロードの進捗状況。

状態変更

アップロードステータスが変更されたときにトリガーされます。

stateChange: (state: AIChatAttachmentState) => void; // stateChange: (state: AIChatAttachmentState) => void;

パラメーター

型

説明

state

AIChatAttachmentState

アップロードステータス。有効な値：

Init：初期化中
Uploading：アップロード中
Success：アップロード済み
Failed：アップロード失敗