Langbase

Integrations: Configure Langbase with Next.js

Let's integrate an AI title generator pipe agent into a Next.js app.

In this integration guide, you will:

  • Setup a Next.js app.
  • Integrate Langbase SDK into your app via Server Actions.
  • Generate title ideas for your next blog using Pipe.

Step #0Create a Next.js Application

To build the agent, we need to have a Next.js starter application. If you don't have one, you can create a new Next.js application using the following command:

Initialize project

npx create-next-app@latest generate-titles

This will create a new Next.js application in the generate-titles directory. Navigate to the directory and start the development server:

Initialize project

cd generate-titles && npm run dev

Step #1Install Langbase SDK

Install the Langbase SDK in this project using npm or pnpm.

Install Langbase SDK

npm install langbase

Step #2Get Langbase API Key

Every request you send to Langbase needs an API key. This guide assumes you already have one. In case, you do not have an API key, please check the instructions below.

Create an .env file in the root of your project and add your Langbase API key.

.env

LANGBASE_API_KEY=xxxxxxxxx

Replace xxxxxxxxx with your Langbase API key.

Step #3Add LLM API keys

If you have set up LLM API keys in your profile, the Pipe will automatically use them. If not, navigate to LLM API keys page and add keys for different providers like OpenAI, TogetherAI, Anthropic, etc.

Step #4Fork the AI title generator agent pipe

Go ahead and fork the title generator agent pipe in Langbase Studio. This agent generate 5 different titles on a given topic.

Step #5Create a Server Action

Let's create a Server Action to generate titles using the Pipe API.

  1. Create a new file actions.ts in the app directory of your Next.js app.
  2. Write a function called runAiTitleGeneratorAgent that uses Langbase SDK Pipe to generate titles.
  3. Give user prompt Generate 5 titles to generate 5 titles.
  4. Pass the topic variable to the runAiTitleGeneratorAgent function to update {{topic}} variable in system prompt inside AI Title Generator Pipe.

app/actions.ts

'use server';
import { Langbase } from "langbase";

export async function runAiTitleGeneratorAgent(topic: string) {
	const langbase = new Langbase({
        apiKey: process.env.LANGBASE_API_KEY!
    });
    
    const response = await langbase.pipes.run({
		stream: false,
        name: 'ai-title-generator',
        variables: [{ name: 'topic', value: topic }],
        messages: [{ role: 'user', content: topic }],
    })

    return response.completion;
}

Step #6Call the Server Action in a Page

Now let's call the Server Action:

  1. Open the app/page.tsx file
  2. Import the useState from react and runAiTitleGeneratorAgent function from the actions.ts file.
  3. Create a new component called Home that contains an input field to enter a topic, a button to generate titles, and a paragraph to display the generated titles.
  4. Use the useState hook to manage the state of the topic, completion, and loading.
  5. Call the runAiTitleGeneratorAgent function when the button is clicked and display the generated titles.

app/page.tsx

'use client';

import { useState } from 'react';
import { runAiTitleGeneratorAgent } from './actions';

export default function Home() {
	const [topic, setTopic] = useState('');
	const [completion, setCompletion] = useState('');
	const [loading, setLoading] = useState(false);

	const handlerunAiTitleGeneratorAgent = async () => {
		setLoading(true);
		const completion = await runAiTitleGeneratorAgent(topic);
		setCompletion(completion);
		setLoading(false);
	};

	return (
		<main className="flex min-h-screen flex-col items-center justify-between p-24">
			<div className="flex flex-col items-center">
				<h1 className="text-4xl font-bold">
					Generate Text Completions
				</h1>
				<p className="mt-4 text-lg">
					Enter a topic and click the button to generate titles using
					LLM
				</p>
				<input
					type="text"
					placeholder="Enter a topic"
					className="mt-4 rounded-lg border border-gray-300 p-2 text-sm"
					value={topic}
					onChange={e => setTopic(e.target.value)}
				/>
				<button
					className="mt-4 rounded-lg bg-blue-500 p-2 text-white"
					onClick={handlerunAiTitleGeneratorAgent}
				>
					Generate titles
				</button>
				{loading && <p className="mt-4">Loading...</p>}
				{completion && (
					<p className="mt-4">
						<strong>Completion:</strong> {completion}
					</p>
				)}
			</div>
		</main>
	);
}

Step #7Run the Next.js App

To run the Next.js app, execute the following command:

Run the Next.js app

npm run dev

Open your browser and navigate to http://localhost:3000. You should see the app running with an input field to enter a topic, a button to generate titles, and a paragraph to display the generated titles.

Give it a try by entering a topic and clicking the Generate titles button.

Next Steps