MUI Chat

import { useChat } from '@agentskit/react'
import { Paper, TextField, Button, List, ListItem, Avatar, Typography } from '@mui/material'
import { anthropic } from '@agentskit/adapters'

function MuiChat() {
  const chat = useChat({ adapter: anthropic({ apiKey: 'key', model: 'claude-sonnet-4-6' }) })
  return (
    <Paper elevation={3} sx={{ height: 500, display: 'flex', flexDirection: 'column' }}>
      <List sx={{ flex: 1, overflow: 'auto', p: 2 }}>
        {chat.messages.map(msg => (
          <ListItem key={msg.id} sx={{ alignItems: 'flex-start' }}>
            <Avatar sx={{ mr: 1 }}>{msg.role === 'user' ? 'U' : 'A'}</Avatar>
            <Typography>{msg.content}</Typography>
          </ListItem>
        ))}
      </List>
      <form onSubmit={e => { e.preventDefault(); chat.send(chat.input) }} style={{ display: 'flex', padding: 16, gap: 8 }}>
        <TextField fullWidth value={chat.input} onChange={e => chat.setInput(e.target.value)} label="Message" />
        <Button variant="contained" type="submit">Send</Button>
      </form>
    </Paper>
  )
}