How to Create AI Agents with NextJS and Langbase LLM

AI agents are revolutionizing the way we interact with the internet. These autonomous software programs leverage the power of large language models (LLMs) to go beyond simple text generation. They can engage with digital environments, make decisions, and perform tasks based on their understanding of language.

AI agents amplify the capabilities of LLMs by adding new functionalities while relying on them for reasoning and decision-making. In essence, AI agents equip LLMs with the ability to interact with the real world.

This guide will walk you through building an AI agent in a Next.js application using BaseAI, the first web AI framework.

Prerequisites

Before diving in, ensure you have the following:

• A Langbase account: Sign up for a free account at https://langbase.com.

• Understanding of Next.js: Familiarity with the Next.js framework is essential for this project.

• Basic knowledge of BaseAI: A grasp of the fundamental concepts of BaseAI will be helpful.

Setting up the Environment

1. Installing Next.js: Start by creating a new Next.js project using the following command:

      npx create-next-app@latest nextjs-baseai-app
    

This will set up a new Next.js application named "nextjs-baseai-app" in your current directory.

1. Installing BaseAI: Install BaseAI within your project directory:

      npx baseai@latest init
    

This command initializes BaseAI in your Next.js project.

1. Creating a Summary AI Agent Pipe: Use the baseai CLI to create a new pipe named "summary". Pipes are the building blocks of AI agents, defining their specific functionality.

      npx baseai@latest pipe
    

This command will generate a new pipe file at baseai/pipes/summary.ts. You can modify the systemPrompt within this file to tailor the behavior of your AI agent. For example, set systemPrompt to "You are a helpful AI assistant. Make everything less wordy." to instruct your agent to summarize text concisely.

1. Setting Environment Variables: Create a .env file in your project directory to store your API keys.

      cp .env.baseai.example .env
    

Set the OPENAI_API_KEY within this file. You can obtain your API key from your OpenAI account settings.

Building the AI Agent

1. Adding an API Route Handler: Create a new API route handler at app/api/langbase/pipes/run/route.ts to handle requests to your AI agent.

import { Pipe } from '@baseai/core';
import { NextRequest } from 'next/server';
import pipeSummary from '../../../../../baseai/pipes/summary';

export async function POST(req: NextRequest) {
    const runOptions = await req.json();

    // 1. Initiate the Pipe.
    const pipe = new Pipe(pipeSummary());

    // 2. Run the pipe
    const result = await pipe.run(runOptions);

    // 3. Return the response stringified.
    return new Response(JSON.stringify(result));
}
    

This code snippet defines an API endpoint that receives user input, runs the "summary" pipe, and returns the generated response.

1. Creating a React Component: Add the following components to your Next.js app to provide a user interface for interacting with your AI agent:

• app/pipe-run/page.tsx: This page will display the AI agent's interface.

• components/pipe-run.tsx: This component will handle the execution of the AI agent's pipe.

• components/ui/button.tsx: This component will provide a button for triggering the AI agent.

• components/ui/input.tsx: This component will allow users to enter their prompts.

Install the necessary dependencies for these components:

      npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge
    

The PipeRunExample component in app/pipe-run/page.tsx will render the user interface and handle the interaction with the AI agent:

      import PipeRunExample from '@/components/pipe-run';

export default function Page() {
    return (
        <div className="w-full max-w-md">
            <h1 className="text-2xl font-light text-gray-800 mb-1 text-center">
                ⌘ Langbase AI Agent Pipe: Run
            </h1>
            <p className="text-muted-foreground text-base font-light mb-20 text-center">
                Run a pipe to generate a text completion
            </p>
            <PipeRunExample />
        </div>
    );
}
    

Integrating with Langbase

1. Adding Environment Variables: Configure your Langbase and LLM provider keys by adding them to your .env file. These keys are essential for authentication and accessing the necessary language models.

# !! SERVER SIDE ONLY !!
# Keep all your API keys secret — use only on the server side.

# TODO: ADD: Both in your production and local env files.
# Langbase API key for your User or Org account.
# How to get this API key https://langbase.com/docs/api-reference/api-keys
LANGBASE_API_KEY=

# TODO: ADD: LOCAL ONLY. Add only to local env files.
# Following keys are needed for local pipe runs. Add the providers you are using.
# For Langbase, please add the keys in your LLM keysets on Langbase Studio.
# Read more: Langbase LLM Keysets https://langbase.com/docs/features/keysets
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
COHERE_API_KEY=
FIREWORKS_API_KEY=
GOOGLE_API_KEY=
GROQ_API_KEY=
MISTRAL_API_KEY=
PERPLEXITY_API_KEY=
TOGETHER_API_KEY=
    

Replace the placeholders with your actual API keys. The LANGBASE_API_KEY is specific to your user or organization account and can be found in the Langbase dashboard.

1. Running the Application: Start the BaseAI development server and your Next.js application in separate terminal windows.

# Terminal 1
npx baseai@latest dev # Start BaseAI dev server

# Terminal 2
npm run dev # Start Next.js app
    

Open your browser and navigate to http://localhost:3000/pipe-run to access your AI agent. Enter a prompt in the text input field and click the "Ask AI" button to generate a response.

Deploying to Langbase

1. Deploying to Langbase: Deploy your project to Langbase to make it accessible as a serverless, highly scalable API. First, authenticate with your Langbase account using the following command:

      npx baseai@latest auth
    

Once authenticated, deploy your project with the following command:

      npx baseai@latest deploy
    

This command will deploy your project to Langbase, enabling you to access it via a dedicated API endpoint. Ensure you have added your LLM provider keys (OpenAI, Google, etc.) to your Langbase Keysets for proper functionality.

By following these steps, you've successfully created an AI agent within a Next.js application using BaseAI, ready to be deployed and integrated into your projects.