Back to Examples

AI Chatbot Example

A production-ready conversational AI chatbot with streaming responses using PORTAL AI SDK

Key Features:

  • ✓ Real-time streaming responses
  • ✓ Type-safe message handling
  • ✓ Automatic conversation management
  • ✓ Error handling and retry logic

Live Demo

Try the chatbot below

Start a conversation by typing a message below

Implementation Code

import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'

export default function ChatbotExample() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: '/api/chat' }),
  })

  return (
    <div className="chat-container">
      {messages.map((msg) => (
        <div key={msg.id} className={msg.role}>
          {msg.parts.map((part) => 
            part.type === 'text' ? <p>{part.text}</p> : null
          )}
        </div>
      ))}
      
      <form onSubmit={(e) => {
        e.preventDefault()
        const input = new FormData(e.currentTarget).get('message')
        sendMessage({ text: input })
      }}>
        <input name="message" disabled={status === 'in_progress'} />
        <button type="submit">Send</button>
      </form>
    </div>
  )
}