Media Transcriber

Component

About

A voice recorder and audio-upload widget that transcribes speech to text via a streaming or server-function backend, showing live recording time, a loading state, and a copy-to-clipboard transcript. Ported to React from the original Svelte "Transcriber" block in ebnsina's Sina UI library (MIT), credited to the original author.

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

Code

How Media Transcriber is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import MediaTranscriber from "@/components/ui/media-transcriber";
import type { TranscriptionGenerateInput } from "@tanstack/ai-react";
import type { TranscriptionResult } from "@tanstack/ai";

// Synthetic fetcher so the demo works without a real backend: it stands in for the
// `fetcher`/`connection` prop the real component expects (e.g. fetchServerSentEvents('/api/transcribe')).
async function demoFetcher(
  _input: TranscriptionGenerateInput,
): Promise<TranscriptionResult> {
  await new Promise((resolve) => setTimeout(resolve, 1200));
  return {
    text: "This is a synthetic transcript for the demo preview — record or upload audio to see it update.",
  } as TranscriptionResult;
}

export default function MediaTranscriberDemo() {
  return (
    <div
      className="flex min-h-screen w-full items-center justify-center p-6"
      style={{ background: "var(--ui-bg)" }}
    >
      <div className="w-full max-w-md">
        <MediaTranscriber fetcher={demoFetcher} />
      </div>
    </div>
  );
}