Integrations: Configure Pipe API in Next.js

Let's integrate Pipe into a Next.js app.

In this integration guide, you will:

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

Step #1Create a Pipe

Create a new Pipe on Langbase.com. Let’s call it AI Title Generator. It's a generate type pipe.

To learn more about creating a Pipe, refer to the Pipe Quickstart Guide.

Step #2Setup Next.js App

To create a new Next.js app, run the following command:

npx create-next-app@latest generate-titles

Now navigate to the project directory:

cd generate-titles

Open the project in your favorite code editor. For example, to open the project in VS Code, run:

code .

Step #3Create a Server Action

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

Create a new file actions.ts in the app directory of your Next.js app.
Write a function called generateCompletion that sends a POST request to the Pipe API to generate titles.
Give user prompt Generate 10 titles to generate 10 titles.
Pass the topic variable to the generateCompletion function to update {{topic}} variable in system prompt inside AI Title Generator Pipe.

'use server';

export async function generateCompletion(topic: string) {
	const url = 'https://api.langbase.com/v1/pipes/run';
	const apiKey = '<PIPE_API_KEY>';

	const data = {
		messages: [{ role: 'user', content: 'Hello!' }],
		variables: [{ name: 'topic', value: topic }]
	};

	const response = await fetch(url, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
			Authorization: `Bearer ${apiKey}`
		},
		body: JSON.stringify(data)
	});

	const resText = await response.text();
	return resText;
}

Replace <PIPE_API_KEY> with your Pipe API key.

Step #4Call the Server Action in a Page

Now let's call the Server Action:

Open the app/page.tsx file
Import the useState from react and generateCompletion function from the actions.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 generateCompletion function when the button is clicked and display the generated titles.

'use client';

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

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

	const handleGenerateCompletion = async () => {
		setLoading(true);
		const completion = await generateCompletion(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 text-black"
					value={topic}
					onChange={e => setTopic(e.target.value)}
				/>
				<button
					className="mt-4 rounded-lg bg-blue-500 p-2 text-white"
					onClick={handleGenerateCompletion}
				>
					Generate titles
				</button>
				{loading && <p className="mt-4">Loading...</p>}
				{completion && (
					<p className="mt-4">
						<strong>Completion:</strong> {completion}
					</p>
				)}
			</div>
		</main>
	);
}

Step #5Run the Next.js App

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

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.