'use client'; import { useState } from 'react'; import { getRunner } from 'langbase'; export default function Home() { const [topic, setTopic] = useState(''); const [completion, setCompletion] = useState<string>(''); const [loading, setLoading] = useState(false); const handleGenerateCompletion = async () => { setLoading(true); try { const response = await fetch('/api/run-agent', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ stream: true, messages: [{ role: 'user', content: topic }], variables: [{ name: 'topic', value: topic }], }) }); if (!response.ok) { const error = await response.json(); console.error('Error generating completion:', error); return; } if (response.body) { const runner = getRunner(response.body); for await (const chunk of runner) { const content = chunk?.choices[0]?.delta?.content || ''; content && setCompletion(prev => prev + content); } } } catch (error) { console.error('Error generating completion:', error); } finally { setLoading(false); } }; return ( <main className="flex min-h-screen flex-col items-center justify-between p-24"> <div className="flex flex-col items-center"> <h1 className="text-4xl font-bold"> Generate Text Completions </h1> <p className="mt-4 text-lg"> Enter a topic and click the button to generate titles using LLM </p> <input type="text" placeholder="Enter a topic" className="mt-4 rounded-lg border border-gray-300 p-2 text-sm" value={topic} onChange={e => setTopic(e.target.value)} /> <button className="mt-4 rounded-lg bg-blue-500 p-2 text-white" onClick={handleGenerateCompletion} > Generate titles </button> {loading && <p className="mt-4">Loading...</p>} {completion && ( <div className="mt-4 w-full max-w-md"> <h2 className="mb-2 text-xl font-semibold"> Generated Titles: </h2> <ul className="space-y-2">{completion}</ul> </div> )} </div> </main> ); }