"use client" import { useEffect, useState } from "react" import { Message, MessageContent } from "@/components/ui/message" import { Orb } from "@/components/ui/orb" import { Response } from "@/components/ui/response" const assistantMessageTokens = [ "To", " create", " a", " new", " agent", " with", " **", "ElevenLabs", " Agents", "**", ",", " head", " to", " this", " link", ":", " ", "[", "https://elevenlabs.io/app/agents", "](", "https://elevenlabs.io/app/agents", ")", ".", "\n\n", "1.", " Sign", " in", " to", " your", " ElevenLabs", " account", ".", "\n", "2.", " Click", " **New", " Agent**", " to", " start", ".", "\n", "3.", " Give", " your", " agent", " a", " name", " and", " description", ".", "\n", "4.", " Configure", " its", " behavior", ",", " knowledge", " sources", ",", " and", " voice", ".", "\n", "5.", " Save", " it", " —", " and", " your", " agent", " is", " ready", " to", " use", ".", ] const MessageDemo = () => { const [content, setContent] = useState("\u200B") const [isStreaming, setIsStreaming] = useState(false) useEffect(() => { let currentContent = "" let index = 0 const startTimeout = setTimeout(() => setIsStreaming(true), 500) const interval = setInterval(() => { if (index < assistantMessageTokens.length) { currentContent += assistantMessageTokens[index] setContent(currentContent) index++ } else { clearInterval(interval) setIsStreaming(false) } }, 100) return () => { clearInterval(interval) clearTimeout(startTimeout) } }, []) return ( <>

How do I create an agent?

{content}

) } export { MessageDemo }