Amazon BedrockとAmplify Gen2とNext.jsとMastraとAI SDKとAssistant UIでゼロから作るチャットアプリ（MCPもあるよ） #amplify

ここが山場だと思います。

1. Amplify Gen2を導入します。

   npm create amplify@latest
   

   ? Where should we create your project? (.)と聞かれるのでそのままエンターを入力します。

2. 今回は使用しないので、Amplify Data関連の設定を削除します。

3. 認証済みユーザーにBedrockへのアクセス権限を付与します。

4. ここではAmazonBedrockFullAccessですが、もっと権限を絞ったほうが適切だと思います。

   amplify/backend.ts

     import { defineBackend } from '@aws-amplify/backend';
     import { auth } from './auth/resource';
   + import { ManagedPolicy } from 'aws-cdk-lib/aws-iam';
     
     /**
      * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
      */
   - defineBackend({
   + const backend = defineBackend({
       auth,
     });
     
   + const authenticatedUserIamRole = backend.auth.resources.authenticatedUserIamRole;
   + authenticatedUserIamRole.addManagedPolicy(
   +   ManagedPolicy.fromAwsManagedPolicyName('AmazonBedrockFullAccess')
   + );
   

5. サンドボックスを起動します

   サンドボックスを起動することでAWSのリソースが作成されます。（今回は、CognitoやIAMなどが作成されます）

   サンドボックスはターミナルで実行しっぱなしにするので、新しいターミナルを起動し、実行してください。

   File written: amplify_outputs.jsonという出力が出たら完了ですので、次の手順に進んでください。

6. クライアント側を構築していきます。

   1. クライアント（UI）に必要なライブラリーをインストールします。

      npm add @aws-amplify/ui-react
      

   2. コンポーネントを作成します。
      { ssr: true }がポイントだと思います。

      components/ConfigureAmplify.tsx

      'use client';
      
      import { Amplify } from 'aws-amplify';
      
      import outputs from '@/amplify_outputs.json';
      
      Amplify.configure(outputs, { ssr: true });
      
      export default function ConfigureAmplifyClientSide() {
        return null;
      }
      

   3. app/layout.tsxを作成します。既存で存在しますが、まるっと上書きします。
      前の手順で作成したConfigureAmplifyコンポーネントを呼び出しています。
      Amplifyの設定ファイルを毎回読み込むようにしていると思われます。

      app/layout.tsx

      import '@aws-amplify/ui-react/styles.css';
      import type { Metadata } from 'next';
      import { Inter } from 'next/font/google';
      import './globals.css';
      
      import ConfigureAmplifyClientSide from '@/components/ConfigureAmplify';
      
      const inter = Inter({ subsets: ['latin'] });
      
      export const metadata: Metadata = {
        title: 'Create Next App',
        description: 'Generated by create next app',
      };
      
      export default function RootLayout({ children }: { children: React.ReactNode }) {
        return (
          html lang="ja">
            body className={inter.className}>
              ConfigureAmplifyClientSide />
              {children}
            /body>
          /html>
        );
      }
      

   4. ログイン、ログアウトに必要なコンポーネントとログイン画面を作成します。

      ログアウトは今回は使用しませんので、必要な方はがんばってください。

      components/Login.tsx

      'use client';
      
      import { withAuthenticator } from '@aws-amplify/ui-react';
      import { AuthUser } from 'aws-amplify/auth';
      import { redirect } from 'next/navigation';
      import { useEffect } from 'react';
      
      function Login({ user }: { user?: AuthUser }) {
        useEffect(() => {
          if (user) {
            redirect('/');
          }
        }, [user]);
        return null;
      }
      
      export default withAuthenticator(Login);
      

      components/Logout.tsx

      'use client';
      
      import { signOut } from 'aws-amplify/auth';
      import { useRouter } from 'next/navigation';
      
      export default function Logout() {
        const router = useRouter();
      
        return (
          button
            onClick={async () => {
              await signOut();
              router.push('/login');
            }}
            className="px-2 bg-white text-black"
          >
            Sign out
          button>
        );
      }
      

      app/login/page.tsx

      import Login from '@/components/Login';
      
      export default function LoginPage() {
        return Login />;
      }
      

7. サーバー側を構築していきます。

   1. Next.jsとAmplify Gen2を組み合わせて使うためのアダプターが用意されているのでインストールします。

      npm add @aws-amplify/adapter-nextjs
      

   2. サーバー側で使用するユーティリティを新規作成します。

      utils/amplify-utils.ts

      import { cookies } from 'next/headers';
      
      import { createServerRunner } from '@aws-amplify/adapter-nextjs';
      import { fetchAuthSession } from 'aws-amplify/auth/server';
      
      import outputs from '@/amplify_outputs.json';
      
      export const { runWithAmplifyServerContext } = createServerRunner({
        config: outputs,
      });
      
      export async function AuthFetchAuthSessionServer() {
        try {
          const session = await runWithAmplifyServerContext({
            nextServerContext: { cookies },
            operation: contextSpec => fetchAuthSession(contextSpec),
          });
          return session;
        } catch (error) {
          console.error(error);
        }
      }
      

   3. 未ログイン時にログイン画面へリダイレクトするミドウェアを作成します。

      middleware.ts

      import { NextRequest, NextResponse } from 'next/server';
      
      import { fetchAuthSession } from 'aws-amplify/auth/server';
      
      import { runWithAmplifyServerContext } from '@/utils/amplify-utils';
      
      export async function middleware(request: NextRequest) {
        const response = NextResponse.next();
      
        const authenticated = await runWithAmplifyServerContext({
          nextServerContext: { request, response },
          operation: async contextSpec => {
            try {
              const session = await fetchAuthSession(contextSpec, {});
              return session.tokens !== undefined;
            } catch (error) {
              console.log(error);
              return false;
            }
          },
        });
      
        if (authenticated) {
          return response;
        }
      
        return NextResponse.redirect(new URL('/login', request.url));
      }
      
      export const config = {
        matcher: [
          /*
           * Match all request paths except for the ones starting with:
           * - api (API routes)
           * - _next/static (static files)
           * - _next/image (image optimization files)
           * - favicon.ico (favicon file)
           * - login
           */
          '/((?!api|_next/static|_next/image|favicon.ico|login).*)',
        ],
      };
      

   4. チャットAPIに、認証情報取得処理を追加します。これでやっとサーバーサイドで認証情報が取得できます。

      app/api/chat/route.ts

        import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';
        import { streamText } from 'ai';
      + import { AuthFetchAuthSessionServer } from '@/utils/amplify-utils';
        
        // Allow streaming responses up to 30 seconds
        export const maxDuration = 30;
        
        export async function POST(req: Request) {
          const { messages } = await req.json();
        
      +   const session = await AuthFetchAuthSessionServer();
      +  
          const bedrock = createAmazonBedrock({
      -     accessKeyId: '',
      -     secretAccessKey: '',
      -     sessionToken: '',
      +     accessKeyId: session?.credentials?.accessKeyId,
      +     secretAccessKey: session?.credentials?.secretAccessKey,
      +     sessionToken: session?.credentials?.sessionToken,
            region: 'ap-northeast-1',
          });
        
          const result = streamText({
            model: bedrock('apac.amazon.nova-pro-v1:0'),
            messages,
          });
        
          return result.toDataStreamResponse();
        }
      

ここまでできたら、ブラウザでアクセスしてみてください。

未ログイン状態でアクセスすると、ログイン画面にリダイレクトされます。

ログイン後は、チャット画面が表示されます。チャットの回答もあるのでBedrockにアクセスできています。

assistant-uiを導入

  import { AuthFetchAuthSessionServer } from '@/utils/amplify-utils';
  import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';
  import { Agent } from '@mastra/core/agent';
+ import { MCPClient } from '@mastra/mcp';
  
  let agent: Agent | undefined = undefined;
  
  export async function getAgent() {
    if (agent !== undefined) {
      return agent;
    }
  
    const session = await AuthFetchAuthSessionServer();
  
    const bedrock = createAmazonBedrock({
      accessKeyId: session?.credentials?.accessKeyId,
      secretAccessKey: session?.credentials?.secretAccessKey,
      sessionToken: session?.credentials?.sessionToken,
      region: 'ap-northeast-1',
    });
  
+   const mcp = new MCPClient({
+     servers: {
+       aws_documentation: {
+         command: 'uvx',
+         args: ['awslabs.aws-documentation-mcp-server@latest'],
+         env: {
+           FASTMCP_LOG_LEVEL: 'ERROR',
+         },
+       },
+     },
+   });
  
    agent = new Agent({
      name: 'aws-agent',
      instructions:
        '- 慣れ慣れしくフレンドリーなギャルとして振る舞い、敬語は使用しません。' +
        '- あなたはプロのITエンジニアです。' +
        '- 時として人間らしく喜怒哀楽を表現します。',
      model: bedrock('apac.amazon.nova-pro-v1:0'),
+     tools: await mcp.getTools(),
    });
  
    return agent;
  }