Chat UI Components

Embed a full-featured AI chat interface in your application with a single component.

Quick Start

tsx

import { AgentChat, ChatConfigProvider } from '@cadraos/sdk/chat';

function App() {
  return (
    <ChatConfigProvider config={{
      baseUrl: 'https://your-api.example.com/v1',
      apiKey: 'sk-cad-xxxxxxxx',
      orgId: 123,
    }}>
      <AgentChat
        agentId="agent-uuid"
        maxHeight="600px"
        welcomeMessage="Hi! How can I help?"
        enableAttachments
      />
    </ChatConfigProvider>
  );
}

This gives you: streaming responses, markdown rendering, tool call visualization, file uploads, session persistence, and error handling with retry.

AgentChat Props

Prop	Type	Default	Description
agentId	string	-	Agent UUID
teamId	string	-	Team UUID (alternative)
sessionId	string	-	Resume existing session
enableAttachments	boolean	false	Enable file uploads
enableMarkdown	boolean	true	Render markdown
showToolCalls	boolean	true	Show tool executions
maxHeight	string \| number	"600px"	Container max height
theme	"light" \| "dark" \| "system"	"system"	Color theme
placeholder	string	"Type a message..."	Input placeholder
welcomeMessage	string	"Hello! How can I help?"	Welcome text
onSessionCreated	(id: string) => void	-	Session created callback
onError	(err) => void	-	Error callback
onToolCall	(name, args) => void	-	Tool invocation callback

Custom Welcome Screen

tsx

<AgentChat
  agentId="agent-uuid"
  renderWelcome={({ sendMessage }) => (
    <div className="space-y-4 p-8 text-center">
      <h2>How can I help?</h2>
      <div className="flex gap-2 justify-center">
        <button onClick={() => sendMessage('Summarize recent activity')}>
          Recent Activity
        </button>
        <button onClick={() => sendMessage('Generate a report')}>
          Generate Report
        </button>
      </div>
    </div>
  )}
/>

Using the Hook Directly

For full control, use useAgentChat instead of AgentChat:

tsx

import { useAgentChat } from '@cadraos/sdk/chat';

function CustomChat() {
  const {
    messages,
    isLoading,
    isStreaming,
    error,
    sessionId,
    clarification,
    sendMessage,
    respondToClarification,
    cancel,
    retry,
    clearMessages,
    loadSession,
  } = useAgentChat({
    agentId: 'agent-uuid',
    onSessionCreated: (id) => saveToUrl(id),
  });

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id} className={msg.role}>
          {msg.content}
        </div>
      ))}
      {isStreaming && <button onClick={cancel}>Stop</button>}
      {error && <button onClick={retry}>Retry</button>}
    </div>
  );
}

Markdown Customization

tsx

<AgentChat
  agentId="agent-uuid"
  markdownComponents={{
    code: ({ className, children }) => (
      <code className={`${className} bg-gray-900 rounded`}>{children}</code>
    ),
    a: ({ href, children }) => (
      <a href={href} target="_blank" className="text-blue-500">{children}</a>
    ),
  }}
  markdownUrlTransform={(url) => url.replace('/api/', '/cdn/')}
  markdownContentTransform={(content) => content.replace(/\[artifact\]/g, '')}
  onImageClick={(img) => openLightbox(img.url)}
/>