Learn how to integrate JigsawStack with Next.js to build AI-powered applications
npm install jigsawstack
.env.local
JIGSAWSTACK_API_KEY='your-api-key'
import type { NextApiRequest, NextApiResponse } from "next"; import { JigsawStack } from "jigsawstack"; const jigsawstack = JigsawStack(); // API key will be read from environment export default async (req: NextApiRequest, res: NextApiResponse) => { try { const result = await jigsawstack.audio.text_to_speech({ text: "Hello, how are you doing?", }); const data = result.blob(); res.status(200).json({ success: true, }); } catch (error) { return res.status(400).json(error); } };
"use client"; import { useState } from "react"; export default function TextToSpeechButton() { const [loading, setLoading] = useState(false); const handleTextToSpeech = async () => { setLoading(true); try { const response = await fetch("/api/tts"); const data = await response.json(); if (data.success) { // Handle successful response console.log("Text-to-speech generated successfully"); } } catch (error) { console.error("Error generating speech:", error); } finally { setLoading(false); } }; return ( <button onClick={handleTextToSpeech} disabled={loading} className="px-4 py-2 bg-blue-500 text-white rounded" > {loading ? "Generating..." : "Convert to Speech"} </button> ); }
import { NextResponse } from "next/server"; import { JigsawStack } from "jigsawstack"; const jigsawstack = JigsawStack(); export async function POST(request) { try { const { text } = await request.json(); const result = await jigsawstack.audio.text_to_speech({ text: text || "Hello, how are you doing?", }); const data = result.blob(); return NextResponse.json({ success: true }); } catch (error) { return NextResponse.json({ error: error.message }, { status: 400 }); } }
Was this page helpful?