Before it runs
Agree on what happens
The agent restates what it understood and the plan it will follow. Correcting a guess costs one click, not a rewritten prompt.
BetaVersion 0.1.0
Components · Blocks · Thoughtful interactions
Build interfaces that feel considered.
PixelDosa is a growing library of interactive React components and ready-to-use blocks, crafted for the details people notice—from everyday product flows to thoughtful AI experiences.
Research assistant
A readable run, from intent to result
While it works
See what the agent is doing.
Task
Compare the top five competitors
Tools, sources and progress stay visible while the run is in motion.
✓Read the request
✓Search the repository
3Summarize the findingWorking
A library that grows with the work
Start with a detail. Build toward the whole experience.
Use a single interaction or start with a composed flow. Over time, PixelDosa will grow into complete page templates, too.
A featured playground · AI
AI, designed as a real interaction.
From making a plan to reviewing the result, these pieces make complex AI interactions clear, steerable, and grounded in user control.
AI Chat Experience. Live. Pick a question and watch it think, search, read and answer.
View blockWhat are we fixing today?
Ask about your codebase. Answers show what was read and link to the source.
AI workflows
Trust is decided in three moments.
A chat box covers none of them. Each moment has its own components, designed from research on where people over-trust, under-trust or give up on agents.
While it works
See it, steer it, stop it
Presence that shows whose turn it is, reasoning you can open, redirects that don't throw work away, and approvals that say what can't be undone.
When you review
Check it in one step
Sources that show the passage, tool calls that separate what it read from what it claimed, and review that starts with what's most likely wrong.
The AI design language
Clear signals. Consistent behavior.
Components agree with each other because they share rules. That's what makes a screen built from thirty of them feel like one product.
Motion means the machine is busy
Stillness means it's your turn. Every indicator follows the same rule, so you can tell at a glance who's waiting on whom.
Nothing commits silently
No accept-all shortcuts, no suggestion that sends itself, no approval that hides whether it can be undone.
Confidence in tiers, never fake precision
“87% confident” invites trust nobody measured. Tiers say what's known, and percentages are only for real progress.
Shimmer the verb, never the content
“Searching” moves while it searches. Answers, numbers and code hold still, so they can be read and trusted.
Four markers, four meanings. Everything else is ink.
Blue · working
Progress, the step it's on, what it's reading right now.
Orange · needs you
A question or an approval. The only colour that asks for action.
Red · blocked
Something failed or is in the way, always with a way forward.
Green · done
A finished result being handed to you. Used sparingly.
You can tell whose turn it is.
Agent FigureThe agent's pose is driven by the real run state, so it moves while it works and holds still when the next move is yours. Optional — every other component states the same thing in words.
Try it:Working poses move.
- IdleReady when you are.
- ListeningI'm listening…
- ThinkingLet me think…
- PlanningHere's my plan…
- SearchingChecking sources…
- WorkingPutting it together…
- AskingI need your input.
- BlockedSomething's in the way.
- DoneAll done!
Your coding agent knows how to use it.
Install through the shadcn CLI, and add the agent guide so Claude Code, Cursor or Copilot pick the right component and follow the rules: no silent commits, approvals that state consequences, Stop always visible.
- shadcn registry and MCP. Agents search and install by name.
- Agent guide. Installs as a Claude Code skill.
- /llms.txt and one markdown page per component.
bash
npx shadcn@latest add @pixeldosa/ai-chat-experience
npx shadcn@latest add @pixeldosa/pixeldosa-agent-guide