Interview Tree: Turning User Interview Transcripts into Structured Opportunity Trees with Claude
Source: Dev.to
I built Interview Tree because synthesizing user interview transcripts by hand is slow and error-prone. Reading through long conversations to find recurring problems, group themes, and pull supporting quotes takes hours. I wanted to see if Claude could do that extraction reliably enough to be useful in a real research workflow. Paste any user interview transcript into the editor, hit analyze, and the app returns a structured opportunity tree: a hierarchy of problems, themes nested under each problem, and verbatim quotes from the participant anchored to each theme. The output renders as a collapsible, depth-indented, color-coded tree you can explore at every level. Every theme is backed by exact quotes — not summaries or paraphrases — so you can see what the participant actually said rather than what the model inferred. There’s also a sample transcript preloaded if you want to explore the output immediately without any data of your own. The app is a Next.js 16 / React 19 frontend with a server-side API route that handles the Claude call. When you submit a transcript, the route sends it to claude-sonnet-4-6 via the Anthropic SDK with a prompt that asks for a specific typed JSON structure. Claude returns that structure — problems, themes, quotes — and the frontend renders it recursively into the tree UI. Using typed, validated JSON as the intermediate format means the tree renders consistently every time. There’s no brittle parsing of prose output. The UI is built with Tailwind CSS, shadcn/ui components, and Novus by Pendo. The whole thing deploys on Vercel. This was a hackathon project. I used Claude Code — Anthropic’s agentic coding tool — to generate and iterate on the codebase throughout the build. Claude Code handled the Next.js scaffold, the API route logic, the recursive tree rendering, and the Tailwind styling. The in-product AI is a separate Claude API call (claude-sonnet-4-6) running server-side — distinct from the tooling used to write the code. Live app: interview-tree.vercel.app
Demo video: youtube.com/watch?v=VxH1GkPYi2w
Source: github.com/kyisaiah47/interview-tree
Stack: Claude API · Next.js 16 · React 19 · Tailwind CSS · shadcn/ui · Novus by Pendo · Vercel