Need to configure your backend?See Build a Backend →

レスポンスコンポーネント

レスポンスコンポーネントは、AIアシスタントが応答できるカスタムUIコンポーネントです。レスポンスコンポーネントを使用すると、テキスト入力と出力だけでなく、より豊かな会話インターフェースを構築できます。

動作の仕組み

AIConversationコンポーネントはレスポンスコンポーネントを受け取り、それらをツール設定に変換してLLMに送信します。ツール設定は、ユーザーメッセージがバックエンドに送信されるときに送信され、バックエンド Lambda がクライアントから来るツールと任意のスキーマツールをマージします。LLM は特定の入力/プロップを持つUIコンポーネント「ツール」を呼び出せることを認識します。LLM がレスポンスコンポーネントツールの使用を選択すると、レスポンスコンポーネント名とプロップを含むメッセージがクライアントに送信されます。その後、AIConversationコンポーネントは、LLM が送信するプロップを使用して提供された React コンポーネントをレンダリングしようとします。

重要なのは、LLM はブラウザに送信されて評価される生コードを書いていないということです。

構造

AIConversationコンポーネントのresponseComponentsプロップは、キーがコンポーネント名で値がコンポーネント定義である名前付きオブジェクトを受け取ります。

レスポンスコンポーネントには以下があります：

description: コンポーネントの説明。より詳細な説明ほど、より使いやすくなります
component: レンダリングする React コンポーネント。コンポーネントのプロップはプロップと一致する必要があります
props: React コンポーネントのJSONSchema形式のプロップ

<AIConversation
  responseComponents={{
    WeatherCard: {
      description: "Used to display the weather to the user",
      component: ({ city }) => {
        return (
          <div>{city}</div>
      props: {
        city: {
          type: "string",
          required: true,
          description: "The name of the city to display the weather for",

アシスタントへのコンテキストの返却

ユーザーがクライアントから AI アシスタントにメッセージを送信するときに、オプションでメッセージとともにaiContextを送信できます。aiContextは、AI アシスタントがより良く応答するのに役立つクライアントアプリケーションの現在の状態に関する情報です。aiContextは、ユーザーの名前や、現在いるページなどのアプリケーションの現在の状態などのことが考えられます。AI コンテキストは、次のユーザーメッセージとともに AI アシスタントに文字列化されて送信されるプレーンオブジェクトです。

aiContextを使用して、レスポンスコンポーネントにレンダリングされた内容を AI アシスタントに知らせ、より適切に応答できるようにコンテキストを提供できます。

会話を続けて、次のメッセージに対して会話にコンテキストを追加することは、UI コンポーネントがプロップに含まれていない状態とデータも持つことができるため、役立つことができます。

// Create a context to share state across components
const DataContext = React.createContext<{
  data: any;
  setData: (value: React.SetStateAction<any>) => void;
}>({ data: {}, setData: () => {} });
function WeatherCard({ city }: { city: string }) {
  const { setData } = React.useContext(DataContext);
  React.useEffect(() => {
    // fetch some weather data
    // set the data context
    setData({ 
      city,
      // weather info
  },[city])
    <div>{city}</div>
function Chat() {
  const { data } = React.useContext(DataContext);
      data: { messages },
      isLoading,
    sendMessage,
  ] = useAIConversation('chat');
    <AIConversation
      messages={messages}
      isLoading={isLoading}
      handleSendMessage={sendMessage}
      responseComponents={{
        WeatherCard: {
          component: WeatherCard,
          description: "Used to display the weather to the user",
          props: {
            city: {
              type: "string",
              required: true,
              description: "The name of the city to display the weather for",
      aiContext={() => {
        return {
          ...data,
export default function Example() {
  const [data, setData] = React.useState({});
    <Authenticator>
      <DataContext.Provider value={{ data, setData }}>
        <Chat />
      </DataContext.Provider>
    </Authenticator>

フォールバック

レスポンスコンポーネントは React コード内で実行時に定義されていますが、会話履歴はデータベースに保存されているため、もう存在しないレスポンスコンポーネントを持つメッセージが会話履歴に含まれる場合があります。これらの状況に対処するために、FallbackResponseComponentプロップを使用できます。

<AIConversation
  FallBackResponseComponent={(props) => {
    return <>{JSON.stringify(props)}</>