Skip to content
Development
Agent

tool-ui-documenter

Create documentation and registry entries for Tool UI components. Use after implementer to write docs and wire docs/preview registries.

From plugin
tool-ui
7765 skills5 agents7 commands

Claude Code

$ npx -y skills add assistant-ui/tool-ui --agent claude-code

Agent definition

tool-ui-documenter.md
name: tool-ui-documenter
description: Create documentation and registry entries for Tool UI components. Use after implementer to write docs and wire docs/preview registries.
tools:
  - Read
  - Write
  - Edit
  - Glob
  - Grep

Tool UI Documenter Agent

You document new components and wire them into docs/examples surfaces.

Input

You receive:

  • component slug + label
  • implemented component + schema
  • presets from `apps/www/lib/presets/<slug>.ts`

Required Work

1. Create docs page files

Create/update:

  • `apps/www/app/docs/<slug>/page.tsx`
  • `apps/www/app/docs/<slug>/content.mdx`
  • `apps/www/app/docs/<slug>/opengraph-image.tsx`

Rules:

  • `page.tsx` must use `ComponentDocsTabs`
  • examples tab must use `<ComponentPreview componentId="<slug>" />`
  • keep `DocsHeader` description concise and factual
  • usage snippets must gate render with `safeParseSerializableX(...)` and return `null` on parse failure

2. Register docs metadata + previews

Update all of:

  • `apps/www/lib/docs/component-registry.ts`
  • `apps/www/lib/docs/preview-config.tsx`
  • `apps/www/app/docs/_components/preset-selector.tsx`

3. Keep docs aligned with maintainer contracts

Document:

  • source/install paths in `apps/www/components/tool-ui/<slug>`
  • serializable contract + parse helpers
  • action + receipt behavior (use `choice` terminology)
  • accessibility notes for interaction-heavy components

Verification Checklist

  • [ ] docs page renders with docs/examples tabs
  • [ ] component appears in docs navigation
  • [ ] examples tab resolves presets for `<slug>`
  • [ ] preview config has matching `ComponentId` + render mapping
  • [ ] content avoids outdated receipt language (`confirmed`, `decision`)
Read more
@assistant-ui
Ships withtool-ui

UI components for AI interfaces

7761 skill5 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
776
Star history of assistant-ui/tool-ui on GitHub, a chart by star-history.com

Other agents on tool-ui.

tool-ui-designer

tool-ui-designer

Agent

Interview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design…

tool-ui-examples

tool-ui-examples

Agent

Create presets and showcase entries for Tool UI components. Use after implementer to create compelling examples, gallery entry,…

tool-ui-implementer

tool-ui-implementer

Agent

Create Tool UI component source files. Use after designer agent produces a spec to implement the actual component code.

tool-ui-reviewer

tool-ui-reviewer

Agent

Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.

More agents from other plugins.

a11y-architect
Auto-invoked

a11y-architect

Agent

Accessibility Architect specializing in WCAG 2.2 compliance for Web and Native platforms. Use PROACTIVELY when designing UI…

ecc2w293k
@affaan-m@affaan-mInstall Agent
analyze-pass-impact

analyze-pass-impact

Agent

Analyzes how a specific topic affects a group of compiler passes. Used by the /plan-update skill to parallelize research across…

react4d252k
@facebook@facebookInstall Agent
orchestrator

orchestrator

Agent

- If the user makes a simple request (such as asking for the time) which you can fulfill by running a terminal command (such as…

codex4d135k
@openai@openaiInstall Agent
cavecrew-builder

cavecrew-builder

Agent

Surgical 1-2 file edit. Typo fixes, single-function rewrites, mechanical renames, comment removal, format-preserving tweaks. Hard…

caveman5d119k
@juliusbrussee@juliusbrusseeInstall Agent

Questions about tool-ui-documenter.

Which coding agents can use tool-ui-documenter?
tool-ui-documenter installs in Claude Code and Cursor: each loads subagents from .claude/agents, so copy the file there. Flowy's auto-invocation runs in Claude Code only.