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

# Chat Widget

> Add an AI-powered voice and text chat widget to your website

The AmpUp Chat Widget is a drop-in React component that adds AI-powered voice and text chat to any website. It connects to [ElevenLabs Conversational AI](https://elevenlabs.io) agents and provides a branded chat interface with both voice calling and text messaging.

## Prerequisites

<Check>React 18 or higher</Check>
<Check>An [ElevenLabs](https://elevenlabs.io) Conversational AI agent ID</Check>

## Installation

Install the package from npm:

```bash theme={null}
npm install @ampup/chat-widget
```

<Info>
  The widget requires `react` and `react-dom` as peer dependencies. If your project doesn't already have them:

  ```bash theme={null}
  npm install react react-dom
  ```
</Info>

## Quick Start

Import the component and render it anywhere in your app:

```tsx theme={null}
import { ChatWidget } from "@ampup/chat-widget";

function App() {
  return <ChatWidget agentId="your_elevenlabs_agent_id" />;
}
```

A floating chat button appears in the bottom-right corner. Users can click it to open the widget and choose between **voice call** or **text chat** to interact with your AI agent.

## How It Works

1. The `<ChatWidget>` uses the `useConversation` hook from `@elevenlabs/react` to manage two separate sessions — one for voice calls and one for text chat.
2. A **WebSocket proxy** intercepts the ElevenLabs connection to read transcripts and inject context updates in real time.
3. The widget renders a complete chat UI — floating action button, agent card with avatar, voice call controls with timer, and a full text chat interface — all as inline React components.

## Features

<CardGroup cols={2}>
  <Card title="Voice Calls" icon="phone">
    One-click voice calls with real-time audio visualization, call timer, and automatic transcript capture.
  </Card>

  <Card title="Text Chat" icon="comments">
    Full text chat with message bubbles, typing input, and real-time agent responses.
  </Card>

  <Card title="SPA Navigation" icon="route">
    Built-in `navigateToPage` and `scrollToSection` client tools let the agent navigate users around your app.
  </Card>

  <Card title="Dynamic Context" icon="brain">
    Pass dynamic variables to your agent so it has context about the current user, page, or application state.
  </Card>
</CardGroup>