Учебное пособие по боту для предложений фильмов

Это руководство поможет вам настроить бота, предлагающего фильмы, который использует естественный язык, чтобы определить ваше настроение и жанровые предпочтения и соответствующим образом предлагать фильмы.

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, чтобы позволить ИИ получать фильмы и отображать их пользователю. Верните следующий JSX:

Ура! ? Бот для предложений фильмов готов.

Если вам понравился проект, поддержите его, отметив репозиторий звездочкой.

⭐ Звездный бот-предложение фильмов

Также вы можете подписаться на Copilotkit по их дескриптору X и отметить их репозиторий.

⭐ Звездный копилоткит

? Следуйте за Copilotkit