Type error when trying to add new AI Chatbot

[blipps199]

Environment information

System:
  OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Memory: 2.12 GB / 7.62 GB
  Shell: /bin/bash
Binaries:
  Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
  Yarn: undefined - undefined
  npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
  pnpm: undefined - undefined
NPM Packages:
  @aws-amplify/auth-construct: 1.5.0
  @aws-amplify/backend: 1.7.0
  @aws-amplify/backend-auth: 1.4.0
  @aws-amplify/backend-cli: 1.4.2
  @aws-amplify/backend-data: 1.2.0
  @aws-amplify/backend-deployer: 1.1.9
  @aws-amplify/backend-function: 1.7.5
  @aws-amplify/backend-output-schemas: 1.4.0
  @aws-amplify/backend-output-storage: 1.1.3
  @aws-amplify/backend-secret: 1.1.5
  @aws-amplify/backend-storage: 1.2.2
  @aws-amplify/cli-core: 1.2.0
  @aws-amplify/client-config: 1.5.2
  @aws-amplify/deployed-backend-client: 1.4.2
  @aws-amplify/form-generator: 1.0.3
  @aws-amplify/model-generator: 1.0.9
  @aws-amplify/platform-core: 1.2.0
  @aws-amplify/plugin-types: 1.4.0
  @aws-amplify/sandbox: 1.2.5
  @aws-amplify/schema-generator: 1.2.5
  aws-amplify: 6.8.2
  aws-cdk: 2.167.1
  aws-cdk-lib: 2.167.1
  typescript: 5.6.3
No AWS environment variables
No CDK environment variables

Data packages

[email protected] /home/....
├─┬ @aws-amplify/[email protected]
│ └─┬ @aws-amplify/[email protected]
│   └── @aws-amplify/[email protected]
└─┬ @aws-amplify/[email protected]
  └─┬ @aws-amplify/[email protected]
    └── @aws-amplify/[email protected]

Description

Following this guide trying to add a chatbot to my front end: https://docs.amplify.aws/react/ai/set-up-ai/

Schema

const chatSchema = a.schema({
  chat: a.conversation({
    aiModel: a.ai.model("Claude 3 Haiku"),
    systemPrompt: `You are a helpful assistant`,
  })
  .authorization((allow) => allow.owner()),
});

Combine my schemas

const combinedSchema = a.combine([
  schema1,
  schema2,
  chatSchema
]);

export type Schema = ClientSchema<typeof combinedSchema>;

Front end code:

import { AIConversation } from '@aws-amplify/ui-react-ai';
import { useAIConversation } from '../../client';

export default function App() {
  const [
    {
      data: { messages },
      isLoading,
    },
    handleSendMessage,
  ] = useAIConversation('chat');
  
  return (
    <AIConversation
        messages={messages}
        isLoading={isLoading}
        handleSendMessage={handleSendMessage}
    />
  );
}

Client:

import { generateClient } from "aws-amplify/api";
import { Schema } from "../amplify/data/resource";
import { createAIHooks } from "@aws-amplify/ui-react-ai";

export const client = generateClient<Schema>({ authMode: "userPool" });
export const { useAIConversation, useAIGeneration } = createAIHooks(client);

However, when I load the page with the chatbot component I get this error in the console and everything on the page except the background disappear.

I've hit up discord for help to no avail. Would really like to figure this out because I can deploy this(https://github.com/aws-samples/amplify-ai-examples) and it works so I know the chatbot can work. Just not sure why my extremely simple approach using the guide isn't working.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.