Erstellen Sie einen Filmvorschlags-Bot-js-Tutorial-php.cn

Erstellen Sie einen Filmvorschlags-Bot

Barbara Streisand

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

Original

381 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Define the Movie Type

Next, define the Movie type:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Filmvorschlags-Bot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!