Build an AI Song Lyrics Generator (Gemini & Cloudflare)

const systemPrompt = `
You are a professional songwriter.
- Structure: Verse-Chorus-Verse-Chorus-Bridge-Chorus.
- Style: ${genre} (e.g., Pop, Rap, Country).
- Mood: ${mood}.
- Do NOT use cheesy rhymes (cat/hat).
- Use metaphors relevant to the theme: "${theme}".
`;

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

export async function POST(req: Request) {
  const { theme, genre, mood } = await req.json();

  const model = genAI.getGenerativeModel({ model: "gemini-pro" });
  
  const prompt = `Write a song about "${theme}". 
                  Genre: ${genre}. Mood: ${mood}.
                  Include [Verse], [Chorus], and [Bridge] labels.`;

  const result = await model.generateContent(prompt);
  const response = await result.response;
  
  return Response.json({ lyrics: response.text() });
}

import { Ai } from '@cloudflare/ai';

export async function POST(req: Request) {
  const { theme, genre } = await req.json();
  
  // Initialize AI with Cloudflare binding
  const ai = new Ai(process.env.AI);

  const response = await ai.run('@cf/meta/llama-3-8b-instruct', {
    messages: [
      { role: 'system', content: 'You are a songwriter.' },
      { role: 'user', content: `Write a ${genre} song about: ${theme}` }
    ]
  });

  return Response.json({ lyrics: response.response });
}

const model = genAI.getGenerativeModel({ 
    model: "gemini-pro",
    generationConfig: {
        temperature: 0.9, // High creativity
        topK: 40,
    }
});

'use client';
import { useState } from 'react';
import { Music, Copy } from 'lucide-react';

export default function LyricsGenerator() {
  const [theme, setTheme] = useState('');
  const [lyrics, setLyrics] = useState('');
  const [isLoading, setLoading] = useState(false);

  const generate = async () => {
    setLoading(true);
    const res = await fetch('/api/gemini-lyrics', { // Switch URL for Cloudflare
      method: 'POST',
      body: JSON.stringify({ theme, genre: 'Pop', mood: 'Happy' })
    });
    const data = await res.json();
    setLyrics(data.lyrics);
    setLoading(false);
  };

  return (
    <div className="max-w-2xl mx-auto p-4 space-y-6">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold flex justify-center items-center gap-2">
          <Music className="text-purple-600" /> AI Songwriter
        </h1>
        <p className="text-gray-500">Create Billboard hits in seconds.</p>
      </div>

      {/* Input Section */}
      <div className="flex gap-2">
        <input 
          value={theme}
          onChange={(e) => setTheme(e.target.value)}
          placeholder="What is your song about? (e.g. Summer Rain)"
          className="flex-1 p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-purple-500 outline-none"
        />
        <button 
          onClick={generate}
          disabled={isLoading}
          className="bg-purple-600 text-white px-6 rounded-lg font-bold hover:bg-purple-700 disabled:opacity-50"
        >
          {isLoading ? 'Writing...' : 'Generate'}
        </button>
      </div>

      {/* Lyrics Output */}
      {lyrics && (
        <div className="relative bg-gray-50 p-6 rounded-xl border whitespace-pre-wrap font-mono text-sm leading-relaxed">
          <button 
            onClick={() => navigator.clipboard.writeText(lyrics)}
            className="absolute top-4 right-4 text-gray-400 hover:text-gray-700"
          >
            <Copy size={16} />
          </button>
          {lyrics}
        </div>
      )}
    </div>
  );
}

const result = await model.generateContentStream(prompt);
for await (const chunk of result.stream) {
    const chunkText = chunk.text();
    // Send chunk to client
}