import { useState } from 'react'
const FAKE_REPLIES = [
'Welcome to AgentsKit. Streaming is on by default.',
'Swap the adapter in 1 line to change providers.',
'Tools and memory are optional — compose what you need.',
]
export default function App() {
const [messages, setMessages] = useState([
{ role: 'assistant', content: 'Hi, ask me something.' },
])
const [input, setInput] = useState('')
async function send() {
if (!input.trim()) return
const next = [...messages, { role: 'user', content: input }]
setMessages(next)
setInput('')
const reply = FAKE_REPLIES[next.length % FAKE_REPLIES.length]
let streamed = ''
setMessages([...next, { role: 'assistant', content: '' }])
for (const ch of reply) {
await new Promise((r) => setTimeout(r, 14))
streamed += ch
setMessages([...next, { role: 'assistant', content: streamed }])
}
}
return (
<div style={{ fontFamily: 'system-ui', padding: 16, maxWidth: 520 }}>
{messages.map((m, i) => (
<div
key={i}
style={{
margin: '6px 0',
padding: '8px 12px',
background: m.role === 'user' ? '#2563eb' : '#1e293b',
color: 'white',
borderRadius: 12,
alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start',
maxWidth: '80%',
}}
>
{m.content}
</div>
))}
<div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && send()}
style={{ flex: 1, padding: 8, borderRadius: 8, border: '1px solid #334155' }}
/>
<button onClick={send}>Send</button>
</div>
</div>
)
}