agent-studio-playground

ShouxinZhang's avatarfrom ShouxinZhang

Work on Game Playground (frontend /playground and backend game API). Use for adding/debugging games, render modes (scene vs frame), session lifecycle, controls/keyboard, and backend environments (Gymnasium, Snake, Tetris). 游戏游乐场开发：新增/排查游戏、前后端协议、渲染模式(scene/frame)、会话管理、键盘与控制面板。

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Developer Tools]

When & Why to Use This Skill

This Claude skill is designed to streamline the development, debugging, and expansion of the Agent Studio Game Playground. It provides a comprehensive framework for managing full-stack game integration, covering everything from Next.js frontend components and rendering logic to Python-based backend APIs and Gymnasium environment wrappers. By automating complex workflows like session lifecycle management and rendering mode configuration (scene vs. frame), it enables developers to rapidly build and test robust environments for AI agents.

Use Cases

  • New Game Integration: Efficiently register and map new game environments (such as Gymnasium benchmarks, Snake, or Tetris) across the frontend registry and backend session manager.
  • Full-Stack API Debugging: Troubleshoot and refine backend routes for game sessions, including start, step, reset, and delete operations, ensuring seamless communication with the frontend.
  • Rendering Mode Configuration: Implement and optimize different visual outputs, switching between 'scene' rendering for vector-based graphics and 'frame' rendering for pixel-based data URLs.
  • Control & Input Mapping: Develop and verify custom keyboard controls and UI settings to ensure precise interaction between the user/agent and the game environment.
  • Automated Smoke Testing: Utilize bundled scripts to verify the integrity of the game API and environment state transitions after backend modifications.
nameagent-studio-playground
descriptionWork on Game Playground (frontend /playground and backend game API). Use for adding/debugging games, render modes (scene vs frame), session lifecycle, controls/keyboard, and backend environments (Gymnasium, Snake, Tetris). 游戏游乐场开发：新增/排查游戏、前后端协议、渲染模式(scene/frame)、会话管理、键盘与控制面板。

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