diff --git a/src/pages/[platform]/build-a-backend/ai/set-up-ai/index.mdx b/src/pages/[platform]/build-a-backend/ai/set-up-ai/index.mdx index 2c30b1bd323..61eb9b6f03a 100644 --- a/src/pages/[platform]/build-a-backend/ai/set-up-ai/index.mdx +++ b/src/pages/[platform]/build-a-backend/ai/set-up-ai/index.mdx @@ -32,3 +32,160 @@ export function getStaticProps(context) { Amplify AI sections are under construction + +In this guide, you will learn how to set up Amplify AI. This includes building Conversation and Generation routes, and securing access to these routes with authorization rules. + +Before you begin, you will need: + +- [Node.js](https://nodejs.org/) v18.16.0 or later +- [npm](https://www.npmjs.com/) v6.14.4 or later +- [git](https://git-scm.com/) v2.14.1 or later + +You will also need an AWS Account with access to the Bedrock Foundation Model(s) you want to use. You can do that by going in to the [Bedrock console and requesting access](https://console.aws.amazon.com/bedrock/home#/modelaccess). + +With Amplify AI, you can define Conversation and Generation routes backed by an AWS AppSync API and Amazon Bedrock. + +## Building your AI backend + +If you've run `npm create amplify@latest` already, you should see an `amplify/data/resource/ts` file, which is the central location to configure your AI backend. Within the `schema` object, you define Conversation routes (`a.conversation({})`) and Generation routes (`a.generation({})`), and can integrate them seamlessly with existing Amplify Data schema objects. + +```ts title="amplify/data/resources.ts" +import { a, defineData, type ClientSchema } from '@aws-amplify/backend'; + +const schema = a.schema({ + // This will add a new conversation route to your Amplify Data backend. + chat: a.conversation({ + aiModel: a.ai.model('Claude 3 Haiku'), + systemPrompt: 'You are a helpful assistant', + }), + + // This adds a new generation route to your Amplify Data backend. + generateRecipe: a.generation({ + aiModel: a.ai.model('Claude 3 Haiku'), + systemPrompt: 'You are a helpful assistant that generates recipes.', + }) + .arguments({ + description: a.string(), + }) + // This specifies the return type of the generation route. + .returns( + a.customType({ + name: a.string(), + ingredients: a.string().array(), + instructions: a.string(), + }) + ) + // only logged in users can access this + .authorization((allow) => allow.authenticated()), +}); +``` + +To deploy these resources to your cloud sandbox, run the following CLI command in your terminal: + +```bash title="Terminal" +npx ampx sandbox +``` + +## Connect your application code the the AI routes + +Once the cloud sandbox is up and running, it will also create an `amplify_outputs.json` file, which includes relevant connection information to your AI routes. + +To connect your frontend code to your backend, you need to: + +1. Configure the Amplify library with the Amplify client configuration file (`amplify_outputs.json`). +2. Generate a new API client from the Amplify library. +3. Make an API request with end-to-end type-safety. + +## AI Route UI + +_NOTE: If you are not using React in your frontend, check out the section for using the Amplify Javascript libraries._ + +First, install the Amplify client library to your project: + +```bash title="Terminal" +npm add aws-amplify @aws-amplify/ui-react @aws-amplify/ui-react-ai +``` + +### Conversation Route UI +Then in your React code, import and use the `AIConversation` component to start a conversation with your AI route: + +```tsx title="src/page.tsx" +import { generateClient } from "aws-amplify/data"; +import { Authenticator } from "@aws-amplify/ui-react"; +import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai'; +import type { Schema } from "../amplify/data/resource"; + +const client = generateClient({ authMode: 'userPool' }); +const { useAIConversation } = createAIHooks(client); + +export default function Page() { + const [ + { + data: { messages }, + }, + sendMessage, + ] = useAIConversation('chat'); + // 'chat' is based on the key for the conversation route in your schema. + + return ( + + + + ); +} +``` + +### Generation Route UI + +```tsx title="src/page.tsx" +import { createAIHooks } from "@aws-amplify/ui-react-ai"; +import { generateClient } from "aws-amplify/api"; +import type { Schema } from "../amplify/data/resource"; + +const client = generateClient({ authMode: "userPool" }); +const { useAIGeneration, useAIConversation } = createAIHooks(client); + +export default function Page() { + const [description, setDescription] = React.useState(""); + const [{ data, isLoading, hasError }, generateRecipe] = + useAIGeneration("generateRecipe"); + + const handleClick = async () => { + generateRecipe({ description }); + }; + + return ( + + + setDescription(e.target.value)} + label="Description" + /> + + + {isLoading ? ( + + ) : ( + <> + {data?.name} + + {data?.ingredients?.map((ingredient) => ( + + {ingredient} + + ))} + + {data?.instructions} + + )} + + ); +} +``` + +## Next steps