---
title: Web Chat
description: Embed a first-party web chat UI backed by your agent.
type: channel
keywords:
  - web
  - chat
  - ui
  - embed
  - frontend
  - next.js
  - svelte
  - sveltekit
  - nuxt
  - vue
  - react
---

# Web Chat

Channel integration for eve. Embed a first-party web chat UI backed by your agent.

## Install

The eve CLI scaffolds the full Next.js web chat app alongside `agent/channels/eve.ts`:

```bash
eve add channel/web
```

To wire it up by hand instead — including into a Svelte or Nuxt app you already have — install the framework:

```bash
npm install eve@latest
```

## Quick start

The eve channel is on by default. Add `agent/channels/eve.ts` only when you want to override the default session routes or auth:

```ts
// agent/channels/eve.ts
import { eveChannel } from "eve/channels/eve";

export default eveChannel();
```

Point your frontend at the session routes eve serves (`/eve/v1/session`) and stream responses with the eve web client. Next.js, Nuxt, and Svelte each have an integration that mounts those routes on your app's own origin, so there's no CORS to configure and no URL env var to keep in sync:

- **Next.js.** Wrap `next.config.ts` with `withEve()` from `eve/next`, then call `useEveAgent()` from `eve/react`. See the [Next.js guide](/docs/guides/frontend/nextjs).
- **Nuxt.** Add `"eve/nuxt"` to `modules` in `nuxt.config.ts`; the `useEveAgent()` composable from `eve/vue` is auto-imported. See the [Nuxt guide](/docs/guides/frontend/nuxt).
- **Svelte.** Add the `eveSvelteKit()` Vite plugin before `sveltekit()` in `vite.config.ts`, then call `useEveAgent()` from `eve/svelte`. See the [SvelteKit guide](/docs/guides/frontend/sveltekit).

On any other stack, wire it up by hand: run the agent as its own service and proxy `/eve/v1/**` to it, or pass its origin as `host` to `useEveAgent()` and enable `cors` on the channel. Server-side code and custom UIs can call the routes through `Client` from `eve/client`.

## Configure

The eve channel is the lowest-friction way to talk to your agent, with no third-party provisioning required. Layer in auth and route protection as needed, and enable `cors` only when a browser reaches the channel from another origin. See the [eve channel docs](/docs/channels/eve), the [Frontend guide](/docs/guides/frontend/overview), and the per-framework guides for [Next.js](/docs/guides/frontend/nextjs), [Nuxt](/docs/guides/frontend/nuxt), and [SvelteKit](/docs/guides/frontend/sveltekit).

[Read the full channel documentation](/docs/channels/eve)

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)