tool-ui CLAUDE.md

A copy-and-customise component library for building interfaces where people interact with AI assistants and their tools. The source code is placed directly into a project so developers can modify it.

In plain words
What is it for?
Use it when developing assistant interfaces with React, Tailwind, Radix, or Lucide, and when running the project's build, check, lint, typecheck, or test commands.
Why use it?
It provides ready-made interface pieces and project checks for formatting, linting, type errors, and tests without requiring many extra dependencies.

Instructions file

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 instructions/assistant-ui/tool-ui/claude-md
Clone the repo
git clone --depth 1 https://github.com/assistant-ui/tool-ui
Per session 887 This file is loaded in full into every session.
When invoked 887 The same file — it is already loaded in full.
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.00887 $0.00887
Opus 5 $0.00443 $0.00443
Sonnet 5 $0.00177 $0.00177
Haiku 4.5 $0.00089 $0.00089

Measured 3d ago against content hash 661aad540b3a, 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 CLAUDE.md 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 3d 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.md · 88 lines

How it starts

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

Tool UI

Copy/paste component library (shadcn/ui model) for AI assistant interfaces. Users copy component directories into projects and modify them. Source code is the product—readability over cleverness.

Commands

pnpm dev          # Dev server (Turbopack)
pnpm build        # Production build
pnpm check        # Parallel: typecheck + oxlint + eslint + format check
pnpm lint:fix     # Fix lint errors (run before committing)
pnpm typecheck    # TypeScript checking (tsgo)
pnpm test         # Run tests (Vitest)

Tooling

  • Formatter: Oxfmt (config: apps/www/.oxfmtrc.jsonc) — Tailwind class sorting + import sorting
  • Linter: Oxlint (apps/www/.oxlintrc.json) handles standard rules; ESLint (apps/www/eslint.config.ts) retained only for no-restricted-syntax, no-restricted-imports, custom tool-ui/* rules, and React Compiler hooks
  • Typecheck: tsgo (@typescript/native-preview) — native TypeScript compiler
  • Parallel checks: pnpm check runs typecheck + all linters + format in parallel via npm-run-all2

Stack

  • Package manager: pnpm (required)
  • Dependencies: Only shadcn/ui prerequisites (Tailwind, Radix, Lucide)—users shouldn't need new deps

Architecture

Component Structure

Each component lives in apps/www/components/tool-ui/{name}/. Reference: apps/www/components/tool-ui/approval-card/

Key files:

  • index.tsx — Barrel exports
  • {name}.tsx — Main component
  • schema.ts — Zod schema + SerializableX types
  • _adapter.tsx — shadcn re-exports

The shared/ directory contains utilities all components need.

Documentation Site

Interconnected registries:

  • Component metadata: apps/www/lib/docs/component-registry.ts
  • Presets (example data): apps/www/lib/presets/{component}.ts
  • Preview rendering: apps/www/lib/docs/preview-config.tsx
  • Doc pages: apps/www/app/docs/{component}/content.mdx
  • Gallery: apps/www/app/docs/gallery/page.tsx

Key Patterns

Component API

  • Tailwind for layout: No maxWidth/padding props—users customize via className
  • Standard widths: Cards use min-w-80 max-w-md, compact components use max-w-sm
  • Flat props: Avoid nested config objects
  • Semantic action IDs: Use id: "confirm" / id: "cancel" for local and decision actions
  • Receipt state: Use choice prop to render confirmed state (e.g., <OptionList choice="option-a" />)

Read the full file on GitHub · 88 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. 3d ago First seen · 88 lines · 887 tokens per session scan A 661aad540b3a

Subscribe to this mod's changes

tool-ui CLAUDE.md is an instructions file published in the GitHub repository assistant-ui/tool-ui (773 stars, last pushed 3mo ago), licensed MIT. It adds 887 tokens to every session, about $0.0044 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.