# Web Chat: Your Agent, Live Inside Your Product | Novu

> Web Chat uses product context, takes action, and continues conversations across channels. Live in two minutes.

Canonical: https://www.novu.co/channels/web-chat/

Markdown: https://www.novu.co/channels/web-chat.md

Connect command: npx novu connect --channel web-chat

Prompt for your coding agent:

```text
Add Novu Web Chat to my app so end users can chat with my agent in-product.

Use @novu/react (useAgentChat + NovuProvider) following the docs at https://docs.novu.co/agents/channels/agent-chat. Build a production-quality chat UI with AI Elements (https://elements.ai-sdk.dev): render the message list from message.parts, a composer, reasoning and tool parts, and tool approvals via respondToAction. Match my app's existing styling and design system. Do not dump raw JSON.

Wrap the UI in <NovuProvider> for the signed-in end user: read applicationIdentifier from an environment variable, pass the authenticated user's id as subscriberId from my existing auth, and pass subscriberHash if my app enables Novu subscriber HMAC. Follow my app's framework, routing, styling, and TypeScript conventions, place the chat in a sensible spot, and add no unnecessary wrappers.
```

Add Web Chat with our [Lovable](<https://www.novu.co/channels/web-chat/lovable/>) and [v0](<https://www.novu.co/channels/web-chat/v0/>) integrations.

## You know the old chat widget. This is Web Chat

Old widgets follow scripts and create tickets. Web Chat brings your AI agent into the product to understand context, act, and render real UI.

### The old chat widget

- Scripted replies that end in a ticket form
- Walls of text instead of UI
- Loses the thread when the user leaves the page

### Web Chat

- Your agent, your model, your logic
- Acts inside the product, with approval for sensitive tools
- Renders your components in the thread
- Resumes the conversation and knows the user on every channel you connect

## Not a chat box on your site. An agent inside your app

Embedded in your product, Web Chat understands context, takes action, and responds with your own UI.

- Connects users to their profiles: When a user is identified, their details and conversation are linked to one subscriber profile.
- Keeps every conversation: Review each Web Chat conversation, its messages, status, and user in the Novu dashboard.
- Works in your app's context: Knows the user and current task, keeping every response relevant.
- Takes real actions: Uses your tools to update records and resolve requests with approval.
- Renders your components: Renders your components, tool calls, and approvals directly in the thread.

## Side panel or full screen. Your choice

Switch layouts and customize the experience with flexible components from AI Elements.

[Explore AI elements](<https://elements.ai-sdk.dev/>)

## Your agent starts in-app and continues across every connected channel

Connect the same agent across Web Chat and other channels. Novu links identified users to their subscriber profile and maintains conversation history within each thread.

- [Telegram](<https://www.novu.co/channels/telegram/>)
- [MS Teams](<https://www.novu.co/channels/microsoft-teams/>)
- [Email](<https://www.novu.co/channels/email/>)
- [iMessage](<https://www.novu.co/channels/imessage/>)
- [Slack](<https://www.novu.co/channels/slack/>)
- [WhatsApp](<https://www.novu.co/channels/whatsapp/>)

## Deploy the ACI, not just chat

Add your agent. ACI handles identity, threads, delivery, compliance, and scale. Production-ready in under two minutes.

- Identity & subscribers: Every user identified and secured with HMAC. No auth or user store to build.
- Conversation history: Novu stores each Web Chat conversation so your app can resume it when a user returns.
- Delivery that lands: Retries, fallbacks, and deliverability from four years of notification infrastructure.
- Compliance, built in: SOC 2 Type II, HIPAA, ISO 27001, and GDPR, in US and EU data regions.
- Scale from day one: The same rails the open-source Novu, ~40K GitHub stars, runs in production.

## Works with your design system. Ship to production

Web Chat is a flexible React hook, not a fixed widget. Style it with your own components or any compatible library to match your brand.

## Build your connection. Ship it from any builder.

Choose Web Chat and your framework. Copy the generated prompt or CLI command to connect your agent.

## We never run your brain

Novu brings your agent to the web and carries every conversation, while your code, model, prompts, tools, and logic remain entirely yours.

- Bring any agent: Connect the agent you already use: Vercel AI SDK, LangChain, Mastra, or custom code.
- Change runtime later: Swap models or frameworks without rebuilding Web Chat or losing conversation history.
- Keep your logic yours: Your prompts, tools, model calls, and keys stay in your infrastructure. Novu carries conversations, not your agent’s logic.