Zenn
⚡

Bolt改造：BoltにAWS Bedrockを対応させる方法

2024/10/17に公開
Bolt
Claude
Bedrock
remixrun
tech

はじめに

Boltは、Remix Runを用いて構築されたAI駆動の開発ツールで、ブラウザ上でのフルスタック開発を可能にします。本記事では、BoltにAWS BedrockのモデルであるClaudeを統合する方法について解説します。これにより、BoltでAWS Bedrockを利用したチャット機能を実装することができます。

手順概要

  1. モデル選択オプションの追加
  2. AWS認証情報の取得と管理
  3. 定数の設定
  4. モデル関数の実装
  5. テキストストリーミング関数の更新
  6. APIルートの修正
  7. パッケージの追加

以下、それぞれの手順について詳しく説明します。

モデル選択オプションの追加

まず、ユーザーがAWS Bedrock Claudeを選択できるように、チャット画面のモデル選択ドロップダウンにオプションを追加します。

対象ファイル: app/components/chat/BaseChat.tsx

<select>
  {/* 既存のモデルオプション */}
  <option value="bedrock">AWS Bedrock Claude</option>
</select>

AWS認証情報の取得と管理

AWSのアクセスキーやシークレットキーなどの認証情報を環境変数から取得できるようにします。

対象ファイル: app/lib/.server/llm/api-key.ts

export function getAWSCredentials(cloudflareEnv: Env) {
  return {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID || cloudflareEnv.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || cloudflareEnv.AWS_SECRET_ACCESS_KEY,
    region: process.env.AWS_REGION || cloudflareEnv.AWS_REGION || 'ap-northeast-1',
  };
}

定数の設定

AWS Bedrockのトークン制限など、モデル固有の定数を定義します。

対象ファイル: app/lib/.server/llm/constants.ts

export const MAX_TOKENS_BEDROCK = 4096;

モデル関数の実装

AWS Bedrockモデルを初期化する関数を実装します。

対象ファイル: app/lib/.server/llm/model.ts

import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';

export function getBedrockModel(modelId: string, credentials: AWSCredentials) {
  const bedrock = createAmazonBedrock({
    region: credentials.region,
    accessKeyId: credentials.accessKeyId,
    secretAccessKey: credentials.secretAccessKey,
  });

  return bedrock(modelId);
}

テキストストリーミング関数の更新

AWS Bedrockからのレスポンスをストリーミングで受け取る関数を追加します。

対象ファイル: app/lib/.server/llm/stream-text.ts

export function streamTextBedrock(messages: Messages, env: Env, modelId: string, options?: StreamingOptions) {
  const credentials = getAWSCredentials(env);

  return _streamText({
    model: getBedrockModel(modelId, credentials),
    system: getSystemPrompt(),
    maxTokens: MAX_TOKENS_BEDROCK,
    messages: convertToCoreMessages(messages),
    headers: {},
    ...options,
  });
}

APIルートの修正

選択されたモデルがAWS Bedrockの場合に、適切なストリーミング関数を呼び出すようにAPIルートを修正します。

対象ファイル: app/routes/api.chat.ts

async function chatAction({ context, request }: ActionFunctionArgs) {
  // ...前略...

  let result;
  if (selectedModel === 'bedrock') {
    result = await streamTextBedrock(messages, context.cloudflare.env, 'モデルID', options);
  } else if (selectedModel === 'openai') {
    result = await streamTextOpenAI(messages, context.cloudflare.env, 'gpt-3.5-turbo', options);
  } else {
    result = await streamText(messages, context.cloudflare.env, options);
  }

  stream.switchSource(result.toAIStream());

  // ...後略...
}

パッケージの追加

AWS Bedrockとの連携に必要なパッケージをインストールし、package.jsonに追加します。

対象ファイル: package.json

"dependencies": {
  "@ai-sdk/amazon-bedrock": "^0.0.30",
  // 他の依存関係
}

インストールコマンド:

pnpm install @ai-sdk/amazon-bedrock

まとめ

以上の手順で、BoltにAWS Bedrock Claudeを統合することができます。これにより、Boltのチャット機能でAWSの強力なAIモデルを活用できるようになります。

補足: Boltのアプリケーション構造

Boltは以下のような構造を持っています。

  • フロントエンド (appディレクトリ): ユーザーインターフェースや状態管理を担当。
  • バックエンド (functionsディレクトリ): APIエンドポイントやサーバーサイドのロジックを担当。
  • AIモデル連携 (app/lib/.server/llm): 各種AIモデルとの通信やストリーミング処理を担当。
  • WebContainer API統合 (app/lib/webcontainer): ブラウザ上での仮想環境構築を担当。

この構造を理解することで、他のモデルや機能を追加する際にもスムーズに開発を進めることができます。

最後に

BoltへのAWS Bedrockの統合は、AI駆動の開発体験をさらに強化します。ぜひこの手順を参考に、自身のプロジェクトに応用してみてください。

リポジトリ

https://github.com/Sunwood-ai-labs/bolt.new.bedrock

ベースリポジトリ

https://github.com/hodachi-axcxept/bolt.new-multiLLM

原点

https://github.com/stackblitz/bolt.new

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Discussion