[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "@elevenlabs/elevenlabs-js": "2.20.1", "ai": "5.0.81", "@ai-sdk/openai": "2.0.56" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "5.7.3" } } [V0_FILE]plaintext:file=".env.example" isEdit="true" isMerged="true" # ElevenLabs API Key # Get your API key from: https://elevenlabs.io/app/settings/api-keys ELEVENLABS_API_KEY=your_elevenlabs_api_key_here # OpenAI API Key (for script generation) # Get your API key from: https://platform.openai.com/api-keys OPENAI_API_KEY=your_openai_api_key_here [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Loader2, Skull } from "lucide-react" export default function PodcastGenerator() { const [topic, setTopic] = useState("") const [script, setScript] = useState("") const [choices, setChoices] = useState([]) const [storyHistory, setStoryHistory] = useState("") const [audioUrl, setAudioUrl] = useState("") const [isGeneratingScript, setIsGeneratingScript] = useState(false) const [isGeneratingAudio, setIsGeneratingAudio] = useState(false) const audioRef = useRef(null) useEffect(() => { if (audioUrl && audioRef.current) { audioRef.current.play().catch(console.error) } }, [audioUrl]) useEffect(() => { if (script && !audioUrl && !isGeneratingAudio) { generatePodcast() } }, [script]) const generateScript = async () => { if (!topic.trim()) return setIsGeneratingScript(true) setAudioUrl("") try { const response = await fetch("/api/generate-script", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ topic }), }) const contentType = response.headers.get("content-type") if (!contentType || !contentType.includes("application/json")) { const text = await response.text() console.error("[v0] Non-JSON response:", text) throw new Error("Invalid response format from server") } const data = await response.json() if (!response.ok) { throw new Error(data.error || "Failed to generate script") } setScript(data.script) setChoices(data.choices || []) setStoryHistory(data.script) } catch (error) { console.error("[v0] Error generating script:", error) alert(`Error generating script: ${error instanceof Error ? error.message : String(error)}`) } finally { setIsGeneratingScript(false) } } const continueStory = async (choice: string) => { setIsGeneratingScript(true) setAudioUrl("") try { const response = await fetch("/api/generate-script", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ topic, continueFrom: storyHistory, choice, }), }) const contentType = response.headers.get("content-type") if (!contentType || !contentType.includes("application/json")) { const text = await response.text() console.error("[v0] Non-JSON response:", text) throw new Error("Invalid response format from server") } const data = await response.json() if (!response.ok) { throw new Error(data.error || "Failed to continue story") } const newStory = storyHistory + "\n\n" + data.script setScript(data.script) setChoices(data.choices || []) setStoryHistory(newStory) } catch (error) { console.error("[v0] Error continuing story:", error) alert(`Error continuing story: ${error instanceof Error ? error.message : String(error)}`) } finally { setIsGeneratingScript(false) } } const generatePodcast = async () => { if (!script) return setIsGeneratingAudio(true) try { const response = await fetch("/api/generate-podcast", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ script }), }) if (!response.ok) { const contentType = response.headers.get("content-type") if (contentType && contentType.includes("application/json")) { const errorData = await response.json() throw new Error(errorData.error || "Failed to generate podcast") } throw new Error(`HTTP ${response.status}: Failed to generate podcast`) } const blob = await response.blob() const url = URL.createObjectURL(blob) setAudioUrl(url) } catch (error) { console.error("Error generating podcast:", error) alert(`Error generating podcast: ${error instanceof Error ? error.message : String(error)}`) } finally { setIsGeneratingAudio(false) } } return (

Interactive True Crime

Experience a dark, interactive true crime podcast where your choices shape the investigation. Featuring AI voices and atmospheric storytelling.

Begin Your Investigation Enter a true crime topic to start your interactive podcast experience

Crime Case or Topic setTopic(e.target.value)} className="bg-zinc-950 border-zinc-700 text-zinc-100 placeholder:text-zinc-600" />

{script && isGeneratingAudio && (

Generating audio for this segment...

)} {audioUrl && ( <> Listen Now Your podcast segment is ready

View Script

                </details>
              </CardContent>
            </Card>

            {choices.length > 0 && (
              <Card className="bg-zinc-900 border-zinc-800">
                <CardHeader>
                  <CardTitle className="text-red-600">What Happens Next?</CardTitle>
                  <CardDescription className="text-zinc-400">Choose how to continue the investigation</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  {choices.map((choice, index) => (
                    <Button
                      key={index}
                      onClick={() => continueStory(choice)}
                      disabled={isGeneratingScript}
                      variant="outline"
                      className="w-full justify-start text-left h-auto py-4 bg-zinc-950 border-zinc-700 hover:bg-zinc-800 hover:border-red-700 text-zinc-300"
                    >
                      <span className="font-bold text-red-600 mr-3">Option {index + 1}:</span>
                      <span className="text-pretty">{choice}</span>
                    </Button>
                  ))}
                </CardContent>
              </Card>
            )}
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/generate-script/route.ts" isEdit="true" isQuickEdit="true"
import { generateText } from "ai"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const apiKey = process.env.OPENAI_API_KEY

    console.log("[v0] API Key present:", !!apiKey)

    if (!apiKey || apiKey.trim() === "") {
      return NextResponse.json(
        { error: "OpenAI API key is not configured. Please add OPENAI_API_KEY to your environment variables." },
        { status: 500 },
      )
    }

    const { topic, continueFrom, choice } = await request.json()

    console.log("[v0] Request params:", { topic, hasContinueFrom: !!continueFrom, choice })

    if (!topic) {
      return NextResponse.json({ error: "Topic is required" }, { status: 400 })
    }

    const prompt = continueFrom
      ? `Continue this true crime podcast story based on the listener's choice: "${choice}"

Previous story:
${continueFrom}

Create the NEXT SHORT SEGMENT (2-3 paragraphs maximum) with:
- Narrator (Ezekiel): Sets the scene and provides context
- The Informal Deal Maker: A shady informant or criminal contact
- The Ancient Evil: A mysterious antagonist or dark presence
- Demon Monster: A terrifying revelation or threat

Keep this segment under 1500 characters total.

At the end, provide 3 choices for what happens next in this format:
CHOICE 1: [Brief description]
CHOICE 2: [Brief description]
CHOICE 3: [Brief description]

IMPORTANT: Use PLAIN TEXT format only. Do NOT use markdown formatting like **bold** or *italic*.

Format as:
Narrator: [text]
Deal Maker: [text]
Ancient Evil: [text]
Demon: [text]`
      : `Create the OPENING SEGMENT of an interactive true crime podcast about "${topic}".

This is a SHORT introduction (2-3 paragraphs maximum) featuring:
- Narrator (Ezekiel): Introduces the case with an ominous tone
- The Informal Deal Maker: A shady informant who knows something
- The Ancient Evil: Hints at a dark conspiracy or supernatural element
- Demon Monster: A terrifying detail that sets the stakes

Keep this segment under 1500 characters total.

Use audio tags for emotion: [ominous], [whispers], [sinister laugh], [terrified], [dramatically]

At the end, provide 3 choices for how to investigate next:
CHOICE 1: [Brief description]
CHOICE 2: [Brief description]
CHOICE 3: [Brief description]

IMPORTANT: Use PLAIN TEXT format only. Do NOT use markdown formatting like **bold** or *italic*.

Format as:
Narrator: [text]
Deal Maker: [text]
Ancient Evil: [text]
Demon: [text]`

    console.log("[v0] Calling OpenAI API...")

    const { text: script } = await generateText({
      model: "openai/gpt-4o",
      system: `You are a true crime podcast writer specializing in dark, atmospheric storytelling with interactive elements. Create gripping narratives optimized for ElevenLabs v3 text-to-speech with emotional audio tags. Always output in PLAIN TEXT format without any markdown formatting.`,
      prompt,
    })

    console.log("[v0] OpenAI response received, length:", script?.length)
    console.log("[v0] Script preview:", script?.substring(0, 200))

    const choiceMatches = script.match(/CHOICE \d+: (.+)/g)
    const choices = choiceMatches ? choiceMatches.map((c) => c.replace(/CHOICE \d+: /, "")) : []

    console.log("[v0] Extracted choices:", choices.length)

    let scriptContent = script.replace(/CHOICE \d+: .+/g, "").trim()
    scriptContent = scriptContent.replace(/\*\*/g, "") // Remove bold markdown
    scriptContent = scriptContent.replace(/^---+$/gm, "") // Remove horizontal rules
    scriptContent = scriptContent.replace(/^#+\s+/gm, "") // Remove markdown headers
    scriptContent = scriptContent.trim()

    console.log("[v0] Returning response with script length:", scriptContent.length)

    return NextResponse.json({ script: scriptContent, choices })
  } catch (error) {
    console.error("[v0] Error in generate-script:", error)
    const errorMessage = error instanceof Error ? error.message : "Unknown error occurred"
    const errorStack = error instanceof Error ? error.stack : ""

    console.error("[v0] Error details:", { errorMessage, errorStack })

    return NextResponse.json(
      {
        error: `Script generation failed: ${errorMessage}`,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/generate-podcast/route.ts" isEdit="true" isQuickEdit="true"
import type { NextRequest } from "next/server"
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js"

export async function POST(request: NextRequest) {
  try {
    const { script } = await request.json()

    if (!script) {
      return new Response(JSON.stringify({ error: "Script is required" }), {
        status: 400,
        headers: { "Content-Type": "application/json" },
      })
    }

    const elevenLabsApiKey = process.env.ELEVENLABS_API_KEY
    if (!elevenLabsApiKey) {
      return new Response(JSON.stringify({ error: "ElevenLabs API key not configured" }), {
        status: 500,
        headers: { "Content-Type": "application/json" },
      })
    }

    const client = new ElevenLabsClient({ apiKey: elevenLabsApiKey })

    const cleanScript = script
      .replace(/\*\*/g, "") // Remove bold markdown
      .replace(/^---+$/gm, "") // Remove horizontal rules
      .replace(/^#+\s+/gm, "") // Remove markdown headers
      .trim()

    const lines = cleanScript.split("\n").filter((line: string) => line.trim())
    const inputs = []

    const voiceMap: Record<string, string> = {
      narrator: "2tTjAGX0n5ajDmazDcWk", // Ezekiel - narrator
      "deal maker": "alwWf0yOMMykcrIh8BlE", // The informal deal maker
      "ancient evil": "HH3kybY6uEJ2ebSa9Vy3", // The ancient evil
      demon: "vfaqCOvlrKi4Zp7C2IAm", // Demon monster
    }

    console.log("[v0] Parsing script lines:", lines.length)

    for (const line of lines) {
      const narratorMatch = line.match(/^Narrator:\s*(.+)$/i)
      const dealMakerMatch = line.match(/^Deal Maker:\s*(.+)$/i)
      const ancientEvilMatch = line.match(/^Ancient Evil:\s*(.+)$/i)
      const demonMatch = line.match(/^Demon:\s*(.+)$/i)

      if (narratorMatch) {
        console.log("[v0] Found Narrator line")
        inputs.push({ text: narratorMatch[1].trim(), voiceId: voiceMap.narrator })
      } else if (dealMakerMatch) {
        console.log("[v0] Found Deal Maker line")
        inputs.push({ text: dealMakerMatch[1].trim(), voiceId: voiceMap["deal maker"] })
      } else if (ancientEvilMatch) {
        console.log("[v0] Found Ancient Evil line")
        inputs.push({ text: ancientEvilMatch[1].trim(), voiceId: voiceMap["ancient evil"] })
      } else if (demonMatch) {
        console.log("[v0] Found Demon line")
        inputs.push({ text: demonMatch[1].trim(), voiceId: voiceMap.demon })
      }
    }

    console.log("[v0] Total speaker inputs found:", inputs.length)

    if (inputs.length === 0) {
      console.error("[v0] No valid speaker lines found. Script content:", cleanScript.substring(0, 500))
      return new Response(JSON.stringify({ error: "No valid speaker lines found in script" }), {
        status: 400,
        headers: { "Content-Type": "application/json" },
      })
    }

    const audioStream = await client.textToDialogue.stream({ inputs })

    return new Response(audioStream, {
      headers: {
        "Content-Type": "audio/mpeg",
        "Transfer-Encoding": "chunked",
        "Cache-Control": "no-cache",
      },
    })
  } catch (error) {
    console.error("Error generating podcast:", error)
    return new Response(JSON.stringify({ error: "Failed to generate podcast" }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    })
  }
}</article></body></html>

About

Tags

Share

More from elevenlabs-devs

More Templates Like This

About

Tags

Share

About

Tags

Share

More from elevenlabs-devs

More Templates Like This