Créer un robot de suggestion de films

Tutoriel du robot de suggestion de films

Ce didacticiel vous guidera dans la configuration d'un robot de suggestion de films qui utilise le langage naturel pour détecter votre humeur et vos préférences de genre afin de suggérer des films en conséquence.

1. Configurer un projet Next.js

Vous pouvez configurer un projet Next.js puis ajouter Shadcn par-dessus, ou vous pouvez utiliser la commande :

npx shadcn@latest init

Cela initialisera à la fois le projet Next.js et Shadcn. ?

2. Configurer CopilotKit

Utilisez les commandes suivantes pour installer les packages requis :

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
npm install groq-sdk

Ensuite, ajoutez le point de terminaison backend /api/copilotkit avec le code suivant :

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

3. Ajouter une action serveur

Pour terminer la configuration du backend, il nous suffit d'ajouter une action serveur. Créez le fichier suivant :

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

4. Construisez le front-end

Le backend étant prêt, nous devons maintenant créer le frontend pour cette application.

Ajouter des composants Shadcn

Exécutez la commande suivante pour ajouter les composants nécessaires :

npx shadcn@latest add card badge

Ajoutez également le composant spinner.

Mettre à jour le composant de page

Maintenant, dans src/app/page.tsx, importez les composants et hooks nécessaires :

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

Définir le type de film

Ensuite, définissez le type de film :

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

Implémenter le composant de page

Utilisez le hook useCopilotAction pour permettre à l'IA de récupérer des films et de les afficher à l'utilisateur. Renvoyez le JSX suivant :

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

Hourra ! ? Le robot de suggestion de films est terminé.

Si vous avez aimé le projet, montrez votre soutien au projet en mettant en vedette le référentiel.

⭐ Bot de suggestion de film Star

Vous pouvez également suivre Copilotkit sur leur identifiant X et mettre également en vedette leur dépôt.

⭐ Kit Copilote Étoile

? Suivre Copilotkit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!