MUI Chat

AgentsKit's useChat hook styled with Material UI components. This demo recreates the MUI look — in a real app, you'd use actual MUI imports.

AgentsKit's useChat hook styled with Material UI components. This demo recreates the MUI look — in a real app, you'd use actual MUI imports.

AgentsKit Chat

How does AgentsKit handle streaming responses?

AgentsKit streams responses token-by-token using the `useChat` hook. As each chunk arrives, the message state updates in real time — no need to manage WebSockets or event streams manually.

Can I use it with any model provider?

Message

With real MUI

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>
  )
}

✎ Edit this page on GitHub·Found a problem? Open an issue →·How to contribute →

MUI Chat

With real MUI

On this page