Tooling
Token costs with coding agents
Building UI with an agent is token-hungry: component sources, build logs and screenshots all land in the context and are re-sent on every turn. These habits keep the bill down without changing what you build.
Fetch one component at a time
Ask the agent to search first and read only what it will use. Over MCP that is search_components followed by get_component for the one match, rather than list_components and every source. From the shell:
npx @agents-npm-packages/vibeui search "date picker" --json
npx @agents-npm-packages/vibeui get calendar --sourceInstall instead of pasting
add_component (or npx @agents-npm-packages/vibeui add <name>) writes the file straight into your project. The agent does not need to read the source back into the conversation to use it; it only needs the import path and props.
Trim build and lint output
A failing next build can print hundreds of lines to report one type error. Run the narrow check (tsc --noEmit on one file, or the single failing test), and consider a shell output filter such as RTK, which runs common commands through output filters before the agent reads them.
Shrink large file reads and tool results
When an agent must read something big, a long log, a large file or a bulky MCP result, a context compression tool can cut it before it reaches the model:
- SuperCompress is hosted and question-aware: it keeps the original lines that answer the current question, word for word, so class names, props and paths survive. It installs into Claude Code, Cursor, Codex and other agents with one command.
- Headroom does similar work locally and is open source.
- Context Mode keeps large MCP results out of the conversation and lets the agent search them instead.
npm install -g supercompress-proxy && supercompress setupKeep sessions short
Every turn re-sends the history, including old screenshots. Crop screenshots to the region that matters, run /compact between phases (layout, then states, then polish), and start a fresh session once a screen is done.
At a glance
| Where tokens go | What to do |
|---|---|
| Browsing the catalog | search_components, then get_component for one match |
| Component source in chat | add_component writes the file; the agent uses the import |
| Build and lint output | Run the narrow check; filter shell output (RTK) |
| Large logs, files, MCP results | Context compression (SuperCompress, Headroom, Context Mode) |
| Long sessions and screenshots | Crop, /compact between phases, fresh sessions per screen |