Case study: this site's header search, authored over MCP
The search field in this site's header — recent searches, recently viewed pages, suggestions — was built by an AI agent against the Inkbridge MCP server, one story per state, conformance-gated at every step. The full flow, as it actually ran.
How it works
The methodology page “A stateful field, state by state” argues you model a search field's state space, not its transitions. This site's own header search is that argument shipped: a presentational core with explicit Closed, RecentSearches, WithSuggestions, Empty, and Loading states — each its own story, each its own Figma frame — and a thin client wrapper owning the filtering, keyboard handling, and localStorage recents the scanner never needs to see. The agent discovered the existing primitives and token vocabulary over MCP instead of inventing them: the field reuses `primary-foreground` tints on the header's `primary` bar, the panel sits on `popover` with `muted` rows, and the category chips are Badge instances. `check_conformance` verified every class resolved to a real token, `diagnose_component` confirmed the core was story-ready and — by flagging the wrapper's router and state couplings — that the presentation/behaviour seam was cut in the right place, and `write_component` landed the gated files. A final `scan` and `diff_model` closed the loop: exactly one component added, no token drift.
Usage
- 1
`list_components` + `get_component` — find the primitives and conventions already in the model (the navbar, Badge for category chips) before writing anything.
- 2
`get_tokens` — read the real token vocabulary (`primary-foreground`, `popover`, `muted-foreground`) instead of inventing colors for the header's primary bar.
- 3
`draft_component` — scaffold a CVA component and story file as text to start from.
- 4
Author the state space — one explicit `state` per visual situation, one story each, with sampled data; keep behaviour out of the core.
- 5
`check_conformance` — verify every class maps to the model; fix anything flagged with `suggest_token` rather than guessing.
- 6
`diagnose_component` — confirm the core is story-ready and the behaviour wrapper's couplings (router, state, effects) are all on the client side of the seam.
- 7
`check_story` — verify meta.title, one story per state, and the fixed-width wrapper convention.
- 8
`write_component` — land the gated component + story in the working tree for human review.
- 9
`scan` + `diff_model` — rebuild the model and confirm the change set: one component added, tokens unchanged.