explaingit

ringhyacinth/star-office-ui

7,012HTMLAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

A pixel-art browser dashboard that shows your AI agent's current state, writing, idle, or error, as an animated character in a cozy virtual office, with an optional desktop overlay.

Mindmap

mindmap
  root((Star Office UI))
    What it does
      Visualize AI agent state
      Pixel art animations
      Live status at a glance
    Agent states
      Idle on sofa
      Writing at desk
      Error in bug zone
      Researching
    Tech
      Flask backend
      Phaser game engine
      Electron overlay
    Integration
      OpenClaw AI agents
      HTTP state updates
      Python CLI control
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

Display a live pixel-art visualization of your AI coding agent's state on a second monitor while it works.

USE CASE 2

Run the Electron desktop overlay so the virtual office appears as a transparent window on your desktop like a virtual pet.

USE CASE 3

Connect multiple AI agents to the same office so each appears as a separate animated character.

USE CASE 4

Use the HTTP endpoint to push state updates from any script or AI tool into the office visualization.

Tech stack

HTMLJavaScriptPythonFlaskPhaserElectron

Getting it running

Difficulty · moderate Time to first run · 30min

Pixel-art assets are non-commercial only, commercial deployment requires sourcing or replacing the art assets.

Code is MIT licensed for any use, the pixel-art assets are free for non-commercial use only, commercial use requires replacing or licensing the art.

In plain English

Star Office UI is a visual dashboard that turns the invisible work states of AI assistants into a small, cozy pixel-art office you can watch in a browser. When an AI agent is writing code, a tiny animated character walks to the desk area. When the agent is idle, the character rests on the sofa. When something goes wrong, the character moves to the bug zone. The idea is that anyone glancing at the page can immediately see what the AI is doing, what it did yesterday, and whether it is currently active, without reading any logs or terminal output. The project is built around six states: idle, writing, researching, executing, syncing, and error. You switch states either by calling a Python script from the command line, by sending an HTTP request from any other system, or by letting an AI agent update the state automatically as it works. The README is written primarily in Chinese but the interface itself supports Chinese, English, and Japanese. The backend is a small Flask server. The frontend is plain HTML and JavaScript using a game engine called Phaser to handle the animated pixel sprites. You run the server locally and open a browser tab to watch the office. If you want to share it publicly, the README suggests using Cloudflare Tunnel to expose the local server to the internet. The project works standalone or as a companion to OpenClaw, an AI agent framework. When paired with OpenClaw, the agent updates its own state automatically as it starts and finishes tasks, so the office reflects live activity with no manual input. Multiple agents can join the same office using a join key system, and each guest agent shows up as a separate character that moves around based on its own state. An optional Electron wrapper lets you run the office as a desktop overlay, a transparent window that sits on your desktop like a virtual pet. There is also optional integration with the Gemini AI image generation API to create custom backgrounds for the office. The code is under the MIT license, the pixel art assets are free for non-commercial use only.

Copy-paste prompts

Prompt 1
I want to connect Star Office UI to my custom AI coding script. Show me how to send HTTP state-update requests to the Flask server to switch between idle, writing, and error states.
Prompt 2
Set up Star Office UI as a transparent Electron desktop overlay on macOS so the pixel-art office sits on my desktop while I code.
Prompt 3
I am using OpenClaw with Star Office UI. Show me how to configure automatic state updates so the character moves when the agent starts and finishes each task.
Prompt 4
I want to add a new custom state to Star Office UI beyond the six built-in ones. Walk me through adding a new Phaser animation and the matching Flask route.
Open on GitHub → Explain another repo

← ringhyacinth on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.