Amplify と Amazon Bedrock を使用して生成 AI サンドボックスを構築する

npx create-next-app@14

✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*

amplify init

? Enter a name for the project amplify-gen-ai
The following configuration will be applied:

Project information
| Name: amplify-gen-ai
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start
? Initialize the project with the above configuration? Yes

amplify add auth

Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? _**Default configuration**_
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? _**Email**_
 Do you want to configure advanced settings? _**No, I am done.**_

amplify push

✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ amplifyGenAi         │ Create    │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘

npm i --save @aws-amplify/ui-react aws-amplify

import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import awsconfig from '../aws-exports';

Amplify.configure({
  ...awsconfig,
  // this lets you run Amplify code on the server-side in Next.js
  ssr: true
});

import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import awsconfig from '../aws-exports';
import type { AppProps } from 'next/app';
import { Authenticator } from '@aws-amplify/ui-react';

Amplify.configure({
  ...awsconfig,
  // this lets you run Amplify code on the server-side in Next.js
  ssr: true
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Authenticator>
      <Component {...pageProps} />
    </Authenticator>
  );
}

npm i --save @aws-sdk/client-bedrock-runtime

import { Amplify } from 'aws-amplify';
import awsconfig from '@/aws-exports';

Amplify.configure({
  ...awsconfig,
  ssr: true
});

- export default function handler(
+ export default async function handler(

const SSR = withSSRContext({ req });

const credentials = await SSR.Auth.currentCredentials();

const callAPI = () => {
  fetch('/api/hello');
};

<button onClick={callAPI}>Click me</button>

fetch('/api/hello', {
  method: 'POST',
  body: JSON.stringify({ input: 'Who are you?' })
});

const bedrock = new BedrockRuntimeClient({
  serviceId: 'bedrock',
  region: 'us-east-1',
  credentials
});

import {
  BedrockRuntimeClient,
  InvokeModelCommand
} from '@aws-sdk/client-bedrock-runtime';
import { Amplify, withSSRContext } from 'aws-amplify';
import type { NextApiRequest, NextApiResponse } from 'next';
import awsExports from '@/aws-exports';

Amplify.configure({
  ...awsExports,
  ssr: true
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const body = JSON.parse(req.body);
  const SSR = withSSRContext({ req });
  const credentials = await SSR.Auth.currentCredentials();
  const bedrock = new BedrockRuntimeClient({
    serviceId: 'bedrock',
    region: 'us-east-1',
    credentials
  });

  // Anthropic's Claude model expects a chat-like string
  // of 'Human:' and 'Assistant:' responses separated by line breaks.
  // You should always end your prompt with 'Assistant:' and Claude
  // will respond. There are various prompt engineering techniques
  // and frameworks like LangChain you can use here too.
  const prompt = `Human:${body.input}\n\nAssistant:`;

  const result = await bedrock.send(
    new InvokeModelCommand({
      modelId: 'anthropic.claude-v2',
      contentType: 'application/json',
      accept: '*/*',
      body: JSON.stringify({
        prompt,
        // LLM costs are measured by Tokens, which are roughly equivalent
        // to 1 word. This option allows you to set the maximum amount of
        // tokens to return
        max_tokens_to_sample: 2000,
        // Temperature (1-0) is how 'creative' the LLM should be in its response
        // 1: deterministic, prone to repeating
        // 0: creative, prone to hallucinations
        temperature: 1,
        top_k: 250,
        top_p: 0.99,
        // This tells the model when to stop its response. LLMs
        // generally have a chat-like string of Human and Assistant message
        // This says stop when the Assistant (Claude) is done and expects
        // the human to respond
        stop_sequences: ['\n\nHuman:'],
        anthropic_version: 'bedrock-2023-05-31'
      })
    })
  );
  // The response is a Uint8Array of a stringified JSON blob
  // so you need to first decode the Uint8Array to a string
  // then parse the string.
  res.status(200).json(JSON.parse(new TextDecoder().decode(result.body)));
}

fetch('/api/hello', {
  method: 'POST',
  body: JSON.stringify({ input: 'Who are you?' })
})
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  });

⨯ AccessDeniedException: User: arn:aws:sts::553879240338:assumed-role/amplify-amplifyGenAi-dev-205330-authRole/CognitoIdentityCredentials is not authorized to perform: bedrock:InvokeModel on resource:

amplify override project

import {
  AmplifyProjectInfo,
  AmplifyRootStackTemplate
} from '@aws-amplify/cli-extensibility-helper';

export function override(
  resources: AmplifyRootStackTemplate,
  amplifyProjectInfo: AmplifyProjectInfo
) {
  const authRole = resources.authRole;

  const basePolicies = Array.isArray(authRole.policies)
    ? authRole.policies
    : [authRole.policies];

  authRole.policies = [
    ...basePolicies,
    {
      policyName: '',
      policyDocument: {
        Version: '2012-10-17',
        Statement: [
          {
            Effect: 'Allow',
            Action: 'bedrock:InvokeModel',
            Resource:
              'arn:aws:bedrock:us-east-1::foundation-model/anthropic.claude-v2'
          }
        ]
      }
    }
  ];
}

gh repo create

? What would you like to do? Push an existing local repository to GitHub
? Path to local repository .
? Repository name amplify-gen-ai
? Repository owner danny
? Description
? Visibility Private
✓ Created repository danny/amplify-gen-ai on GitHub
? Add a remote? Yes
? What should the new remote be called? origin
✓ Added remote git@github.com:danny/amplify-gen-ai.git
? Would you like to push commits from the current branch to "origin"? Yes

amplify add hosting

✔ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)

? Choose a type Continuous deployment (Git-based deployments)
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬───────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                    │
├──────────────┼───────────────────────────────────────────┤
│ main         │ https://main.dade6up5cdfhu.amplifyapp.com │

"exclude": ["node_modules","amplify"]