Next.js

This guide walks you through integrating Scoopika into your Next.js application, enabling you to leverage intelligent agents within your web components.

​

Initialize

Create a file named scoopika.ts inside your lib directory (or adjust the path based on your project structure). This file will house the Scoopika initialization code.

import { Scoopika, Endpoint, Agent } from "@scoopika/scoopika";

const scoopika = new Scoopika({...}); // Replace with your Scoopika config

// Minimal setup
const scoopikaEndpoint = new Endpoint({
	scoopika,
	agents: ["AGENT_ID-1"]
});

// or Advanced setup (optional to add tools to agents)
const scoopikaEndpoint = new Endpoint({
	scoopika,
	agents: async (scoopika: Scoopika) => {
		const agent = new Agent("AGENT_ID", scoopika);

		// Do anything you want here, like adding tools to agents
		agent.addTool(...);

		return [agent]; // Return array of agents
	}
});

// Export the endpoint
export default scoopikaEndpoint;

​

Add API Route

Next, add an API route to your Next.js project that handles everything related to Scoopika. If using the Pages API, put the route under pages/api/scoopika.ts. If using the App Router, place it under app/api/scoopika/route.ts. Here are examples for both setups:

​

Use Scoopika

You can now use the Scoopika client library to run Scoopika in your Next.js application. This works in both server and client components.

import { Client, Agent } from "@scoopika/scoopika";

const client = new Client("/api/scoopika");
const agent = new Agent("AGENT_ID", client);

const response = await agent.run({
	inputs: { message: "Hello!" },
	hooks: { // real-time hooks supported
		onToken: (t) => console.log(t)
	}
});

​

Scoopika React library

We provide @scoopika/react for easily building interactive AI-powered UI interfaces for both text-based and voice-based interactions with AI agents.

It provides building blocks along with built-in state management and hooks.

Check the full docs for React here.