Next.js

To embed a LemonSlice agent into a Next.js app, you’ll add the widget to your root layout so it persists across route changes. If you’re using the App Router (app/ directory), this can be done with just a few lines of code.

Prerequisites

A LemonSlice Agent created on a paid plan
A Next.js project using the App Router
Basic familiarity with TypeScript and React

Guide

Get your embed code

Visit the LemonSlice agents platform and copy your agent’s embed code. It should look something like this:

HTML

<lemon-slice-widget agent-id="AGENT_ID_HERE"></lemon-slice-widget>
<script type="module" src="https://unpkg.com/@lemonsliceai/lemon-slice-widget"></script>

Add the widget to your layout.tsx

Open your root layout file at app/layout.tsx.Place the widget inside the <body> so it loads once and persists across pages:

TSX

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My App",
  description: "A simple Next.js app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}

        <lemon-slice-widget agent-id="AGENT_ID_HERE" />
        <script
          type="module"
          src="https://unpkg.com/@lemonsliceai/lemon-slice-widget"
        />
      </body>
    </html>
  );
}

Save the file and restart your dev server if needed.

Since lemon-slice-widget is a custom HTML element, TypeScript needs to be told it’s valid JSX.Create a global declaration file (for example, types/lemon-slice.d.ts) and add:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "lemon-slice-widget": {
        "agent-id": string;
      };
    }
  }
}

export {};

This prevents TypeScript errors during development and builds.

Verify the widget is live

Start your app and navigate to any page.
The LemonSlice agent should load once and remain available as you navigate between routes.

⌘I

Using the widget

Embedding guides

Prerequisites

Guide

​Prerequisites

​Guide

Prerequisites

Guide