DEV Community

K Om Senapati
K Om Senapati

Posted on

Create a Movie Suggestion Bot

Movie Suggestion Bot Tutorial

This tutorial will guide you through setting up a movie suggestion bot that uses natural language to detect your mood and genre preferences to suggest movies accordingly.

1. Set Up a Next.js Project

You can set up a Next.js project and then add Shadcn on top of that, or you can use the command:

npx shadcn@latest init
Enter fullscreen mode Exit fullscreen mode

This will initialize both the Next.js project and Shadcn. πŸ˜‰

2. Set Up CopilotKit

Use the following commands to install the required packages:

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
npm install groq-sdk
Enter fullscreen mode Exit fullscreen mode

Next, add the /api/copilotkit backend endpoint with the following code:

import {
    CopilotRuntime,
    GroqAdapter,
    copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import Groq from "groq-sdk";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const groq = new Groq({ apiKey: process.env.GROQ_API_KEY }) as any;

const copilotKit = new CopilotRuntime();

const serviceAdapter = new GroqAdapter({ groq, model: "llama3-groq-8b-8192-tool-use-preview" });

export const POST = async (req: NextRequest) => {
    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
        runtime: copilotKit,
        serviceAdapter,
        endpoint: "/api/copilotkit",
    });

    return handleRequest(req);
};
Enter fullscreen mode Exit fullscreen mode

3. Add a Server Action

To complete the backend setup, we just need to add one server action. Create the following file:

// src/actions/movies.ts
"use server"

export async function fetchMovies({ query }: { query: string }) {
    const API_KEY = process.env.OMDB_API_KEY;
    const URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=${encodeURIComponent(
        query
    )}`;

    try {
        const response = await fetch(URL);
        const result = await response.json();

        if (result && result.Search) {
            return result.Search;
        } else {
            return [];
        }
    } catch (error) {
        console.error("Error fetching movies:", error);
        return [];
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Build the Frontend

With the backend ready, we now need to build the frontend for this app.

Add Shadcn Components

Run the following command to add necessary components:

npx shadcn@latest add card badge
Enter fullscreen mode Exit fullscreen mode

Also, add the spinner component.

Update the Page Component

Now, in src/app/page.tsx, import the necessary components and hooks:

import { fetchMovies } from "@/actions/movies";
import { Spinner } from "@/components/ui-expansions/spinner";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { useCopilotAction } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import { Film } from "lucide-react";
import Link from "next/link";
Enter fullscreen mode Exit fullscreen mode

Define the Movie Type

Next, define the Movie type:

type Movie = {
  Title: string;
  Year: string;
  imdbID: string;
  Poster: string;
};
Enter fullscreen mode Exit fullscreen mode

Implement the Page Component

Use the useCopilotAction hook to enable AI to fetch movies and display them to the user. Return the following JSX:

<div className="w-full h-screen">
      <CopilotChat
        className="w-full h-full"
        labels={{
          title: "Movie Suggestion Bot",
          initial: "Hello! πŸ‘‹ What type of movie are you in the mood for?",
        }}
        instructions="No need to provide movie names unless no results are found. If the API returns movies, only those will be shown."
      />
</div>
Enter fullscreen mode Exit fullscreen mode

Hurray! πŸŽ‰ The Movie Suggestion Bot is complete.

If you liked the project, show some support to the project by starring the repository.

⭐ Star movie-suggestion-bot

Also you can follow Copilotkit on their X handle and star their repo as well.

⭐ Star Copilotkit

🀝 Follow Copilotkit

Top comments (4)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Whoa! Great work.

Collapse
 
niharikaa profile image
Niharika Goulikar

Nice article!

Collapse
 
dfordp profile image
Dilpreet Grover

Damn!

Collapse
 
rohan_sharma profile image
Rohan Sharma

Cool!