Getting Started

Learn how to install and set up AgentPress in your Next.js application.

Installation

Install the agentpress-nextjs package using your preferred package manager:

# Using bun (recommended)
bun add agentpress-nextjs
 
# Using npm
npm install agentpress-nextjs
 
# Using pnpm
pnpm add agentpress-nextjs
 
# Using yarn
yarn add agentpress-nextjs

Configure Tailwind CSS

Since agentpress-nextjs uses Tailwind CSS for styling, you need to add it to your Tailwind configuration’s content array. This ensures Tailwind generates all the necessary styles for AgentPress components.

// tailwind.config.ts
import type { Config } from "tailwindcss";
 
const config = {
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./node_modules/agentpress-nextjs/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;
 
export default config;

Create an AgentPress Project

Before using the chat component, you need to create a project on the AgentPress platform.

1. Visit AgentPress 
2. Sign up or log in to your account
3. Create a new project
4. Copy your Project ID - you’ll need this for the chat component

First Chat Component

Now you’re ready to use the chat component in your application:

import { AgentpressChat } from "agentpress-nextjs";
 
export default function ChatPage() {
  return <AgentpressChat projectId="your-project-id" />;
}

That’s it! You now have a working AI chat interface in your Next.js app.

Local Development with Tunneling

If you want to test AgentPress executing your local API methods, you need to make your local development server accessible from the public internet.

Why Tunneling?

AgentPress cloud needs to reach your local API routes to execute them. Your localhost server isn’t reachable from the internet by default, so you’ll need a tunneling service.

Setup Tunnel with ngrok

1. Install ngrok - Download from ngrok.com 

2. Start your Next.js dev server:

bun dev

3. In another terminal, start ngrok:

ngrok http 3000

4. Copy the forwarding URL - ngrok will show something like:

Forwarding   https://abc123def456.ngrok.io -> http://localhost:3000

5. Update your AgentPress project:

   • Go to your AgentPress project settings
   • Set the Base URL to your ngrok URL: https://abc123def456.ngrok.io
   • Save

6. Sync your methods:

bunx agentpress-sync

Now AgentPress can execute your local API methods!

Next Steps

• Learn about syncing your API methods
• Explore available components
• Check advanced examples

Troubleshooting

If you encounter any issues during setup:

• Make sure you’ve added Tailwind CSS content path correctly
• Verify your Project ID is correct
• Check that React 19+ and Next.js 15+ are installed