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

# Vercel (AI Chat)

> GermainUX monitors Vercel activity within a web application and correlates customer, agent, and bot conversations with the surrounding digital experience.

export const GxFooter = () => <p className="gx-fine">The content of this document is proprietary to GERMAIN SOFTWARE LLC.</p>;

export const GxStyle = () => <style>{`
.gx-meta { display:flex; flex-direction:column; gap:10px; margin:22px 0 6px; padding:16px 18px; border:1px solid rgba(15,23,42,.08); border-radius:16px; background:rgba(46,125,242,.035); font-size:13.5px; }
.gx-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.gx-meta-label { width:96px; flex:none; color:#64748b; }
.dark .gx-meta-label { color:#94a3b8; }
.gx-meta code { border-color:rgba(46,125,242,.25) !important; color:#1A5FC8 !important; background:rgba(46,125,242,.08) !important; }
.dark .gx-meta { background:linear-gradient(135deg,rgba(46,125,242,.16),rgba(0,17,42,.4)); border-color:rgba(91,156,255,.22); }
.dark .gx-meta code { color:#BFD6FF !important; background:rgba(91,156,255,.12) !important; border-color:rgba(91,156,255,.28) !important; }
.gx-list ul { columns:2; column-gap:24px; list-style:none !important; padding-left:0 !important; margin:14px 0 0 !important; }
.gx-list li { break-inside:avoid; position:relative; padding:4px 0 4px 22px !important; margin:0 !important; font-size:14.5px; }
.gx-list li::marker { content:""; }
.gx-list li::before { content:""; position:absolute; left:3px; top:13px; width:7px; height:7px; border-radius:50%; background:#2E7DF2; opacity:.75; }
.dark .gx-list li::before { background:#5B9CFF; }
.gx-flow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0; }
.gx-flow span { display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:13.5px; font-weight:500; background:rgba(46,125,242,.08); border:1px solid rgba(46,125,242,.22); color:#1A5FC8; }
.gx-flow span:not(:last-child)::after { content:"\\2192"; margin-left:14px; margin-right:-6px; color:#2E7DF2; font-weight:600; }
.dark .gx-flow span { background:rgba(91,156,255,.10); border-color:rgba(91,156,255,.28); color:#BFD6FF; }
#sidebar li[id] > a > div:first-child:has(> svg[aria-hidden]) { display: none; }
#sidebar svg[style*="mask-image"], #sidebar-content svg[style*="mask-image"], #navigation-items svg[style*="mask-image"], aside svg[style*="mask-image"] { display: none !important; }
#sidebar div:has(> svg[style*="mask-image"]), #sidebar-content div:has(> svg[style*="mask-image"]), #navigation-items div:has(> svg[style*="mask-image"]), aside div:has(> svg[style*="mask-image"]) { display: none !important; }
.gx-fine { margin-top:56px; padding-top:20px; border-top:1px solid rgba(15,23,42,.08); font-size:13px; color:#64748b; }
.dark .gx-fine { border-top-color:rgba(255,255,255,.08); color:#94a3b8; }
.eyebrow { font-size:13px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase; color:#2E7DF2 !important; display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:999px; background:rgba(46,125,242,.10); border:1px solid rgba(46,125,242,.25); height:auto !important; margin-bottom:6px; }
.dark .eyebrow { color:#8DB8FF !important; background:rgba(91,156,255,.12); border-color:rgba(91,156,255,.30); }
#page-title { letter-spacing:-.02em; }
.dark #page-title { background:linear-gradient(90deg,#FFFFFF 0%,#BFD6FF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mdx-content h2:not(.not-prose) { position:relative; padding-left:16px; }
.mdx-content h2:not(.not-prose)::before { content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:4px; border-radius:4px; background:linear-gradient(180deg,#2E7DF2,#5B9CFF); }
.dark table th { color:#BFD6FF; }
.dark table td:first-child { color:#FFFFFF; font-weight:500; }
@media (max-width: 820px) { .gx-list ul { columns:1; } }
/* === Concept #1: hero header + numbered section tiles === */
#content-area { counter-reset: gxsec; }
#header { position:relative; overflow:hidden; padding:36px 30px 24px; border-radius:24px; border:1px solid rgba(91,156,255,.22); background:radial-gradient(800px 300px at 100% 0%, rgba(46,125,242,.32), transparent 65%), #0B2147; }
#header::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:linear-gradient(100deg,transparent 15%,#000 75%); mask-image:linear-gradient(100deg,transparent 15%,#000 75%); }
#header > * { position:relative; }
#header #page-title { color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; font-size:clamp(1.9rem,3.4vw,2.6rem) !important; line-height:1.06 !important; font-weight:800 !important; letter-spacing:-.035em !important; }
#header .prose, #header .prose p, #header p { color:rgba(222,233,255,.82) !important; font-size:1.06rem; line-height:1.6; }
#header .eyebrow { color:#BFD6FF !important; background:rgba(91,156,255,.14) !important; border-color:rgba(91,156,255,.32) !important; }
#header button, #header [role="button"] { color:#DCE8FF !important; border-color:rgba(191,214,255,.25) !important; background:rgba(255,255,255,.04) !important; }
#content-area:has(#content > .gx-meta:first-child) #header { border-radius:24px 24px 0 0; border-bottom:0; padding-bottom:18px; }
#content:has(> .gx-meta:first-child) { margin-top:0 !important; }
#content > .gx-meta:first-child { margin:0 !important; padding:4px 30px 28px !important; border-radius:0 0 24px 24px !important; border:1px solid rgba(91,156,255,.22) !important; border-top:0 !important; background:#0B2147 !important; }
#content > .gx-meta:first-child:has(+ .columns) { border-radius:0 !important; border-bottom:0 !important; padding-bottom:18px !important; }
#content > .gx-meta:first-child + .columns { margin:0 0 8px !important; padding:4px 30px 30px !important; border:1px solid rgba(91,156,255,.22); border-top:0; border-radius:0 0 24px 24px; background:#0B2147; gap:12px !important; }
#content > .gx-meta:first-child + .columns > * { background:rgba(255,255,255,.035) !important; border-color:rgba(91,156,255,.28) !important; border-radius:16px !important; }
#content > .gx-meta:first-child + .columns h2, #content > .gx-meta:first-child + .columns [data-component-part="card-title"] { color:#fff !important; font-size:15px !important; overflow-wrap:normal !important; word-break:normal !important; }
#content > .gx-meta:first-child + .columns p, #content > .gx-meta:first-child + .columns [data-component-part="card-content"] { color:rgba(214,226,250,.7) !important; }
#content > .gx-meta:first-child + .columns svg { background-color:#5B9CFF !important; }
#content > .gx-meta:first-child .gx-meta-label { color:rgba(191,214,255,.6) !important; }
#content > .gx-meta:first-child code { font-family:inherit !important; font-weight:600 !important; font-size:12.5px !important; padding:5px 13px !important; border-radius:999px !important; color:#DCE8FF !important; background:rgba(46,125,242,.14) !important; border:1px solid rgba(91,156,255,.55) !important; }
#content > .gx-meta:first-child a { text-decoration:none !important; border:0 !important; }
#content > .gx-meta:first-child a:not(:has(code)) { color:#BFD6FF !important; font-weight:600; }
#content > .gx-meta:first-child .gx-meta-row > span:not(.gx-meta-label) { color:#86EFAC !important; background:rgba(34,197,94,.14) !important; border-color:rgba(134,239,172,.35) !important; }
.mdx-content > h2:not(.not-prose), #content > h2 { counter-increment:gxsec; display:flex !important; align-items:center; gap:14px; padding-left:0 !important; margin-top:2.6em !important; font-weight:750; letter-spacing:-.02em; }
.mdx-content > h2:not(.not-prose)::before, #content > h2::before { content:counter(gxsec, decimal-leading-zero) !important; position:static !important; flex:none; width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; letter-spacing:0; color:#fff; background:linear-gradient(135deg,#2E7DF2,#5B9CFF) !important; box-shadow:0 6px 18px rgba(46,125,242,.35); }
@media (max-width:820px) { #header, #content > .gx-meta:first-child, #content > .gx-meta:first-child + .columns { padding-left:20px !important; padding-right:20px !important; } }
#content-area:has(#content > .columns:first-child) #header { border-radius:24px 24px 0 0; border-bottom:0; padding-bottom:18px; }
#content:has(> .columns:first-child) { margin-top:0 !important; }
#content > .columns:first-child { margin:0 0 8px !important; padding:4px 30px 30px !important; border:1px solid rgba(91,156,255,.22); border-top:0; border-radius:0 0 24px 24px; background:#0B2147; gap:12px !important; }
#content > .columns:first-child > * { background:rgba(255,255,255,.035) !important; border-color:rgba(91,156,255,.28) !important; border-radius:16px !important; }
#content > .columns:first-child h2, #content > .columns:first-child [data-component-part="card-title"] { color:#fff !important; font-size:15px !important; overflow-wrap:normal !important; word-break:normal !important; }
#content > .columns:first-child p, #content > .columns:first-child [data-component-part="card-content"] { color:rgba(214,226,250,.7) !important; }
#content > .columns:first-child svg { background-color:#5B9CFF !important; }
/* === Shell: concept #1 (top bar, menus, page) === */
#navbar, #navbar-transition, #navbar > div { background:#00112A !important; }
#navbar { border-bottom:1px solid rgba(91,156,255,.18) !important; }
#navbar a, #navbar button, #navbar .nav-tabs-item { color:rgba(220,232,255,.78) !important; }
#navbar a:hover, #navbar button:hover, #navbar .nav-tabs-item[data-active="true"] { color:#FFFFFF !important; }
#navbar a[class*="bg-primary"], #navbar a[class*="bg-primary"] * { color:#FFFFFF !important; }
#navbar a[href="/"], #navbar a[href="/"] * { color:#FFFFFF !important; }
#search-bar-entry { background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:none !important; }
#search-bar-entry, #search-bar-entry * { color:rgba(220,232,255,.72) !important; }
html:not(.dark) #navbar img[src*="logo-light"] { display:none !important; }
html:not(.dark) #navbar img[src*="logo-dark"] { display:block !important; }
html:not(.dark) #sidebar, html:not(.dark) #sidebar-content { background:#FFFFFF !important; }
html:not(.dark) #sidebar { border-right:1px solid #E6ECF5 !important; }
#navigation-items .sidebar-group-header { font-size:11.5px !important; letter-spacing:.08em; text-transform:uppercase; }
html:not(.dark) #navigation-items .sidebar-group-header { color:#0B1B33 !important; }
#navigation-items a { font-size:13.5px !important; border-radius:10px !important; }
html:not(.dark) #navigation-items a { color:#4A5A75 !important; }
html:not(.dark) #navigation-items a:hover { background:#F1F5FC !important; color:#0B1B33 !important; }
#navigation-items li[data-active] > a, #navigation-items a[aria-current="page"], #navigation-items a[class*="bg-primary"] { background:#EAF2FF !important; color:#1A5FC8 !important; font-weight:600 !important; box-shadow:inset 3px 0 0 #2E7DF2; }
.dark #navigation-items li[data-active] > a, .dark #navigation-items a[aria-current="page"], .dark #navigation-items a[class*="bg-primary"] { background:rgba(46,125,242,.16) !important; color:#BFD6FF !important; }
html:not(.dark) #table-of-contents a { color:#5B6B85; }
html:not(.dark) .mdx-content h2, html:not(.dark) .mdx-content h3 { color:#0B1B33; }
html:not(.dark) .mdx-content p, html:not(.dark) .mdx-content li { color:#33415C; }
`}</style>;

<div className="gx-meta">
  <div className="gx-meta-row">
    <span className="gx-meta-label">Components</span>
    <a href="/main/germain-ux-engine"><code>Engine</code></a>
    <a href="/main/germain-ux-js-profiler"><code>JS Profiler</code></a>
    <a href="/main/germain-ux-rpa-bot-recorder"><code>RPA Bot Recorder</code></a>
    <a href="/main/germain-ux-rum-js"><code>RUM JS</code></a>
    <a href="/main/germain-ux-rum-extension"><code>RUM Extension</code></a>
  </div>

  <div className="gx-meta-row">
    <span className="gx-meta-label">Availability</span>
    <Badge color="green">2021.1 or later</Badge>
  </div>
</div>

<CardGroup cols={4}>
  <Card title="Monitoring components" icon="display" href="#monitoring-components">
    Components used for capture
  </Card>

  <Card title="Continuous monitoring" icon="display" href="#continuous-monitoring">
    Monitor live Vercel activity
  </Card>

  <Card title="Integration" icon="plug" href="#integration">
    Vercel Web API setup
  </Card>

  <Card title="Collected Data" icon="table" href="#collected-data">
    Only authorized browser context data
  </Card>
</CardGroup>

## Overview

GermainUX monitors Vercel activity within a web application and correlates customer, agent, and bot conversations with the surrounding digital experience.

<Info>
  This helps organizations understand whether communication quality, agent availability, bot behavior, application performance, or another customer-journey issue affected service, engagement, or conversion.
</Info>

## Monitoring components

| Component | Role |
| - | - |
| [GermainUX RUM JS](/main/germain-ux-rum-js) | Captures supported Vercel events, messages, user interactions, browser performance, and session context when the monitoring script can be deployed in the application. |
| [GermainUX RUM Extension](/main/germain-ux-rum-extension) | Provides browser monitoring when RUM JS cannot be deployed directly or access to the complete browser-page context requires an extension. |
| [GermainUX JS Profiler](/main/germain-ux-js-profiler) | Provides deeper JavaScript, browser, network, and resource-loading evidence when a Vercel issue requires technical investigation. |

## Capabilities

GermainUX can collect and analyze:

<div className="gx-list">
  * Supported Vercel events.
  * Messages exchanged between customers, agents, and bots.
  * Generic chat events and transactions.
  * Customer interactions before, during, and after a conversation.
  * The page and customer journey in which the conversation occurred.
  * Available agent, bot, conversation, and session context.
</div>

<Accordion title="Show all 10">
  <div className="gx-list">
    * Browser and application errors affecting the conversation.
    * Network requests and performance associated with Vercel.
    * User-session evidence, including Session Replay when enabled.
    * Conversation and application behavior at individual-session and aggregate levels.
  </div>
</Accordion>

<img src="https://mintcdn.com/germain-ux/Lu8ZG0APzunh0DAh/images/image-6.png?fit=max&auto=format&n=Lu8ZG0APzunh0DAh&q=85&s=796636d3d2ab22a7df89078a50a32ea9" alt="Image" width="1594" height="907" data-path="images/image-6.png" />

The available data depends on the events exposed by the Vercel Web API, the Vercel implementation, and the GermainUX monitoring configuration.

## Collected data

| Data category | Examples |
| - | - |
| Vercel events | Events exposed through the supported Vercel Web API |
| Messages | Messages exchanged among customers, agents, and bots |
| Chat events | Conversation and participant activity |
| Chat transactions | Measurable activity such as conversation or response duration when available |
| User activity | Clicks, navigation, page activity, and business-process steps |
| Browser context | Page, application, browser, device, user, and session |
| Technical evidence | JavaScript errors, network requests, long tasks, and resource activity |

<img src="https://mintcdn.com/germain-ux/Lu8ZG0APzunh0DAh/images/image-5.png?fit=max&auto=format&n=Lu8ZG0APzunh0DAh&q=85&s=d63a765a06d8423481a30ab43827d6a1" alt="Image" width="1199" height="832" data-path="images/image-5.png" />

GermainUX collects only the Vercel data available within the monitored and authorized browser context.

## Business outcomes

Vercel Monitoring helps organizations improve:

| Area | Business outcome |
| - | - |
| Customer service | Identify conversations affected by unavailable agents, bot problems, technical errors, or slow application behavior. |
| Sales | Understand whether chat engagement helps or prevents customers from progressing through product discovery, checkout, or another conversion journey. |
| eCommerce | Correlate conversations with cart activity, abandonment, checkout, and purchase outcomes. |
| Bot effectiveness | Determine when customers successfully interact with a bot, repeat requests, encounter friction, or require an agent. |
| Agent productivity | Identify application or communication issues that delay responses and increase handling time. |
| Customer experience | Understand the complete experience surrounding a conversation rather than reviewing chat activity in isolation. |
| Technical support | Reproduce intermittent Vercel problems using browser, network, error, and session evidence. |

## Customer, agent, and bot analysis

GermainUX can help answer questions such as:

<div className="gx-list">
  * Which customer journeys generate the most conversations?
  * Which pages or workflow steps cause customers to request help?
  * Are customers reaching an agent or remaining with a bot?
  * Which conversations are associated with application errors?
  * Are slow responses caused by Vercel, the surrounding application, or another dependency?
  * Which issues affect the most customers?
</div>

<Accordion title="Show all 9">
  <div className="gx-list">
    * Do conversations contribute to conversion, abandonment, or workflow completion?
    * What did the customer do before and after the conversation?
    * Which technical problems prevent messages or conversation events from operating correctly?
  </div>
</Accordion>

## Continuous monitoring

GermainUX RUM JS or the GermainUX RUM Extension monitors Vercel activity during real user sessions.

Use:

* **RUM JS** when the GermainUX monitoring script can be deployed directly in the application.
* **RUM Extension** when direct script deployment is unavailable or the application’s security architecture prevents access to the required browser context.

The collected Vercel evidence is associated with the available customer, application, page, and session context.

<img src="https://mintcdn.com/germain-ux/Lu8ZG0APzunh0DAh/images/image-4.png?fit=max&auto=format&n=Lu8ZG0APzunh0DAh&q=85&s=ee1b3e933fe387cef35cc09c80626dac" alt="Image" width="2222" height="822" data-path="images/image-4.png" />

## Technical investigation with JS Profiler

When a Vercel problem requires deeper investigation, the GermainUX JS Profiler can provide evidence such as:

<div className="gx-list">
  * JavaScript function execution.
  * Function duration.
  * JavaScript errors and stack traces.
  * Vercel-related network requests.
  * Resource loading.
  * Browser events and user interactions.
</div>

<Accordion title="Show all 9">
  <div className="gx-list">
    * Long-running browser tasks.
    * DOM activity.
    * Page and session context.
  </div>
</Accordion>

The JS Profiler complements continuous Vercel Monitoring. It should normally be enabled for a controlled scope when detailed technical evidence is required.

## Session Replay

When Session Replay is enabled, teams can review the user’s experience surrounding a Vercel conversation, subject to the configured privacy controls.

Session Replay can help show:

<div className="gx-list">
  * What the customer was doing before opening the chat.
  * Which page or workflow generated the need for assistance.
  * Whether the chat interface appeared and operated correctly.
  * What application errors or delays occurred.
  * Whether the user abandoned or completed the workflow afterward.
</div>

Messages and input fields should be masked, excluded, or recorded only according to the organization’s privacy and compliance requirements.

## Analytics

GermainUX can analyze Vercel data through KPIs, measures, pivots, trends, drill-through views, and user-session context.

| Analysis area | Examples |
| - | - |
| Conversation activity | Conversations, events, and messages |
| Participants | Customer, agent, or bot |
| Performance | Conversation or response duration when available |
| Impact | Affected users, sessions, pages, and workflows |
| Journey | Activity before, during, and after the conversation |
| Outcome | Completion, conversion, escalation, or abandonment when configured |
| Technical context | JavaScript errors, network requests, long tasks, and resources |
| Experience evidence | Browser activity and Session Replay |

## KPIs

Vercel data can contribute to browser and chat analytics such as:

| KPI | Purpose |
| - | - |
| Chat Event | Captures supported conversation and participant activity. |
| Chat Transaction | Measures supported chat activity with a duration. |
| Browser Event | Captures application-specific Vercel or business events. |
| Browser Transaction | Measures an application-specific conversation or workflow interval. |
| JavaScript Console Event | Captures browser errors affecting Vercel. |
| Network Request | Measures related browser requests and failures. |

Custom KPIs can be created when the organization requires application-specific conversation, escalation, service, or conversion analysis.

## Automated analysis and notification

GermainUX can apply its analytics to the collected Vercel evidence to:

<div className="gx-list">
  * Categorize recurring conversation or technical conditions.
  * Identify outliers and abnormal trends.
  * Quantify the users and sessions affected by an issue.
  * Correlate conversations with application behavior and business outcomes.
  * Detect configured phrases or messages of interest.
  * Surface conversation-related events on the Session Replay timeline.
  * Notify GermainUX users through Watches when existing insights meet conditions of interest.
</div>

A Watch provides a notification based on an insight already detected by GermainUX. It does not create the underlying Vercel insight.

## Integration

GermainUX relies on the supported [Vercel Web API](https://developers.channel.io/docs/web-channelio) to receive Vercel events available within the monitored application.

The application must:

<div className="gx-list">
  * Have Vercel deployed and operating correctly.
  * Load Vercel within a context accessible to the applicable GermainUX browser component.
  * Permit the required Vercel and GermainUX scripts under its security policies.
  * Allow the browser to communicate with the Vercel and GermainUX endpoints.
  * Expose the supported events required by the monitoring use case.
</div>

## Configuration

Vercel Monitoring requires application-specific integration with the supported Vercel Web API.

Configuration typically includes:

<Steps>
  <Step title="Deploy RUM JS or the RUM Extension for the application" />

  <Step title="Confirm that normal browser-monitoring data reaches GermainUX" />

  <Step title="Confirm that Vercel is available in the monitored browser context" />

  <Step title="Enable the required Vercel event listeners" />

  <Step title="Map the supported Vercel events to GermainUX chat events or transactions" />

  <Step title="Add approved conversation, participant, and application metadata" />

  <Step title="Configure masking, exclusions, and retention" />

  <Step title="Validate customer, agent, and bot scenarios" />

  <Step title="Confirm that Vercel evidence is associated with the correct user session" />
</Steps>

Only collect the events and message information required for approved analytics use cases.

## Privacy and security

Vercel conversations can contain personal, confidential, financial, health, authentication, or other sensitive information.

Before enabling monitoring:

<div className="gx-list">
  * Define which messages and events may be collected.
  * Mask or exclude sensitive message content.
  * Avoid collecting passwords, access tokens, payment credentials, or secrets.
  * Apply consent requirements.
  * Restrict access to conversations and Session Replay.
  * Apply role-based access and appropriate retention.
</div>

<Accordion title="Show all 9">
  <div className="gx-list">
    * Validate customer, agent, and bot data separately.
    * Review the integration after Vercel or application changes.
    * Obtain approval from the organization’s privacy, security, and compliance owners.
  </div>
</Accordion>

Metadata and message content should be limited to what is necessary for the approved business purpose.

## Validation

After deployment:

<Steps>
  <Step title="Open the monitored application with an authorized test user" />

  <Step title="Start a Vercel conversation" />

  <Step title="Exchange controlled messages with a bot or agent" />

  <Step title="Complete or close the conversation" />

  <Step title="Confirm that supported events and messages reach GermainUX" />

  <Step title="Verify the customer, agent, bot, page, and session associations" />

  <Step title="Review the corresponding browser and Session Replay evidence" />

  <Step title="Confirm that masking and exclusions work as intended" />

  <Step title="Generate a controlled error or failure when safe" />

  <Step title="Verify the expected KPIs and analytics" />
</Steps>

## Deployment and configuration

<div className="gx-list">
  * Deploy and validate Vercel within the monitored web application.
  * Review [Browser Monitoring](/main/browser-monitoring).
  * Review the [Browser Monitoring Deployment Overview](/main/deployment-for-browser-monitoring).
  * Deploy [GermainUX RUM JS](/main/germain-ux-rum-js) when the monitoring script can be added to the application.
  * Deploy the [GermainUX RUM Extension](/main/germain-ux-rum-extension) when direct script deployment is unavailable or access to the complete browser-page context requires an extension.
  * Deploy the [GermainUX JS Profiler](/main/germain-ux-js-profiler) for deeper JavaScript, browser, and network diagnostics.
</div>

<Accordion title="Show all 12">
  <div className="gx-list">
    * Configure the supported [Vercel Web API](https://developers.channel.io/docs/web-channelio) events required by the monitoring use case.
    * Review [Chat and CTI Monitoring](/main/chat-cti-monitoring).
    * Review Chat Analysis.
    * Configure [Metadata Extractors](/main/metadata-extractors) when additional approved user, conversation, or application context is required.
    * Review the KPIs for Browser Monitoring.
    * Review the [KPIs for User Monitoring and Replay](/main/user-monitoring-and-replay-kpis).
  </div>
</Accordion>

## Collected Data

This data will include:

| Item | Description / Details |
| - | - |
| Generic events | [Chat and CTI Monitoring](/main/chat-cti-monitoring) |
| Vercel events | [https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocol#ui-message-stream-protocol](https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocol#ui-message-stream-protocol) |
| Messages | GermainUX monitor messages exchanged between agents, bots, and customers. |

## Get Help

<CardGroup cols={2}>
  <Card title="Contact GermainUX Support" icon="headset" href="/main/support">
    The Germain Team can help you set this up.
  </Card>

  <Card title="Can't find what you need?" icon="magnifying-glass">
    Search all GermainUX docs with **Ctrl + K**, or use the feedback buttons at the bottom of this page to tell us what is missing.
  </Card>
</CardGroup>

<GxFooter />

<GxStyle />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.