Build production-ready AI apps in minutes

// AI chat component with streaming responses
export function AIChat() {
  const { messages, sendMessage } = useAIChat();
  
  return (
    <div className="p-4 border rounded-lg">
      <div className="h-80 overflow-y-auto space-y-2 mb-4">
        {messages.map((message, i) => (
          <div key={i} className={message.role === 'user' ? 'text-sky-600' : 'text-emerald-600'}>
            <span className="font-bold">{message.role}:</span> {message.content}
          </div>
        ))}
      </div>
      
      <form onSubmit={(e) => {
        e.preventDefault();
        const input = e.currentTarget.elements.namedItem('message');
        if (input instanceof HTMLInputElement) {
          sendMessage(input.value);
          input.value = '';
        }
      }}>
        <input name="message" className="w-full p-2 rounded border" placeholder="Ask anything..." />
      </form>
    </div>
  );
}