# CopilotProvider
> Owns a copilot conversation: streams answers from your transport, stops, retries, keeps sessions, and lets any part of the app open the assistant with useCopilot().
Source: https://docs.nasaqui.com/components/copilot-provider
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/copilot-provider.json
```
The state behind [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat) and [`CopilotDock`](https://docs.nasaqui.com/components/copilot-dock). You give it a
transport, a function that turns a request into a stream of events, and it does the rest:
- appends the question and a streaming answer;
- applies text, tool steps, sources, artifacts and follow-ups as they arrive;
- stops on demand;
- retries after an error;
- loads and deletes saved sessions.
Any component below it can open the assistant with `useCopilot().open(...)`.
## When to use
- An app-wide assistant whose answers stream from your backend (SSE, fetch streams, WebSockets).
- Pages that need to open the assistant with a question or with context, such as "Ask about this order".
## When not to use
- A one-off chat with its own state: pass `messages` and `onSend` to `CopilotChat` yourself.
- A single question box: use [`AskAI`](https://docs.nasaqui.com/components/ask-ai).
## Import
```tsx
import { CopilotProvider, CopilotLauncher, useCopilot } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import { type CopilotEvent, CopilotLauncher, CopilotProvider, type CopilotTransport } from "@fadymondy/nasaq/web";
const transport: CopilotTransport = async function* ({ history, message, sessionId }, { signal }) {
const res = await fetch("/api/copilot", {
method: "POST",
body: JSON.stringify({ history, message, sessionId }),
signal,
});
// One JSON event per line, such as {"type":"delta","text":"Hi"}.
const reader = res.body!.pipeThrough(new TextDecoderStream()).getReader();
let buffer = "";
for (;;) {
const { value, done } = await reader.read();
if (done) break;
buffer += value;
const lines = buffer.split("\n");
buffer = lines.pop() ?? "";
for (const line of lines) if (line.trim()) yield JSON.parse(line) as CopilotEvent;
}
};
export function Shell({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Anywhere below:
```tsx
const copilot = useCopilot();
;
```
## Anatomy
```
CopilotProvider context only, no DOM
├─ children useCopilot() works here
└─ CopilotDock when `dock` is set, wired to the state
CopilotLauncher data-slot="copilot-launcher"