explaingit

wongsakorn-krub/ai-agents-pixels

21JavaScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

TLDR

A browser-based pixel-art simulation where six AI agents walk around a virtual trading room, run trades, and update a shared portfolio, purely for fun, no real money involved.

Mindmap

mindmap
  root((ai-agents-pixels))
    What it does
      Simulates a trading room
      AI agents run trades
      Shared portfolio updates
    Visuals
      Pixel art office
      Eleven clickable stations
      Equity chart dashboard
    Agents
      Idle walking working states
      Configurable aggression
      Randomized trade outcomes
    Tech
      React 18 via CDN
      Babel in browser
      No build step needed
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Open index.html in a browser to watch six pixel-art AI agents simulate a trading room with a live portfolio and equity chart.

USE CASE 2

Modify agent aggression settings to explore how trading frequency affects simulated portfolio performance.

USE CASE 3

Use as a visual template for building your own multi-agent browser simulation with pixel art graphics.

Tech stack

JavaScriptReactBabel

Getting it running

Difficulty · easy Time to first run · 5min

Open index.html directly in a browser, no build step, no server, and no package manager needed.

MIT, use, copy, modify, and distribute freely for any purpose.

In plain English

PixelTrade is a browser-based simulation of a trading room drawn in pixel-art style. Six AI agents walk around a virtual office, visiting workstations, running trades, and updating a shared portfolio, all rendered in retro pixel graphics. It is a visual simulation rather than a real trading tool, no actual money or markets are involved. The dashboard shows the portfolio balance, profit and loss, and an equity chart that updates as the simulation runs. You can click on any of the eleven stations in the room to send the nearest available agent there. The simulation can run at normal speed or at two or four times normal speed. A settings panel lets you toggle autopilot on and off, adjust animation, and set an aggression level for the agents, which controls how often they trade versus how often they idle. The README is written in Thai, so readers who do not read Thai will need a translation for some details. The core behavior is described in the structure: each agent cycles through idle, walking, and working states. When working, the agent produces an outcome (a trade, an analysis note, etc.) that affects the portfolio. Trades have roughly a 66% win rate with randomized profit and loss amounts. The project uses React 18 loaded directly from a CDN and Babel running in the browser to handle JSX, so there is no build step and no package manager setup required. Opening the index.html file in a browser is enough to run it. Everything runs client-side with no backend or server needed. The code is organized into a handful of JSX files handling the room rendering, simulation logic, sidebar panel, trade history, and analysis view. It is licensed under MIT.

Copy-paste prompts

Prompt 1
In ai-agents-pixels, how do I add a seventh AI agent with a different trading strategy than the existing six?
Prompt 2
I want to change the trade win rate in ai-agents-pixels from 66% to 50%. Which part of the simulation logic should I edit?
Prompt 3
The README is in Thai, can you translate the key setup and configuration instructions and explain how to change the simulation speed?
Open on GitHub → Explain another repo

← wongsakorn-krub on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.