What is 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.

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.

It provides ready-made interface pieces and project checks for formatting, linting, type errors, and tests without requiring many extra dependencies.

How assistant-ui/tool-ui configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to assistant-ui/tool-ui. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/assistant-ui/tool-ui/main/CLAUDE.md

Clone the repo

git clone --depth 1 https://github.com/assistant-ui/tool-ui

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/instructions/assistant-ui/tool-ui/claude-md/github.svg)](https://agentmods.dev/instructions/assistant-ui/tool-ui/claude-md)

Your own site

<a href="https://agentmods.dev/instructions/assistant-ui/tool-ui/claude-md"><img src="https://agentmods.dev/badge/instructions/assistant-ui/tool-ui/claude-md/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/instructions/assistant-ui/tool-ui/claude-md"><img src="https://agentmods.dev/badge/instructions/assistant-ui/tool-ui/claude-md.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

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. A grade says what 26 rules found in the file — not that it is safe.

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.

Model	Per session	Once invoked
Fable 5.1	$0.00887	$0.00887
Opus 5.5	$0.00355	$0.00355
Sonnet 5.5	$0.00177	$0.00177
Haiku 4.5	$0.00089	$0.00089

Measured 2mo ago against content hash 661aad540b3a, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 2mo 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.

2mo 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 (779 stars, last pushed 1mo ago), licensed MIT. It adds 887 tokens to every session, about $0.0035 per session on Opus 5.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.

Design and UX Frontend LLM ai chat components mcp ui

vscode buildNext.instructions.md

Working notes and architecture documentation for the new esbuild-based build system in build/next. Use when making changes to the new build pipeline (transpile/bundle commands, NLS plugin, source-map handling, resource copying, or self-hosting watch tasks).

microsoft/vscode · 9,715 tokens

tool-ui: Instructions file for Claude Code