Component Doc Generator

An interactive tool that turns a bare React component into a documented one. Paste a component or pick a sample, and Claude reads the source, infers its props, and streams back a description, a props table, and usage snippets — rendered next to a live preview of the component itself.

The doc generation runs through a streaming API route: the model's output lands token by token on the client rather than after a long blocking wait, with validation on both sides of the wire so a malformed or oversized paste fails cleanly instead of hitting the model at all.

It's built as a playground, not a form — a client-side island that holds the component source, the live preview, and the streamed docs in one view, so the props table updates in step with what's actually rendered.

The pitch is design-systems teams write component docs by hand, or not at all. This is what that step looks like when an LLM does the first pass and a human edits from there instead of starting blank.

Component Doc Generator

links