Create a Movie Suggestion Bot-JS Tutorial-php.cn

Create a Movie Suggestion Bot

Barbara Streisand

Release： 2024-10-13 16:27:30

Original

326 people have browsed it

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

Copy after login

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

Copy after login

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);
};

Copy after login

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 [];
    }
}

Copy after login

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

Copy after login

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";

Copy after login

Define the Movie Type

Next, define the Movie type:

type Movie = {
  Title: string;
  Year: string;
  imdbID: string;
  Poster: string;
};

Copy after login

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>

Copy after login

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

The above is the detailed content of Create a Movie Suggestion Bot. For more information, please follow other related articles on the PHP Chinese website!