# AI use cases for Robot Heads (fayazara/robot-heads)

Repo: [fayazara/robot-heads](https://github.com/fayazara/robot-heads) | Use cases: 4 | Page: https://dedupedai.com/use-cases/fayazara-robot-heads/

robot-heads is an MIT-licensed React component library that draws animated 3D robot heads with LED faces showing an AI agent's state, such as thinking, searching, or speaking.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Show a live agent status in a React app: https://dedupedai.com/use-cases/fayazara-robot-heads/show-agent-status-in-react-ui/
- Use small robot avatars in a chat or user list: https://dedupedai.com/use-cases/fayazara-robot-heads/robot-avatars-in-chat-list/
- Review all nine robot states before choosing a design: https://dedupedai.com/use-cases/fayazara-robot-heads/preview-robot-states-before-building/
- Change the TV head by building from the repo source: https://dedupedai.com/use-cases/fayazara-robot-heads/customise-tv-head-from-source/

## How to show a live agent status in a React app with Robot Heads

Repo: [fayazara/robot-heads](https://github.com/fayazara/robot-heads) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Render a robot head that changes face and motion as the agent moves between states.

**Who it is for:** A front-end developer building a chat or agent dashboard who needs users to see whether the agent is idle, thinking, searching, or speaking.

**The problem:** Plain text status labels are easy to miss, and building custom animated feedback for each agent state takes time.

**The outcome:** A React component that displays a 3D robot head whose screen, motion, and antenna light match the agent's current state.

### Steps

1. Run `npm install robot-heads` in your React project.
2. Import RobotHead from 'Robot Heads' in the component that shows agent status.
3. Map your agent's status values to the nine states in the README: idle, thinking, searching, listening, speaking, working, happy, error, sleeping.
4. Pass the current state to RobotHead as shown in the README Quick start, and set a size that fits your layout.
5. Run your app and change the agent status to confirm each state renders.

### Prompt to paste into your agent

```text
In the React project at <project path>, run `npm install robot-heads` and render a RobotHead whose state follows the agent's status, mapping each status to one of the nine README states. Expected output: a component file that type-checks against React 18 or newer. Verify the prop names against the installed package types before finishing, because the README props block is not fully legible.
```

### Caveat

The props section of the README did not come through cleanly, so confirm exact prop names in the installed package before wiring the state.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/fayazara-robot-heads/show-agent-status-in-react-ui/

## How to use small robot avatars in a chat or user list with Robot Heads

Repo: [fayazara/robot-heads](https://github.com/fayazara/robot-heads) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Drop a compact robot head into list rows using the antenna-free small size option.

**Who it is for:** A developer building a list of agents or bots, such as a sidebar of chat assistants, where each row needs a small avatar.

**The problem:** A full-size robot with an antenna wastes space in a small avatar slot, and list layouts can clip animations.

**The outcome:** Compact robot avatars in each row that fill their box, with a clear accessible label for screen readers.

### Steps

1. Run `npm install robot-heads` in the project.
2. Render RobotHead in each list row with antenna={false} and a small size.
3. Pass your own aria-label if the default state label does not describe the bot.
4. Check that the row container does not use overflow: hidden around the avatar, since hops would be cut off.
5. Scroll the list and confirm the avatars sit flush with the text in each row.

### Prompt to paste into your agent

```text
In the React project at <project path>, install robot-heads and render a list of agent avatars using RobotHead with antenna={false} and a small size. Expected output: a list component where each avatar keeps its state and has an aria-label. Verify that no parent element in the list uses overflow: hidden around the avatar.
```

### Caveat

The README notes that antenna={false} only drops the stem and light, so the bot still needs the default knob on top and the square or circle shape will look best at small sizes.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/fayazara-robot-heads/robot-avatars-in-chat-list/

## How to review all nine robot states before choosing a design with Robot Heads

Repo: [fayazara/robot-heads](https://github.com/fayazara/robot-heads) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README

Look through the playground to pick a shape and state set before writing any code.

**Who it is for:** A product designer or product manager deciding how an AI agent should look and signal its status in a product.

**The problem:** Choosing a visual style for agent states is hard to judge from a text description alone.

**The outcome:** A short list of preferred shapes and the states to map to agent behaviour, ready to hand to a developer.

### Steps

1. Open the playground at https://robot-heads.fayaz.workers.dev in a desktop browser.
2. Compare the four shapes: the classic TV, the porthole, the nut, and the wide rectangle.
3. Review each state against the README table: idle, thinking, searching, listening, speaking, working, happy, error, and sleeping.
4. Note which state suits each agent event in your product.
5. Share the chosen shape and state list with the developer who will run `npm install robot-heads`.

### Prompt to paste into your agent

```text
Open https://robot-heads.fayaz.workers.dev and list the four shapes and nine states from the robot-heads README. Expected output: a table that maps each agent event in <product description> to one state and one shape. Verify each state name matches the README exactly.
```

### Caveat

The playground is a preview hosted by the author, so the design choice it shows may differ from how the component looks at your chosen size inside your own layout.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/fayazara-robot-heads/preview-robot-states-before-building/

## How to change the TV head by building from the repo source with Robot Heads

Repo: [fayazara/robot-heads](https://github.com/fayazara/robot-heads) | Difficulty: Advanced | Time: 1 hour | Basis: From the README

Clone the repo, run the playground on its source, and rebuild the library after edits.

**Who it is for:** A developer who wants a changed look or a fork of the robot head, and is comfortable with pnpm and TypeScript.

**The problem:** The published package may not match a custom visual idea, and the source needs to run locally to iterate quickly.

**The outcome:** A local playground with edits that hot-reload, plus a fresh build of the library in dist/.

### Steps

1. Clone https://github.com/fayazara/robot-heads and change into the folder.
2. Run `pnpm install` to install dependencies.
3. Run `pnpm run dev` to start the playground on the library source.
4. Edit files under src/, such as src/tv/, and watch the playground hot-reload.
5. Run `pnpm run typecheck` and then `pnpm run build` to produce the library in dist/.

### Prompt to paste into your agent

```text
Clone https://github.com/fayazara/robot-heads, run `pnpm install`, then `pnpm run typecheck` and `pnpm run build`. Expected output: a dist/ folder with the built library and no type errors. Verify that the build succeeds before reporting any changes to the TV head under src/tv/.
```

### Caveat

The README describes the geometry, lighting, and renderer in detail, so changes to src/tv/ can affect every shape, and the playground deploy command is only needed if you publish your own Worker.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/fayazara-robot-heads/customise-tv-head-from-source/