X Show Me
Agents should show, not tell.
▶ Try the live examples (2 minutes, no install)
- The problem: chatbots answer everything with more text to read.
- The idea: when an answer has a shape, the agent builds a small screen you can look at and touch.
- The scope: this is about the UI, not the tool. It works with Claude Code, Codex, Pi, Google ADK, LangChain or your own app.
Before and after
Same task. Same agent. Two ways to talk.
"My checkout button is broken on phones. Fix it."
1. Point at it
You point. The agent doesn't quiz you.
2. Tap-through map
The whole system at a glance. The problem is already lit up.
3. Tap to decide
See each option. Tap one.
4. Work board
Long jobs count real steps. No guessed plan.
5. Drag to compare
Don't read about the change. Drag across it.
6. Motion clip
If it happens over time, play it.
The whole job: 774 words to read, or 6 taps, 1 drag and 3 looks.
A seventh shape, Flipbook, is a scrubber over real screenshots: motion over time without a video pipeline (skills/show-me/flipbook-card.mjs, example).
Sample data. Fern Coffee is made up, and both sides were written for this demo.
The 6 principles
- Shape over sentences. If the answer has a shape, show the shape.
- Next action first. The one thing to do now is the biggest thing on screen.
- One tap, not one paragraph. A tap fills your draft. You press send.
- Real or nothing. Real renders, real data, real steps. No fake progress.
- Details on demand. Start with the least. Keep the rest one tap away.
- Part of the conversation. No background, no border, no title bar of its own. The card sits in the chat like a figure; one quiet corner icon opens it full screen, and full screen fills whatever screen you are on.
One sentence is enough? Then write one sentence. Not everything needs a card.
Read the principles with examples
Use it with your agent
Show Me needs a rule, a card and a host.
- Give your agent the rule. Copy
skills/show-me.
- It writes a card. That's one HTML file with no network access.
- A host shows it. A tap comes back as text.
| Agent | The rule goes in | The card shows up through |
|---|
| Claude Code | .claude/skills/ | show-card.mjs |
| Codex | .agents/skills/ | show-card.mjs |
| Pi | ~/.pi/agent/skills/ | show-card.mjs |
| Google ADK | instruction | A tool and your web app |
| LangChain | system_prompt | A tool and your web app |
| Your own app | Your system prompt | A sandboxed iframe |
See the setup for each agent
Try a card now
This takes about a minute and needs Node 20 or newer.
git clone https://github.com/pisakhov/x-show-me
cd x-show-me
node skills/show-me/show-card.mjs examples/tap-to-decide.html
Tap an option and press Send. Your answer prints in the terminal. That's how an agent hears you.
MIT. Part of X Agent. ADHD ideas come from i-have-adhd. Motion clips render with HyperFrames (Apache-2.0).
