React で AI の提案を確認する

前提条件

パッケージをインストールします。機能別のサブパスはインポート先として使用します。

bun add @alneas/appkit-react

パッケージのピア依存の範囲に合う React 19 と React DOM 19 を使用してください。

公開インポート

@alneas/appkit-react/ai

実装手順

import * as ai from '@alneas/appkit-react/ai';
console.log(Object.keys(ai).length > 0);

検証

この例を使用するアプリケーションで型チェックしてください。より限定されたエントリーポイントと任意のピア依存の正確な要件は、エクスポートリファレンスを参照してください。パッケージのインポート検査や型チェックは、ホストされたプロバイダーでの動作を保証するものではありません。

トラブルシューティングとよくある問題

React 向けの提案確認と生成 UI のバインディングを提供します。任意のチャットトランスポートには ai SDK のピア依存が必要です。提案は、実行や保存済みレコードの変更を認可するものではありません。

プロンプトインジェクションと確認権限

トランスポートのテキスト、ツール呼び出しの引数、取得したファイル、ツールの出力は信頼できないものとして扱います。任意の ai ピア依存は、SDK のチャットバインディングだけで必要です。チャットトランスポートがツールを承認・実行することはありません。プロバイダーの秘密情報は、サーバー側で管理するエンドポイント内に保持してください。

提案を表示する前に、Core の検証と承認の手順を実施してください。変更不能な正確な対象と引数を表示し、書き込みや機密情報の開示には明示的な承認を必須にします。呼び出し、セッション、登録が変わった場合は承認を無効にしてください。実行時にはサーバーが独立して、リソースの権限、並行処理、永続的な冪等性を適用する必要があります。React コンポーネント、アシスタントのメッセージ、SDK のツール出力イベントは、認可ではありません。

登録済みのコンポーネントだけを描画し、React のテキスト描画のエスケープを維持して、検証済みの必要最小限の出力を射影してください。生成されたコードを評価・実行したり、任意のモデル生成 HTML を埋め込んだりしないでください。キャンセルは完了済みの書き込みをロールバックできません。再試行前に、不確かな作用を実際の状態と照合してください。Core のエラー復旧を参照してください。

アプリケーションの確認操作

ホスト所有のこれらの操作は、アプリケーションの保留中スナップショットを使用します。Core の例にあるコントローラーか、同等のサーバーに接続したアプリケーションフローを用意してください。onSettled はアプリケーションの状態を更新します。これらの操作を描画するだけなら、プロバイダー、データベース、テーマプロバイダーは不要です。アプリケーション全体では、文書に記載されたプロバイダーと明示的なスタイルを維持してください。

import {useState} from 'react';
/** Host-owned review controls; rendering or receiving a tool event never grants permission. */
export function RenameToolReview({example,pending,onSettled}:{
 example:{approve:(id:string)=>Promise<unknown>;reject:(id:string)=>void};
 pending:{approvalId:string;recordId:string;name:string}|null;onSettled:()=>void;
}){
 const [busy,setBusy]=useState(false),[failure,setFailure]=useState(false);
 if(!pending)return null;
 return <section aria-label="Review proposed rename">
  <p>Rename record {pending.recordId} to {pending.name}</p>
  <button disabled={busy} onClick={async()=>{setBusy(true);setFailure(false);try{await example.approve(pending.approvalId);}catch{setFailure(true);}finally{setBusy(false);onSettled();}}}>Approve</button>
  <button disabled={busy} onClick={()=>{example.reject(pending.approvalId);onSettled();}}>Reject</button>
  {failure&&<p role="alert">Execution could not complete. Check the application outcome before retrying.</p>}
 </section>;
}