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.
- Create a new file
actions.ts
in theapp
directory of your Next.js app. - Write a function called
runAiTitleGeneratorAgent
that uses Langbase SDK Pipe to generate titles. - Give user prompt
Generate 5 titles
to generate 5 titles. - Pass the
topic
variable to therunAiTitleGeneratorAgent
function to update{{topic}}
variable in system prompt insideAI 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:
- Open the
app/page.tsx
file - Import the
useState
fromreact
andrunAiTitleGeneratorAgent
function from theactions.ts
file. - 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. - Use the
useState
hook to manage the state of the topic, completion, and loading. - 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
- Build something cool with Langbase APIs and SDK.
- Join our Discord community for feedback, requests, and support.