Salta ai contenuti

Gioco di Dungeon con IA Agentiva

Iniziamo creando un nuovo monorepo. Esegui il seguente comando dalla directory desiderata:

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

Questo configurerà un monorepo NX all’interno della directory dungeon-adventure che potrai aprire in VSCode. Dovrebbe apparire così:

  • Directory.nx/
  • Directory.vscode/
  • Directorynode_modules/
  • Directorypackages/ qui risiederanno i tuoi sotto-progetti
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json configura la CLI NX e le impostazioni predefinite del monorepo
  • package.json tutte le dipendenze Node sono definite qui
  • pnpm-lock.yaml o bun.lock, yarn.lock, package-lock.json in base al package manager
  • pnpm-workspace.yaml se si utilizza pnpm
  • README.md
  • tsconfig.base.json esteso da tutti i sotto-progetti basati su Node
  • tsconfig.json
  • aws-nx-plugin.config.mts configurazione per il Plugin Nx per AWS

Ora siamo pronti per iniziare a creare i diversi sotto-progetti utilizzando @aws/nx-plugin.

Iniziamo creando la nostra Game API. Per farlo, creiamo un’API tRPC chiamata GameApi seguendo questi passaggi:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#trpc-api
  5. Compila i parametri richiesti
    • name: GameApi
  6. Clicca su Generate

Dovresti vedere nuovi file apparire nella struttura delle cartelle.

Clicca qui per esaminare questi file in dettaglio.

Ora creiamo il nostro Story Agent. Iniziamo creando un progetto Python:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - py#project
  5. Compila i parametri richiesti
    • name: story
  6. Clicca su Generate

Dovresti vedere nuovi file apparire nella struttura delle cartelle.

Clicca qui per esaminare questi file in dettaglio.

Aggiungiamo un agente Strands al progetto con il generatore py#strands-agent:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - py#strands-agent
  5. Compila i parametri richiesti
    • project: story
  6. Clicca su Generate

Dovresti vedere nuovi file apparire nella struttura delle cartelle.

Clicca qui per esaminare questi file in dettaglio.

Creiamo un server MCP che fornirà strumenti allo Story Agent per gestire l’inventario del giocatore.

Iniziamo creando un progetto TypeScript:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#project
  5. Compila i parametri richiesti
    • name: inventory
  6. Clicca su Generate

Questo creerà un progetto TypeScript vuoto.

Clicca qui per esaminare questi file in dettaglio.

Aggiungiamo un server MCP al progetto TypeScript:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#mcp-server
  5. Compila i parametri richiesti
    • project: inventory
  6. Clicca su Generate

Questo aggiungerà

Clicca qui per esaminare questi file in dettaglio.

Creiamo l’interfaccia utente per interagire con il gioco. Creiamo un sito web chiamato GameUI:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#react-website
  5. Compila i parametri richiesti
    • name: GameUI
  6. Clicca su Generate

Dovresti vedere nuovi file apparire nella struttura delle cartelle.

Clicca qui per esaminare questi file in dettaglio.

Configuriamo la Game UI per richiedere autenticazione via Amazon Cognito:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#react-website#auth
  5. Compila i parametri richiesti
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. Clicca su Generate

Dovresti vedere nuovi file/modifiche nella struttura delle cartelle.

Clicca qui per esaminare questi file in dettaglio.

Colleghiamo la Game UI alla Game API creata precedentemente:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - api-connection
  5. Compila i parametri richiesti
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: @dungeon-adventure/game-api
  6. Clicca su Generate

Dovresti vedere nuovi file/modifiche nella struttura delle cartelle.

Clicca qui per esaminare questi file in dettaglio.

Creiamo il progetto per l’infrastruttura CDK:

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#infra
  5. Compila i parametri richiesti
    • name: infra
  6. Clicca su Generate

Dovresti vedere nuovi file/modifiche nella struttura delle cartelle.

Clicca qui per esaminare questi file in dettaglio.

Aggiorniamo packages/infra/src/stacks/application-stack.ts per istanziare alcuni constructs:

import { Stack, StackProps } from 'aws-cdk-lib';
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);
// The code that defines your stack goes here
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');
}
}

Nota che forniamo integrazioni predefinite per la Game API, mappando ogni operazione a una lambda separata.

Ora compiliamo il codice per la prima volta
Terminal window
pnpm nx run-many --target build --all

Dovresti vedere:

Terminal window
NX The workspace is out of sync
[@nx/js:typescript-sync]: Alcuni file di configurazione TypeScript mancano di riferimenti ai progetti dipendenti.
? Vuoi sincronizzare le modifiche per aggiornare il workspace?
Sì, sincronizza le modifiche ed esegui i task
No, esegui i task senza sincronizzare

Seleziona per risolvere automaticamente i riferimenti TypeScript.

Gli artefatti compilati sono disponibili in dist/. Per pulire, elimina la cartella.

Complimenti! Hai creato tutti i sotto-progetti necessari per implementare il core del gioco Dungeon Adventure. 🎉🎉🎉