Need to configure your backend?See Build a Backend →

コンテキスト

LLMがユーザーの質問に対して高品質の回答を提供するには、適切な情報が必要です。この情報は、ユーザーまたはアプリケーションの状態に基づく、コンテキスト的なものである場合があります。これを可能にするために、ユーザーメッセージと共にaiContextをLLMに送信できます。これは、役立つ可能性のある構造化されていないデータまたは構造化されたデータの任意の形式です。

注：aiContextはチャット中に利用でき、LLMに渡されますが、metadataはチャットで利用できず、LLMに渡されません。

function Chat() {
      data: { messages },
      isLoading,
    sendMessage,
  ] = useAIConversation('chat');
    <AIConversation
      messages={messages}
      isLoading={isLoading}
      handleSendMessage={sendMessage}
      // This will let the LLM know about the current state of this application
      // so it can better respond to questions
      aiContext={() => {
        return {
          currentTime: new Date().toLocaleTimeString(),

aiContextプロップに渡された関数は、リクエストが送信される直前に実行され、最新の情報を取得します。

React contextまたは他の状態管理システムを使用して、aiContextに渡されるデータを更新できます。React contextを使用することで、アプリケーションの現在の状態についてより多くの情報を提供できます：

// Create a context to share state across components
const DataContext = React.createContext<{
  data: any;
  setData: (value: React.SetStateAction<any>) => void;
}>({ data: {}, setData: () => {} });
// Create a component that updates the shared state
function Counter() {
  const { data, setData } = React.useContext(AIContext);
  const count = data.count ?? 0;
    <Button onClick={() => setData({ ...data, count: count + 1 })}>
      {count}
    </Button>
// reference shared data in aiContext
function Chat() {
  const { data } = React.useContext(DataContext);
      data: { messages },
      isLoading,
    sendMessage,
  ] = useAIConversation('pirateChat');
    <AIConversation
      messages={messages}
      isLoading={isLoading}
      handleSendMessage={sendMessage}
      // This will let the LLM know about the current state of this application
      // so it can better respond to questions
      aiContext={() => {
        return {
          ...data,
          currentTime: new Date().toLocaleTimeString(),
export default function Example() {
  const [data, setData] = React.useState({});
    <Authenticator>
      <DataContext.Provider value={{ data, setData }}>
        <Counter />
        <Chat />
      </DataContext.Provider>
    </Authenticator>