INTERFACE COMPONENTS FOR AI · AGENT · CLI

Small pixels. Clear intent.

Choose a component, try it live, copy the code.

$npm install pixel.mdv0.1.3 · npm ↗

First time? Get one component running 30-second quick start ↗

In a Vite app, install once, import the component in your JavaScript entry, then place its element beside your existing UI.

01 · APP ENTRY

import 'pixel.md/indicator';

02 · YOUR CHAT UI

<pixel-agent-status state="thinking" label="Thinking…"></pixel-agent-status>

Open the runnable Vite example ↗

COMPONENTS01 — 05

Indicator

10 STATES · ONE API

01 / THINKING

02 / SEARCHING

03 / BROWSING

04 / READING

05 / PLANNING

06 / ACTING

07 / USING TOOL

08 / BUILDING

09 / VERIFYING

10 / RESPONDING

Install & usage Show code ↗

<script type="module">import "pixel.md/indicator";</script>
<pixel-agent-status state="thinking" label="Thinking…"></pixel-agent-status>

Chat effects

Animated pixels around your existing chat input, from quiet frames to tiny moving scenes.

10 EFFECTS · ONE WRAPPER

01 / OrbitTwo signals · continuous perimeter

02 / HopThree pixels · shallow bounce

03 / AnchorColored corners · breathing frame

04 / Bevel3D pixel frame · vertical axis

05 / Tilt3D pixel frame · horizontal axis

06 / PrismPixel frame · diagonal axis

07 / Roadtrip · IDLESlow cruise · waiting for your message

08 / Roadtrip · WORKINGSame drive · pixel exhaust while the agent works

09 / Cat nap · IDLESleepy paws resting on the input rim

10 / Churro time · WORKINGBusy paws · diligently licking a churro

Install & usage Show code ↗

<script type="module">import "pixel.md/chat-effect";</script>
<pixel-chat-effect variant="orbit">
  <your-chat-input></your-chat-input>
</pixel-chat-effect>

UI elements

Click a preview to try it.

22 ELEMENTS · INTERACTIVE

01 / Background toggle

CONTROL

02 / Count up

NUMBER

03 / Saved toast

TOAST

04 / Workflow tabs

SELECT

05 / Approval check

CHECKBOX

06 / Activity reveal

DISCLOSURE

07 / Workspace progress

PROGRESS

08 / Source citations

CITATION

09 / Retry request

RETRY

10 / Answer feedback

FEEDBACK

11 / Copy response

COPY

12 / Attachment chip

ATTACHMENT

13 / Task queue

QUEUE

14 / Send approval

APPROVAL

15 / Response stream

STREAM

16 / Tool handoff

HANDOFF

17 / Plan selection

DECISION

18 / Usage meter

USAGE

19 / Workflow stepper

STEPS

20 / Voice input

VOICE

21 / New responses

SCROLL

22 / Upload queue

UPLOAD

Install & usage Show code ↗

<script type="module">import "pixel.md/elements";</script>
<pixel-ui-element variant="toast"></pixel-ui-element>

Pixel bots

Small characters for assistants, agent teams, and chat bylines.

8 AVATARS · 6 STATES

TRY A STATE

SanEveryday assistant

WoniResearch & discovery

DuriIdeas & quick tasks

BomiBackground worker

TaeoTools & operations

NariFast responses

HaruAnalysis & review

MinoAgent coordinator

AGENT TEAM

WoniReading 4 sources

ACTIVE

TaeoPreparing the next step

QUEUED

BomiWaiting for a handoff

IDLE

IN CONVERSATION

Can you check the latest release notes?

I found two changes that affect your setup. Want a short summary?

SANRESPONDING

Install & usage Show code ↗

<script type="module">import "pixel.md/bot";</script>
<pixel-bot-avatar variant="mote" state="working" label="San"></pixel-bot-avatar>

Terminal CLI

Node.js helpers for real CLI output. Previews show the pixel style; copied code runs in your terminal.

14 PIXEL PATTERNS · NODE API

01 / Command prompt

INPUT

02 / Command output

OUTPUT

03 / Task progress

PROCESS

04 / Run confirmation

GUARDRAIL

05 / Git diff

CHANGES

06 / Dev session

SESSION

07 / Stepped panel

FRAME

08 / Choice menu

SELECT

09 / Workflow rail

STEPS

10 / Pixel meter

USAGE

11 / Activity sprite

RUNNING

12 / Pixel wave

STREAM

13 / Agent fleet

PARALLEL

14 / Stream cursor

GENERATE

Install & usage Show code ↗

import { askPixelCommand, pixelOutput } from 'pixel.md/terminal';

const command = await askPixelCommand({ cwd: '~/project' });
console.log(pixelOutput({ command, status: 'success' }));