---
title: Copilot
description: The sidebar assistant layout for in-app chat experiences.
---

`Copilot` provides a sidebar assistant layout that stays visible alongside the rest of your application.

This layout keeps the main app screen in view while chat stays available at the side. For a full-page chat surface, see [FullScreen](/docs/chat/fullscreen). For a floating widget, see [BottomTray](/docs/chat/bottom-tray).

```tsx
import { Copilot } from "@openuidev/react-ui";

export function App() {
  return (
    <div className="flex h-screen w-full">
      <main className="flex-1">{/* Your app */}</main>
      <Copilot apiUrl="/api/chat" agentName="Assistant" />
    </div>
  );
}
```

![Copilot sidebar layout example](/docs/images/chat/video2.gif)

## Common configuration

```tsx
<Copilot
  apiUrl="/api/chat"
  threadApiUrl="/api/threads"
  agentName="Support Assistant"
  logoUrl="/logo.png"
/>
```

`Copilot` only handles the UI layer. It is a good fit for support panels, assistant sidebars, and workflows where users need to keep the main screen visible while chatting.

Set up your backend connection in [Connecting to LLM](/docs/chat/connecting), connect thread history in [Connect Thread History](/docs/chat/persistence), and customize the empty state in [Welcome & Starters](/docs/chat/welcome).

## Related guides

<Cards>
  <Card title="Connecting to LLM" href="/docs/chat/connecting">
    Configure `apiUrl`, adapters, and auth.
  </Card>
  <Card title="Connect Thread History" href="/docs/chat/persistence">
    Load thread lists and previous messages from your backend.
  </Card>
  <Card title="Welcome & Starters" href="/docs/chat/welcome">
    Configure the empty-state experience.
  </Card>
  <Card title="Theming" href="/docs/chat/theming">
    Adjust colors, mode, and theme overrides.
  </Card>
  <Card title="Custom Chat Components" href="/docs/chat/custom-chat-components">
    Override assistant, user, and composer UI.
  </Card>
</Cards>
