영화 추천 봇 튜토리얼

이 튜토리얼은 자연어를 사용하여 기분과 장르 선호도를 감지하여 그에 따라 영화를 추천하는 영화 추천 봇을 설정하는 과정을 안내합니다.

1. Next.js 프로젝트 설정

Next.js 프로젝트를 설정한 다음 그 위에 Shadcn을 추가하거나 다음 명령을 사용할 수 있습니다.

npx shadcn@latest init

이렇게 하면 Next.js 프로젝트와 Shadcn이 모두 초기화됩니다. ?

2. CopilotKit 설정

필요한 패키지를 설치하려면 다음 명령을 사용하십시오.

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

다음으로 다음 코드를 사용하여 /api/copilotkit 백엔드 엔드포인트를 추가합니다.

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. 서버 작업 추가

백엔드 설정을 완료하려면 서버 작업 하나만 추가하면 됩니다. 다음 파일을 생성합니다:

// 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. 프런트엔드 구축

백엔드가 준비되었으므로 이제 이 앱의 프런트엔드를 구축해야 합니다.

Shadcn 구성 요소 추가

다음 명령을 실행하여 필요한 구성 요소를 추가하세요.

npx shadcn@latest add card badge

또한 스피너 구성요소를 추가합니다.

페이지 구성 요소 업데이트

이제 src/app/page.tsx에서 필요한 구성 요소와 후크를 가져옵니다.

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

영화 유형 정의

다음으로 영화 유형을 정의합니다.

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

페이지 구성 요소 구현

useCopilotAction 후크를 사용하면 AI가 영화를 가져와 사용자에게 표시할 수 있습니다. 다음 JSX를 반환합니다:

만세! ? 영화 추천봇이 완성되었습니다.

프로젝트가 마음에 들었다면 저장소에 별표를 표시하여 프로젝트에 대한 지지를 보여주세요.

⭐ 스타영화 추천봇

또한 X 핸들에서 Copilotkit을 팔로우하고 저장소에 별표를 표시할 수도 있습니다.

⭐ 스타 코파일럿킷

? Copilotkit 팔로우