Chat Component

Drop-in chat UI with streaming, markdown rendering, and tool execution display.

Basic Usage

import { CopilotChat } from '@yourgpt/copilot-sdk-ui';

function App() {
  return (
    <CopilotChat
      className="h-[600px] border rounded-xl"
    />
  );
}

Props

Prop	Type	Description
`title`	`string`	Header title
`placeholder`	`string`	Input placeholder text
`suggestions`	`string[]`	Quick suggestion chips
`className`	`string`	Container class
`toolRenderers`	`Record<string, Component>`	Custom tool result renderers

With Suggestions

<CopilotChat
  title="AI Assistant"
  placeholder="Ask me anything..."
  suggestions={[
    "What can you help me with?",
    "Search for products",
    "Show my recent orders",
  ]}
/>

Custom Tool Renderers

Render tool results as custom UI instead of JSON:

// Define a custom renderer
function WeatherCard({ data }) {
  return (
    <div className="p-4 rounded-lg bg-blue-50">
      <h3>{data.city}</h3>
      <p className="text-3xl">{data.temperature}°</p>
      <p>{data.conditions}</p>
    </div>
  );
}

// Use it
<CopilotChat
  toolRenderers={{
    get_weather: WeatherCard,
  }}
/>

Tool renderers receive the tool result data as props. Return any React component.

Build Your Own Chat

Use hooks for full control:

import { useYourGPT } from '@yourgpt/copilot-sdk-react';

function CustomChat() {
  const {
    messages,
    isLoading,
    sendMessage,
    toolExecutions,
  } = useYourGPT();

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}

      <input
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            sendMessage(e.currentTarget.value);
            e.currentTarget.value = '';
          }
        }}
        placeholder="Type a message..."
      />
    </div>
  );
}

Styling

The chat component uses Tailwind CSS. Override styles with className:

<CopilotChat
  className="
    h-full
    rounded-xl
    border-2
    border-primary
    bg-background
  "
/>

Next Steps

Tools - Add AI capabilities
Custom Tools - Build your own tools

Chat

On this page