> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gainable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding

> Place the Copilot chat interface on any page of your app

## What is the Copilot component?

The Copilot is rendered with the `<wy-copilot>` component. You can embed it on any page of a Gainable app. Each instance is linked to one configured Copilot, so you can place several across the app, each connected to a different one.

<Info>
  For example, a sales Copilot on the deals page and a support Copilot on the tickets page. They share the underlying chat component but have different names, instructions, knowledge, and data access.
</Info>

## Adding a Copilot to a page

Describe where you want the Copilot and which one it should use:

```text theme={null}
Add the Sales Coach Copilot to the deals page.
```

```text theme={null}
Put a chat panel on the support dashboard
using the Support Assistant Copilot.
```

```text theme={null}
Add Copilots to each main page:
- Deals page: Sales Coach
- Support page: Support Assistant
- HR page: HR Helper
```

## What users see

When a Copilot is placed on a page, users see:

* **Name and description** in the chat header
* **Conversation starters** as clickable buttons to begin
* **Message input** for typing questions
* **Chat responses** with formatted text, lists, and data from MCP and knowledge

## Capabilities

The embedded Copilot inherits all capabilities from its configuration:

| Capability                | Description                                                    |
| ------------------------- | -------------------------------------------------------------- |
| **Chat**                  | Natural language conversation                                  |
| **Data access (MCP)**     | Read, update, and insert app data through the MCP Server       |
| **Knowledge queries**     | Reference uploaded documents from the Copilot's knowledge base |
| **Web search**            | Search the web if enabled                                      |
| **Conversation starters** | Pre-defined prompts shown as buttons                           |

## Placement patterns

### Specific page placement

Place a Copilot on the page where it's most relevant:

```text theme={null}
Add the Sales Coach Copilot to the deals page.
```

### Multiple pages, same Copilot

Use the same Copilot on several pages:

```text theme={null}
Add the Support Assistant Copilot to both the
tickets page and the customer detail page.
```

### Different Copilots per page

Match the Copilot to the page context:

```text theme={null}
Add Copilots:
- Deals page → Sales Coach
- Tickets page → Support Assistant
- Dashboard → Analytics Helper
```

## Copilot vs team chat

The Copilot and [team chat](/building/collaboration) serve different purposes:

|                 | Copilot                            | Team chat                       |
| --------------- | ---------------------------------- | ------------------------------- |
| **Purpose**     | Conversational assistant for users | Human-to-human messaging        |
| **Powered by**  | Gaia Copilot                       | Weavy collaboration             |
| **Responds**    | Gaia, with data access             | Other team members              |
| **Best for**    | Questions, lookups, guidance       | Discussions, decisions, updates |
| **Data access** | Queries app data via MCP Server    | No direct data access           |

<Tip>
  You can have both on the same page. Use team chat for human collaboration and the Copilot for AI-assisted data lookups and guidance.
</Tip>

## Copilot vs Autopilot

The Copilot is reactive. The user asks; it answers. [Autopilot](/autopilot/inbox) is the user-facing surface for [Gaia Autopilot](/autopilot/overview), which run on their own and draft work for approval. The two are designed to live side by side:

* The Copilot answers a sales rep's question in chat.
* Autopilot lands the same rep's "stalled deal" follow-up draft in their inbox before they ask.

## Full end-to-end example

Here's a complete prompt that builds an app, configures a Copilot, and embeds it:

```text theme={null}
Build a CRM with:
- Companies (name, industry, size)
- Contacts (name, email, phone, linked to company)
- Deals (name, amount, status, linked to company and contact)
- Dashboard with pipeline value and deals by status chart

Create a Sales Coach Copilot that:
- Helps reps find deals and contacts
- Can query all CRM data
- Uses a friendly, encouraging tone
- Has conversation starters:
  "Show my open deals"
  "Deals closing this month"
  "Find contacts at a company"
  "Pipeline summary"

Add the Sales Coach Copilot to the deals page.
```

This single prompt creates the app, configures the Copilot with data access, and embeds it on the deals page.

## Best practices

<AccordionGroup>
  <Accordion title="Place Copilots where users need help">
    Put a Copilot on pages where users are likely to have questions or need to look up data. A deals page Copilot is more useful than one on a simple settings page.
  </Accordion>

  <Accordion title="Match Copilot to page context">
    If you have multiple Copilots, use ones that are relevant to each page. A sales Copilot on the deals page, a support Copilot on the tickets page.
  </Accordion>

  <Accordion title="Use conversation starters to guide discovery">
    Good conversation starters show users what the Copilot can do. Include starters that demonstrate its key capabilities.
  </Accordion>

  <Accordion title="Combine with other features">
    Copilots work alongside team chat, kanban boards, dashboards, and other features. They add conversational AI without replacing existing collaboration tools.
  </Accordion>
</AccordionGroup>

## Learn more

<CardGroup cols={2}>
  <Card title="Configuring a Copilot" icon="sliders" href="/copilots/configuring">
    Set up the Copilot behind the chat
  </Card>

  <Card title="Data access" icon="database" href="/copilots/data-access">
    Connect to app data via MCP
  </Card>

  <Card title="Knowledge bases" icon="book" href="/copilots/knowledge">
    Add document references
  </Card>

  <Card title="Collaboration" icon="comments" href="/building/collaboration">
    Team chat and other collaboration features
  </Card>

  <Card title="Autopilot" icon="rocket" href="/autopilot/inbox">
    The proactive side, where Agents draft work for approval
  </Card>
</CardGroup>