Installation

This page covers the setup both paths share. The first two steps apply to everyone. The last step adds the Bubble Menu to an existing Tiptap editor. If you are using the editor starter, skip it, because the starter command adds the AI components for you.

emend comes in two parts:

The AI components (Bubble Menu, Composer, AI Assistant). The Shadcn CLI copies their source code into your project, so you can edit them like your own files.
The @emend/ai package. An npm package that does the work behind the components: it talks to your server, streams the AI response, and applies changes to your editor.

Next.js only for now

These guides are written for Next.js with the App Router, and that is the only setup we test. The AI components are plain React, so they may also work in other React apps, such as one created with Vite, as long as you have a backend endpoint that makes the AI API call. Guides for other frameworks are coming soon.

Before you start

Make sure your project has everything below before you install emend.

Next.js with the App Router, and React 19
Tiptap 3.7.1 or later, if your app already has an editor. Otherwise the component commands install it for you.
Shadcn already set up with Tailwind CSS 4
Node.js 24.19.0 or later

The components are built on Base UI, so choose Base UI as the component library when you set up Shadcn.

Set up your project

Tell Shadcn where to find emend

Open the components.json file that Shadcn created and add the @emend registry:

components.json

{
  "registries": { 
    "@emend": "https://getemend.vercel.app/r/{name}.json"
  } 
}

Keep the other settings in your existing components.json; only add the registry entry shown above.

Install the package

Install @emend/ai with your package manager:

pnpm add @emend/ai

Add your first component

If you have an existing Tiptap editor, start with the Bubble Menu. It is the simplest one:

pnpm dlx shadcn@latest add @emend/ai-bubble-menu

This copies the component into components/emend/ai-bubble-menu and installs anything it needs. The copied files are yours to change. The AI logic stays in @emend/ai, so you get fixes by updating the package.

The component commands install @emend/ai for you. Install it on its own only when you are building your own AI UI.

What you should see

A new components/emend folder with the component files
Any Shadcn building blocks it uses (buttons, popovers) in components/ui
@emend/ai in your package.json

Next, pick your path

Existing editorI already have a Tiptap editorKeep your editor and add one or more emend AI surfaces to it.

Your schema, extensions, toolbar, and persistence stay as they are
Add the Bubble Menu, Composer, or AI Assistant
Add one server route that talks to the AI model

Add emend to your editor New editorI need an editorCopy a complete Tiptap editor starter, with or without an AI surface.

A full editor with a toolbar, formatting, tables, and saving
Start with no AI or one of the three AI surfaces
The copied source is yours to adapt

Copy the editor starter