# @agent-embed/nextjs

> Convenient library to display agent embed on your Next.js website

Latest version **2.1.0** (published 2026-10-05) · AGPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @agent-embed/nextjs
pnpm add @agent-embed/nextjs
yarn add @agent-embed/nextjs
bun add @agent-embed/nextjs
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2026-10-05 |
| First published | 2023-11-20 |
| Weekly downloads | 0 |
| License | AGPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jai |
| Maintainers | jkntji |

## Links

- npm: https://www.npmjs.com/package/@agent-embed/nextjs
- npm.io page: https://npm.io/package/@agent-embed/nextjs

## Recent versions

- 2.1.0 (latest) — 2026-10-05
- 2.0.0 — 2026-10-03
- 1.0.1 — 2026-09-23
- 1.0.0 — 2026-09-21
- 0.7.0 — 2026-09-10
- 0.6.0 — 2026-09-04
- 0.5.0 — 2026-09-02
- 0.4.0 — 2026-04-10
- 0.3.2 — 2026-03-10
- 0.3.1 — 2026-02-16
- 0.3.0 — 2026-02-11
- 0.2.1 — 2026-02-05
- 0.2.0 — 2026-01-22
- 0.1.0 — 2026-01-16
- 0.0.45 — 2025-11-28
- … 43 more at https://npm.io/package/@agent-embed/nextjs/versions

## README

Add an [OpenAI Chatbot For NextJs](https://predictabledialogs.com) using this library.

## Pre-requisite
Create an agent on [https://predictabledialogs.com](https://predictabledialogs.com)

## Install

```bash
npm install @agent-embed/nextjs
```

## Bubble

```tsx
import { Bubble } from '@agent-embed/nextjs'

const App = () => {
  return (
          <Bubble
            agentName="agent-name"
            theme={{ button: { 
              backgroundColor: "#2b3e13",
            } }}
            previewMessage={{
              message: 'Sounds Interesting? Use the chatbot to sign up!',
            }}
          />  
        )
}
```

This code will show the bubble and let a preview message appear after 5 seconds.

You can also use the `Script` component in NextJs as below:

```tsx
import Script from 'next/script'

<Script
  src="https://cdn.jsdelivr.net/npm/@agent-embed/js@0.0.1/dist/web.js"
  strategy="afterInteractive"
  type="module"
  onLoad={() => {
    Agent.initBubble({
      agentName: "agent-name",
      theme: {
        button: { backgroundColor: "#2b3e13" },
      },
    });
  }}
/> 

```

### Open or close the preview message

You can use these commands:

```js
import { showPreviewMessage } from '@agent-embed/nextjs'

Agent.showPreviewMessage()
```

```js
import { hidePreviewMessage } from '@agent-embed/nextjs'

Agent.hidePreviewMessage()
```

### Open or close the chat window

You can use these commands:

```js
import { open } from '@agent-embed/nextjs'

open()
```

```js
import { close } from '@agent-embed/nextjs'

close()
```

```js
import { toggle } from '@agent-embed/nextjs'

toggle()
```

---
_Source: https://npm.io/package/@agent-embed/nextjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._