Transcript to Prototype

AI chats

About

An animated illustration where a meeting transcript turns into a dashboard, one message at a time, through an AI step in the middle. Pausable, theme-aware, reduced-motion friendly.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Transcript to Prototype to your project and fits it to your theme.

Code

How Transcript to Prototype is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TranscriptToPrototype } from "@/components/ui/transcript-to-prototype";

/* A kickoff call that turns into a dashboard, one sentence at a time.
   Every line on the left builds one piece of the screen on the right. */

const settings = {
  accent: "#7f72e3",
  accentForeground: "#060408",
  title: "Kickoff: new dashboard",
  meta: "PM & Designer · 42:16",
  screenTitle: "Dashboard",
  message1: "We need a dashboard. Everyone else has one.",
  message2: "Put the main button at the top, where people look.",
  message3: "And metrics. Lots of metrics. Numbers feel important.",
  message4: "Add what to do next, so nobody asks me on Slack.",
  stepDuration: 2.8,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="flex w-full items-center justify-center p-6">
      <TranscriptToPrototype
        className="max-w-5xl"
        accent={s.accent}
        accentForeground={s.accentForeground}
        title={s.title}
        meta={s.meta}
        screenTitle={s.screenTitle}
        stepDuration={s.stepDuration}
        messages={[
          { who: "PM", at: "12:04", text: s.message1 },
          { who: "Designer", at: "12:11", text: s.message2 },
          { who: "PM", at: "12:29", text: s.message3 },
          { who: "Designer", at: "12:34", text: s.message4 },
        ]}
      />
    </div>
  );
}