---
title: "AI agent chatbot"
description: "Build an AI agent that can read and edit Tiptap documents using the AI Toolkit and Vercel AI SDK."
canonical_url: "https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/agents/ai-agent-chatbot"
---

# AI agent chatbot

Build an AI agent that can read and edit Tiptap documents using the AI Toolkit and Vercel AI SDK.

- **1. Get access**

  Access the AI Toolkit extension by purchasing the paid AI Toolkit add-on.
  Contact our team.
- **2. Access the private registry**

  The AI Toolkit extension is published in Tiptap's private npm registry. Authenticate to Tiptap's
  private npm registry by following the [setup guide](https://tiptap.dev/docs/guides/pro-extensions.md).
- **3. Install the extension**

  Install the extension from the private registry using npm or your preferred package manager.

Build a simple AI agent chatbot that can read and edit Tiptap documents.

> **Interactive demo:** [ai agent chatbot](https://ai-toolkit-demos.vercel.app/ai-agent-chatbot)

See the [source code on GitHub](https://github.com/ueberdosis/ai-toolkit-demos).

## Tech stack

- [React](https://react.dev/) + [Next.js](https://nextjs.org/)
- [AI SDK by Vercel](https://ai-sdk.dev/) + [OpenAI](https://openai.com/) models
- Tiptap AI Toolkit

## Installation

Create a [Next.js](https://nextjs.org/) project:

```bash
npx create-next-app@latest ai-agent-chatbot
```

Install the core Tiptap packages and the [Vercel AI SDK](https://ai-sdk.dev/) for OpenAI:

```bash
npm install @tiptap/react @tiptap/starter-kit ai @ai-sdk/react @ai-sdk/openai
```

Install the Tiptap AI Toolkit and the tool definitions for the Vercel AI SDK.

> **Pro package:**
>
> The AI Toolkit is a pro package. Before installation, set up access to the private NPM registry by
> following the [private registry guide](https://tiptap.dev/docs/guides/pro-extensions.md).

```bash
npm install @tiptap-pro/ai-toolkit @tiptap-pro/ai-toolkit-ai-sdk
```

## API endpoint

Create an API endpoint that uses the [Vercel AI SDK](https://ai-sdk.dev/) to call the OpenAI model. Include the [tool definitions](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/tools/ai-sdk.md) for the Tiptap AI Toolkit.

If your backend is in another programming language than TypeScript, see [this guide](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/advanced-guides/non-typescript-backends.md).

```ts
// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai'
import { toolDefinitions } from '@tiptap-pro/ai-toolkit-ai-sdk'
import { createAgentUIStreamResponse, ToolLoopAgent, UIMessage } from 'ai'

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json()

  const agent = new ToolLoopAgent({
    model: openai('gpt-5.4-mini'),
    instructions: 'You are an assistant that can edit rich text documents.',
    tools: toolDefinitions(),
  })

  return createAgentUIStreamResponse({
    agent,
    uiMessages: messages,
  })
}
```

To access the OpenAI API, create an API key in the [OpenAI Dashboard](https://platform.openai.com/account/api-keys) and add it as an [environment variable](https://nextjs.org/docs/app/guides/environment-variables). The environment variable will be detected automatically by the Vercel AI SDK.

```sh
# .env
OPENAI_API_KEY=your-api-key
```

When the AI model receives a request, it will decide to call the available tools to read the document and edit it. See the [list of available tools](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/tools/available-tools.md) for more details.

## Client-side setup

When the AI model decides to call a tool, it needs to be executed on the client. This is done with the [`executeTool` method](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/execute-tool.md):

```ts
import { Editor } from '@tiptap/react'
import { getAiToolkit } from '@tiptap-pro/ai-toolkit'

// Create a Tiptap Editor instance
const editor = new Editor()

// Get the Tiptap AI Toolkit instance
const toolkit = getAiToolkit(editor)

// The AI decides to call the `tiptapRead` tool to read the document
// Use the `executeTool` method to execute the tool and get the result
const result = toolkit.executeTool({
  // The name of the tool to execute
  toolName: 'tiptapRead',
  // AI-generated input
  input: {},
})
// Send the result back to the AI model
```

To implement this in your app, create a client-side React component that renders the Tiptap Editor and a simple chat UI. This component leverages the [useChat hook](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) from the Vercel AI SDK to call the API endpoint and manage the chat conversation.

```tsx
// app/page.tsx
'use client'

import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai'
import { useChat } from '@ai-sdk/react'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { useState } from 'react'
import { AiToolkit, getAiToolkit } from '@tiptap-pro/ai-toolkit'

export default function Page() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, AiToolkit],
    content: `<h1>AI agent demo</h1><p>Ask the AI to improve this.</p>`,
  })

  const { messages, sendMessage, addToolOutput } = useChat({
    transport: new DefaultChatTransport({ api: '/api/chat' }),
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
    async onToolCall({ toolCall }) {
      if (!editor) return

      const { toolName, input, toolCallId } = toolCall

      // Use the AI Toolkit to execute the tool
      const toolkit = getAiToolkit(editor)
      const result = toolkit.executeTool({
        toolName,
        input,
      })

      addToolOutput({ tool: toolName, toolCallId, output: result.output })
    },
  })

  const [input, setInput] = useState('Replace the last paragraph with a short story about Tiptap')

  if (!editor) return null

  return (
    <div>
      <EditorContent editor={editor} />
      {messages?.map((message) => (
        <div key={message.id} style={{ whiteSpace: 'pre-wrap' }}>
          <strong>{message.role}</strong>
          <br />
          {message.parts
            .filter((p) => p.type === 'text')
            .map((p) => p.text)
            .join('\n')}
        </div>
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault()
          sendMessage({ text: input })
          setInput('')
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} />
      </form>
    </div>
  )
}
```

## End result

With additional CSS styles, the result is a simple but polished AI chatbot application:

> **Interactive demo:** [ai agent chatbot](https://ai-toolkit-demos.vercel.app/ai-agent-chatbot)

See the [source code on GitHub](https://github.com/ueberdosis/ai-toolkit-demos).

## Next steps

- Let your users review AI-generated changes with the [review changes guide](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/agents/review-changes.md)
- Add real-time tool streaming to see changes as they happen with the [streaming guide](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/agents/streaming.md)
- Does your document contain custom nodes and marks? Learn how make your AI agent understand them with the [schema awareness guide](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/schema-awareness.md).