agentmods.dev

tool-ui-implementer

An agent for implementing Tool UI components in the project’s required React and TypeScript file structure.

In plain words
What is it for?
Use it after a design specification is ready to build a new Tool UI component and its adapter, schema, documentation stub, and related files.
Why use it?
It handles the component scaffolding, JSON-safe data contract, parsing, error handling, accessibility, and action behavior that can otherwise be easy to miss.

Agent for Claude Code

773 3mo ago A scan 27 tokens original MIT
View the source file assistant-ui/tool-ui
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/assistant-ui/tool-ui/tool-ui-implementer
Clone the repo
git clone --depth 1 https://github.com/assistant-ui/tool-ui

Made for: Claude Code.

Per session 27 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 705 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00027 $0.00705
Opus 5 $0.00014 $0.00352
Sonnet 5 $0.00005 $0.00141
Haiku 4.5 $0.00003 $0.00071

Measured 2d ago against content hash 7fff449b0eb7, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

tool-ui-implementer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/agents/tool-ui-implementer.md · 110 lines

How it starts

The opening of the file, as written. The whole thing — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Tool UI Implementer Agent

You implement a new Tool UI component to current repo standards.

Context

Tool UI is maintainer-owned and copy/paste-first. Readability and predictable contracts are mandatory.

Input

You receive a design spec with:

  • slug + intent
  • schema shape
  • action semantics
  • receipt semantics
  • accessibility requirements

Implementation Steps

1. Scaffold First

For a new component, run:

pnpm component:new <slug>

Then extend scaffolded files instead of creating ad-hoc structure.

2. Component Directory Contract

Ensure apps/www/components/tool-ui/<slug>/ includes:

  • _adapter.tsx
  • schema.ts
  • <slug>.tsx
  • error-boundary.tsx
  • index.ts or index.tsx
  • README.md

3. Schema + Parse Contract

Use current schema contract pattern:

  • defineToolUiContract from ../shared/contract
  • parseSerializableX
  • safeParseSerializableX

Rules:

  • serializable schema is JSON-safe only
  • className is client-only, not in serializable schema
  • do not use .default() on Zod fields
  • receipt prop is choice (never confirmed/decision)

4. Component Rules

  • Root node includes data-slot and data-tool-ui-id
  • Use explicit, easy-to-read logic over dense abstractions
  • Prefer direct shared imports (../shared/schema, ../shared/contract, etc.) over ../shared barrel imports
  • If actions exist, follow shared actions pattern:
    • responseActions
    • onResponseAction
    • onBeforeResponseAction when needed
    • ActionButtons + normalized actions config
  • If component has post-action busy state, expose it with aria-busy

5. Error Boundary + Exports

  • Use createToolUiErrorBoundary from ../shared/error-boundary
  • Export component, error boundary, schema, parse/safeParse helpers, and types
  • Update aggregate exports in apps/www/components/tool-ui/index.ts

6. Tests for Non-Trivial Behavior

For logic-heavy behavior, add focused tests in:

  • apps/www/lib/tests/tool-ui/<slug>/...

Good candidates:

  • deterministic ids/keys
  • state transition helpers
  • action semantics
  • parsing contracts

Read the full file on GitHub · 110 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 110 lines · 27 tokens per session scan A 7fff449b0eb7

Subscribe to this mod's changes

tool-ui-implementer is an agent published in the GitHub repository assistant-ui/tool-ui (773 stars, last pushed 3mo ago), licensed MIT. It adds 27 tokens to every session and 705 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

FrontendLLMReactaichatcomponentsmcpui
Related

Other agents, from other repositories

storybook-debugger

Use this agent when you need to debug and fix issues in the HeroUI Storybook development environment, particularly CSS transformation errors, Tailwind CSS v4 compatibility issues, or component styling problems. This includes investigating build errors, runtime errors in the browser, and issues with the CSS-to-JS…

heroui-inc/heroui · 0 tokens

component-example-creator

Use this agent when the user requests examples for a component, asks to add stories to a component, needs documentation examples updated, or mentions creating/updating component demonstrations. Examples:\n\n \nContext: User is working on the Checkbox component and wants to add new usage examples.\nuser: "Can you…

chakra-ui/ark · 0 tokens

Accessibility Expert

Expert assistant for web accessibility (WCAG 2.1/2.2), inclusive UX, and a11y testing.

Polydile/dile-components · 28 tokens

react-frontend

Use this agent PROACTIVELY when building React user interfaces, creating components, implementing pages, managing state, styling with Tailwind, handling forms, or optimizing frontend performance. Invoke for any React 19+, Next.js 15+, or TypeScript frontend work including Server Components, Server Actions, and modern…

lando-labs/cami · 68 tokens

chat-agents

Build AI-powered chat interfaces with AIChatAgent and useAgentChat. Messages are automatically persisted to SQLite, streams resume on disconnect, and tool calls work across server and client.

cloudflare/agents · 0 tokens

kumo

Use when working on Kumo component library, docs site, or Figma plugin.

cloudflare/kumo · 16 tokens