Skip to content
@aws/nx-plugin
Blog

エージェント型AIダンジョンゲーム

モジュール1: モノレポ設定

Section titled “モジュール1: モノレポ設定”

まず新しいモノレポを作成します。任意のディレクトリ内で次のコマンドを実行してください:

Terminal window
npx create-nx-workspace@21.6.4 dungeon-adventure --pm=pnpm  --preset=@aws/nx-plugin --iacProvider=CDK --ci=skip --aiAgents

これによりdungeon-adventureディレクトリ内にNXモノレポがセットアップされ、vscodeで開くことができます。以下のような構造になります:

  • Directory.nx/
    • …
  • Directory.vscode/
    • …
  • Directorynode_modules/
    • …
  • Directorypackages/ サブプロジェクトが配置される場所
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json Nx CLIとモノレポのデフォルト設定
  • package.json 全Node依存関係の定義
  • pnpm-lock.yaml または bun.lock, yarn.lock, package-lock.json（パッケージマネージャー依存）
  • pnpm-workspace.yaml（pnpm使用時）
  • README.md
  • tsconfig.base.json 全Nodeベースサブプロジェクトが継承
  • tsconfig.json
  • aws-nx-plugin.config.mts Nx Plugin for AWSの設定

これで@aws/nx-pluginを使用して様々なサブプロジェクトを作成する準備が整いました。

ゲームAPI

Section titled “ゲームAPI”

最初にGame APIを作成します。以下の手順でGameApiというtRPC APIを作成します:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#trpc-api
  5. 必須パラメータを入力
    • name: GameApi
  6. クリック Generate

ファイルツリーに新しいファイルが生成されているはずです。

詳細を確認するにはここをクリック

ストーリーエージェント: Pythonプロジェクト

Section titled “ストーリーエージェント: Pythonプロジェクト”

次にストーリーエージェントを作成します。まずPythonプロジェクトを作成:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - py#project
  5. 必須パラメータを入力
    • name: story
  6. クリック Generate

ファイルツリーに新しいファイルが生成されます。

詳細を確認するにはここをクリック

ストーリーエージェント: Strandsエージェント

Section titled “ストーリーエージェント: Strandsエージェント”

py#strands-agentジェネレーターでStrandsエージェントを追加:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - py#strands-agent
  5. 必須パラメータを入力
    • project: story
  6. クリック Generate

ファイルツリーに新しいファイルが生成されます。

詳細を確認するにはここをクリック

インベントリ: TypeScriptプロジェクト

Section titled “インベントリ: TypeScriptプロジェクト”

プレイヤーのインベントリ管理用MCPサーバーを作成します。まずTypeScriptプロジェクトを作成:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#project
  5. 必須パラメータを入力
    • name: inventory
  6. クリック Generate

空のTypeScriptプロジェクトが生成されます。

詳細を確認するにはここをクリック

インベントリ: MCPサーバー

Section titled “インベントリ: MCPサーバー”

TypeScriptプロジェクトにMCPサーバーを追加:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#mcp-server
  5. 必須パラメータを入力
    • project: inventory
  6. クリック Generate
詳細を確認するにはここをクリック

ゲームUI: ウェブサイト

Section titled “ゲームUI: ウェブサイト”

ゲーム操作用UIを作成します。以下の手順でGameUIウェブサイトを作成:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#react-website
  5. 必須パラメータを入力
    • name: GameUI
  6. クリック Generate

ファイルツリーに新しいファイルが生成されます。

詳細を確認するにはここをクリック

ゲームUI: 認証

Section titled “ゲームUI: 認証”

Amazon Cognitoによる認証を設定:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#react-website#auth
  5. 必須パラメータを入力
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. クリック Generate

ファイルツリーが更新されます。

詳細を確認するにはここをクリック

ゲームUI: Game API接続

Section titled “ゲームUI: Game API接続”

Game APIへの接続を設定:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - api-connection
  5. 必須パラメータを入力
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: @dungeon-adventure/game-api
  6. クリック Generate

ファイルツリーが更新されます。

詳細を確認するにはここをクリック

ゲームUI: インフラストラクチャー

Section titled “ゲームUI: インフラストラクチャー”

最後にCDKインフラストラクチャープロジェクトを作成:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#infra
  5. 必須パラメータを入力
    • name: infra
  6. クリック Generate

ファイルツリーが更新されます。

詳細を確認するにはここをクリック

インフラストラクチャー更新

Section titled “インフラストラクチャー更新”

packages/infra/src/stacks/application-stack.tsを更新して生成済みコンストラクトをインスタンス化:

import {
  GameApi,
  GameUI,
  InventoryMcpServer,
  RuntimeConfig,
  StoryAgent,
  UserIdentity,
} from ':dungeon-adventure/common-constructs';
import { Stack, StackProps, CfnOutput } from 'aws-cdk-lib';
import { Construct } from 'constructs';


export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);


    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi', {
      integrations: GameApi.defaultIntegrations(this).build(),
    });


    const { userPool, userPoolClient } = userIdentity;


    const mcpServer = new InventoryMcpServer(this, 'InventoryMcpServer');


    // Use Cognito for user authentication with the agent
    const storyAgent = new StoryAgent(this, 'StoryAgent', {
      authorizerConfiguration: {
        customJwtAuthorizer: {
          discoveryUrl: `https://cognito-idp.${Stack.of(userPool).region}.amazonaws.com/${userPool.userPoolId}/.well-known/openid-configuration`,
          allowedAudience: [userPoolClient.userPoolClientId],
        },
      },
      environment: {
        INVENTORY_MCP_ARN: mcpServer.agentCoreRuntime.arn,
      },
    });
    // Add the Story Agent ARN to runtime-config.json so it can be referenced by the website
    RuntimeConfig.ensure(this).config.agentArn =
      storyAgent.agentCoreRuntime.arn;


    new CfnOutput(this, 'StoryAgentArn', {
      value: storyAgent.agentCoreRuntime.arn,
    });
    new CfnOutput(this, 'InventoryMcpArn', {
      value: mcpServer.agentCoreRuntime.arn,
    });


    // Grant the agent permissions to invoke our mcp server
    mcpServer.agentCoreRuntime.grantInvoke(storyAgent.agentCoreRuntime);


    // Grant the authenticated role access to invoke the api
    gameApi.grantInvokeAccess(userIdentity.identityPool.authenticatedRole);


    // Ensure this is instantiated last so our runtime-config.json can be automatically configured
    new GameUI(this, 'GameUI');
  }
}

Game APIのデフォルト統合を設定。各API操作に個別のLambda関数がマッピングされます。

コードビルド

Section titled “コードビルド”
初回コードビルドの実行
Terminal window
pnpm nx run-many --target build --all

以下のプロンプトが表示されます:

Terminal window
 NX   The workspace is out of sync


[@nx/js:typescript-sync]: Some TypeScript configuration files are missing project references to the projects they depend on or contain outdated project references.


This will result in an error in CI.


? Would you like to sync the identified changes to get your workspace up to date? …
Yes, sync the changes and run the tasks
No, run the tasks without syncing the changes

Yes, sync the changes and run the tasksを選択。IDEのインポートエラーが解消されます。

ビルド成果物はモノレポルートのdist/フォルダに生成されます。クリーン時はdist/を削除。

おめでとうございます！ダンジョンアドベンチャーゲームのコア実装に必要な全サブプロジェクトの作成が完了しました。🎉🎉🎉