NextJS Starter Template

A simple NextJS starter template that uses the app router with Next 14.

It shows how to create chat sessions for users, display, them, and create an AI chatting interface with agents with streaming.

​

Prerequisite

You need to have an account in Scoopika and an AI agent ready to be used. See the quickstart to get started.

Having a remote history store is recommended but not required at all.

​

Getting Started

​

1. Clone repository

First, clone the GitHub repository to your local machine:

git clone https://github.com/Scoopika/nextjs-starter-1

​

2. Setup environment

Install all dependencies using your preferred package manager:

npm install
# or
yarn install
# or
pnpm install

Then, rename the file .env.example to .env and fill in the variables:

• SCOOPIKA_TOKEN: Your Scoopika token. Navigate to the platform and click on the settings icon to generate a token.
• STORE_ID: Optional. If you have a remote history store for long-term persistent memory, input the ID of the store here. Otherwise, keep it set to "memory".

Enter your agent ID in src/utils/scoopika.ts and src/components/chat.tsx:

// replace with your own Agent ID
const agent = new Agent("AGENT_ID", ...);

​

3. Run dev server

Now you can run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

​

Structure

The project uses the NextJS app router. You can find the Scoopika setup for both server-side and client-side under the src/utils directory. The Scoopika API endpoint is found in src/app/api/scoopika/route.ts.

The components for sessions and chat are located in the src/components directory. This project follows a simple structure similar to any basic app that uses NextJS.

​

Development

The only step you need to do before this app becomes ready to be published to users is to add your authentication logic to manage user sessions.

When it comes to your project, this is optional based on your use case, if you want users to have multiple chat sessions and display them (like ChatGPT) then it’s required, otherwise it’s not.

You’ll find a function called getUser where you can add your authentication logic. Scoopika doesn’t care what frameowrk or authentication provider you use, just give it a user ID in the session creation and that’s it.

Note that this template is a basic example of what you can do with Scoopika. It was created in about 20 minutes and is not meant for direct deployment to users, but rather to show you how easy it is to integrate Scoopika into your NextJS application.