agent-studio-playground

Agent Studio Game Playground

Understand the contract (backend API)

• Backend routes live in backend/main.py.
• Session selection and env mapping live in backend/engine/session_manager.py.
• Gym wrapper (frame rendering) lives in backend/engine/gym_wrapper.py.

Endpoints:

• GET /health
• POST /api/game/start body: { "env_id": "<gameId>", "config": { ... } }
• POST /api/game/{session_id}/step body: { "action": <int> }
• POST /api/game/{session_id}/reset
• DELETE /api/game/{session_id}

Rendering:

• render.mode === "scene": frontend should draw from render.scene.
• render.mode === "frame": frontend should display render.frame / state.frame (often a data URL).

Understand the frontend wiring

• Lobby: src/app/playground/page.tsx + src/lib/games/registry.ts
• Game page: src/app/playground/[gameId]/page.tsx
• Shared gameplay logic/components: src/components/features/playground/
• Scene renderers: src/components/games/renderers/*
• Controls/settings: src/components/games/controls/*, src/components/games/settings/*

Add a new game (checklist)

1. Register it in src/lib/games/registry.ts (id, category, renderMode, actions, available).
2. Backend:
   • If it’s custom scene mode, add an env in backend/engine/games/ and map it in backend/engine/session_manager.py.
   • If it’s a Gym env, ensure the env_id is valid for gymnasium.make.
3. Frontend:
   • For renderMode: "scene", add/extend renderer + types under src/components/games/.
   • Update keyboard mapping/controls/settings as needed.
4. Verify the API payload shape matches src/components/features/playground/types.ts.

Smoke test the backend game API

Run the bundled script after starting the backend:

• python docs/skills/agent-studio-playground/scripts/smoke_game_api.py --env-id CartPole-v1 --steps 5