# AI Agents for Observability (Claude Connector)
Source: https://docs.infinitewatch.ai/docs/connectors/contact-center-ai
Plan AI adoption, estimate QA ROI, and try a real-time audio demo for your contact center — directly in Claude.
InfiniteWatch Contact Center AI is a Claude connector (a remote MCP App) that helps
support, sales, QA, and operations leaders plan practical AI adoption for contact
centers. It builds consultative 30/60/90-day improvement plans, estimates the ROI of
automated QA with transparent assumptions, links to a real-time audio analysis demo,
and captures demo requests only after explicit consent.
## Setup
No setup or credentials required — this connector is public (`auth = none`). There is
nothing to install and no account to create.
* **Server URL:** `https://mcp-sales.infinitewatch.ai/mcp`
* **Transport:** Streamable HTTP (remote MCP)
* Add it from the Claude Connectors Directory, or as a custom connector using the
server URL above.
## What you can do
Just describe your contact center in chat and Claude picks the right tool.
### Tools
* **`create_contact_center_improvement_plan`** — A consultative 30/60/90-day AI
improvement plan from your situation, goals, and operating metrics. If you only
share a general intent, it asks one short question first so the plan is tailored
rather than generic.
* **`estimate_contact_center_ai_roi`** — A deterministic ROI estimate (no AI-invented
numbers) for automating QA: analyst time freed, QA coverage uplift, and optional
retention upside, with conservative / base / optimistic scenarios and visible,
editable assumptions.
* **`open_realtime_audio_demo`** — Opens the live real-time audio analysis demo at
[audiodemo.infinitewatch.ai](https://audiodemo.infinitewatch.ai).
* **`submit_contact_center_demo_lead`** — Sends a demo/contact request to InfiniteWatch.
Used only after you explicitly ask to be contacted, and only with your consent.
### Example prompts
* "How do I improve my contact center with AI? We run \~50,000 calls/month with 40
agents, only \~2% of calls are QA'd, AHT is high and quality is inconsistent."
* "We get 50,000 calls/month, \~2% QA sampling and \~6 min average handle time. What's
the ROI of automated QA?"
* "Is there a real-time audio analysis demo I can try?"
* "I'd like InfiniteWatch to contact me for a demo."
## Data handling & privacy
* Does **not** analyze call transcripts and does **not** store audio.
* Processes only the operating metrics you provide and, if you request contact, the
lead details you submit.
* Lead data is stored only when you explicitly ask to be contacted and consent.
* Raw inputs are not logged; only metadata (tool name, latency, status) is recorded.
See the full [privacy policy](https://www.infinitewatch.ai/privacy-policy).
## Notes
* ROI figures are indicative and **non-binding**; adjust the visible assumptions to
your operation.
* The real-time audio demo runs in your browser and uses your microphone; no audio is
stored by this connector.
## Support
* Email: [support@infinitewatch.ai](mailto:support@infinitewatch.ai)
* Website: [infinitewatch.ai](https://infinitewatch.ai)
# Quickstart
Source: https://docs.infinitewatch.ai/docs/quickstart
Get started with InfiniteWatch API in under 5 minutes
## Prerequisites
Before you begin, ensure you have:
* A valid Orgnization ID (contact [support@infinitewatch.ai](mailto:support@infinitewatch.ai) to get one)
## Step 1: Set Up Web (For Web Applications)
If you want to generate web insights from your website, start by adding the InfiniteWatch SDK. Choose the guide for your framework:
* [HTML / CDN](/docs/sdks/html) — single script tag, no build tools needed
* [React](/docs/sdks/react) — `@infinitewatch/react` provider component
* [Next.js](/docs/sdks/nextjs) — `@infinitewatch/next` for App Router
* [Vue.js](/docs/sdks/vue) — `@infinitewatch/vue` plugin
### Quick Start (HTML)
The simplest way is a single script tag in your HTML ``:
```html theme={null}
```
Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings) or contact [support@infinitewatch.ai](mailto:support@infinitewatch.ai).
### How It Works
Once the SDK is set up, InfiniteWatch will automatically:
* Record user sessions and interactions
* Capture DOM events, mouse movements, and clicks
* Generate web insights data
* Send data to your InfiniteWatch dashboard
The script loads asynchronously, so it won't block your page load. It automatically starts recording when the page loads.
## Step 2: Identify Your Users
After the tracker is initialized and recording has started, you can associate sessions with specific users in your system using the `identify()` method. This links session recordings and analytics to individual users.
### Basic Usage
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345'
});
```
### With Additional User Information
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345',
email: 'user@example.com',
full_name: 'John Doe',
metadata: {
plan: 'premium',
signup_date: '2024-01-15'
}
});
```
### In a Login Flow
```javascript theme={null}
async function handleLogin(user) {
// Identify the logged-in user
InfiniteWatch.identify({
external_id: user.id,
email: user.email,
full_name: user.name
});
}
```
### What It Does
When you call `identify()`:
1. **Links Sessions to Users**: Associates the current session with your system's user identifier
2. **Persists Identity**: The `external_id` is stored in a cookie (2-year expiration) and persists across page reloads and sessions
3. **Auto-Collects Metadata**: Automatically gathers browser information (user agent, language, screen dimensions, timezone, etc.)
4. **Enriches Events**: All subsequent events will include the `external_id` in their payloads
**Required Field**: The `external_id` is required - use a stable identifier from your system (like a database user ID). Optional fields include `email`, `full_name`, and custom `metadata`.
**Privacy**: Only the `external_id` is persisted in cookies. Email, full name, and metadata are sent to the API but not stored in browser cookies.
### Best Practices
* **Call Early**: Identify users as soon as they're authenticated to ensure all session data is linked
* **Use Stable IDs**: Use consistent identifiers (database IDs) rather than temporary values
* **Update Anytime**: You can call `identify()` multiple times to update user information
For complete documentation on the `identify()` method, including all parameters, error handling, and advanced usage, see the [full identify() documentation](#).
## Step 3: Set Up Your Privacy Settings
InfiniteWatch records DOM content from your pages to generate web insights. You can control exactly what gets captured by adding privacy CSS classes to specific HTML elements. This lets you protect sensitive information while still collecting the data you need.
Always apply privacy classes to the specific elements you want to protect — never to the entire page or ``. Applying them too broadly will prevent InfiniteWatch from generating useful insights.
### Mask Sensitive Text (`rr-mask`)
The `rr-mask` class replaces all text content within an element (and its children) with masking characters. The element structure and layout remain visible in session replays, but the actual text is hidden.
```html theme={null}
John Doe
john.doe@example.com
+1 (555) 123-4567
```
Use `rr-mask` for any element that displays confidential text — names, email addresses, phone numbers, physical addresses, credit card details, affiliations, gender, or similar personal information.
### Block Entire Elements (`rr-block`)
The `rr-block` class completely prevents an element from being recorded. During replay, a placeholder with the original element's dimensions is shown instead.
```html theme={null}
```
Use `rr-block` for sensitive images, videos, embedded third-party content, or entire sections where you want nothing to be recorded at all.
We highly recommend adding `rr-block` to any area where users can freely write long-form content, as this can introduce noise and inaccurate signals into your web insights. This includes:
* **Live-chat widgets** — conversations often contain personal details and off-topic content
* **Review sections** — hotel, product, or service reviews contain free-form text that can skew behavioral insights
* **Comment sections, forums, or community feeds** — user-generated discussions are rarely relevant to UX analytics
* **Support ticket forms, feedback boxes, or survey text fields** — open-ended responses are meant for your team, not for session analysis
Blocking these elements keeps your insights focused on actual user interactions with your interface rather than the content users happen to type.
### Password Fields (Automatic)
All `input[type="password"]` fields are automatically masked — no additional classes or configuration required. You don't need to do anything extra to protect password inputs.
### Recommendations
* Apply `rr-mask` or `rr-block` to **specific elements**, not to your page wrapper or ``
* Use `rr-mask` for fields displaying confidential text (names, phones, addresses, emails, credit cards, affiliations, gender, etc.)
* Use `rr-block` for visual or embedded content you want fully hidden from recordings
* Add `rr-block` to any area where users write free-form content — live-chat widgets, review sections (product, hotel, service), comment sections, feedback forms, and support ticket inputs — to keep conversations private and avoid polluting your insights with unrelated text
* Password fields are handled automatically — no setup needed
* Test your privacy configuration before deploying to production to make sure the right content is protected
Applying privacy classes to the entire page will block or mask all content, which means InfiniteWatch won't be able to generate meaningful insights from your sessions. Target only the elements that contain sensitive data.
# HTML / CDN
Source: https://docs.infinitewatch.ai/docs/sdks/html
Add InfiniteWatch session replay to any website with a single script tag
## Overview
The simplest way to add InfiniteWatch to your website — just drop in a script tag. No build tools, no npm install, no configuration files.
## Installation
Add the following script tag at the end of your HTML `` section, before the closing `` tag:
```html theme={null}
```
Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings).
That's it — the script loads asynchronously and starts recording sessions automatically.
## Using Google Tag Manager
If you prefer to load InfiniteWatch via Google Tag Manager, use this snippet instead:
```html theme={null}
```
## Identify Users
After the tracker is initialized, you can associate sessions with specific users using the `identify()` method:
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345'
});
```
With additional user information:
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345',
email: 'user@example.com',
full_name: 'John Doe',
metadata: {
plan: 'premium',
signup_date: '2024-01-15'
}
});
```
Call `identify()` after the user logs in. The `external_id` is persisted in a cookie so it carries across page reloads and sessions.
## How It Works
Once the script is added, InfiniteWatch will automatically:
* Record user sessions and interactions
* Capture DOM events, mouse movements, and clicks
* Generate web insights data
* Send data to your InfiniteWatch dashboard
The script loads asynchronously, so it won't block your page load.
# Next.js
Source: https://docs.infinitewatch.ai/docs/sdks/nextjs
Add InfiniteWatch session replay to your Next.js application
## Overview
The `@infinitewatch/next` SDK provides a Next.js-compatible provider component that works with the App Router and Server Components.
## Step 1: Installation
```bash npm theme={null}
npm install @infinitewatch/next
```
```bash pnpm theme={null}
pnpm add @infinitewatch/next
```
```bash yarn theme={null}
yarn add @infinitewatch/next
```
## Step 2: Environment Variables
Add to your `.env.local` file:
```bash theme={null}
NEXT_PUBLIC_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
```
Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings).
## Step 3: Basic Setup
Create a providers file and wrap your app layout.
First, create `app/providers.tsx`:
```tsx theme={null}
'use client';
import { InfiniteWatchProvider } from '@infinitewatch/next';
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Then use it in `app/layout.tsx`:
```tsx theme={null}
import { Providers } from './providers';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
The `InfiniteWatchProvider` must be inside a `'use client'` component since it uses browser APIs. That's why we put it in a separate providers file.
## Identify Users
After the provider is set up, you can associate sessions with specific users:
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345',
email: 'user@example.com',
full_name: 'John Doe',
metadata: {
plan: 'premium',
signup_date: '2024-01-15'
}
});
```
Call `identify()` after the user logs in. The `external_id` is persisted in a cookie so it carries across page reloads and sessions.
# React
Source: https://docs.infinitewatch.ai/docs/sdks/react
Add InfiniteWatch session replay to your React application
## Overview
The `@infinitewatch/react` SDK provides a React provider component that wraps your app and automatically handles session recording.
## Step 1: Installation
```bash npm theme={null}
npm install @infinitewatch/react
```
```bash pnpm theme={null}
pnpm add @infinitewatch/react
```
```bash yarn theme={null}
yarn add @infinitewatch/react
```
## Step 2: Environment Variables
Create an environment file with your organization ID.
Add to your `.env` file:
```bash theme={null}
VITE_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
```
Add to your `.env` file:
```bash theme={null}
REACT_APP_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
```
Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings).
## Step 3: Basic Setup
Wrap your app with the `InfiniteWatchProvider` for automatic tracking.
```tsx theme={null}
import { InfiniteWatchProvider } from '@infinitewatch/react';
function App() {
return (
{/* Your entire app goes here */}
);
}
export default App;
```
```tsx theme={null}
import { InfiniteWatchProvider } from '@infinitewatch/react';
function App() {
return (
{/* Your entire app goes here */}
);
}
export default App;
```
The provider should wrap your entire app so all pages are tracked.
## Identify Users
After the provider is set up, you can associate sessions with specific users:
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345',
email: 'user@example.com',
full_name: 'John Doe',
metadata: {
plan: 'premium',
signup_date: '2024-01-15'
}
});
```
Call `identify()` after the user logs in. The `external_id` is persisted in a cookie so it carries across page reloads and sessions.
# Vue.js
Source: https://docs.infinitewatch.ai/docs/sdks/vue
Add InfiniteWatch session replay to your Vue application
## Overview
The `@infinitewatch/vue` SDK provides a Vue plugin that integrates session recording into your Vue app.
## Step 1: Installation
```bash npm theme={null}
npm install @infinitewatch/vue
```
```bash pnpm theme={null}
pnpm add @infinitewatch/vue
```
```bash yarn theme={null}
yarn add @infinitewatch/vue
```
## Step 2: Environment Variables
Add to your `.env` file:
```bash theme={null}
VITE_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
```
Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings).
## Step 3: Basic Setup
Register the plugin in your main entry file (e.g. `main.ts`):
```typescript theme={null}
import { createApp } from 'vue';
import { InfiniteWatchPlugin } from '@infinitewatch/vue';
import App from './App.vue';
const app = createApp(App);
app.use(InfiniteWatchPlugin, {
organizationId: import.meta.env.VITE_INFINITEWATCH_ORG_ID,
});
app.mount('#app');
```
## Identify Users
After the plugin is set up, you can associate sessions with specific users:
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345',
email: 'user@example.com',
full_name: 'John Doe',
metadata: {
plan: 'premium',
signup_date: '2024-01-15'
}
});
```
Call `identify()` after the user logs in. The `external_id` is persisted in a cookie so it carries across page reloads and sessions.
