电影建议机器人教程

本教程将指导您设置一个电影推荐机器人，该机器人使用自然语言来检测您的心情和类型偏好，从而相应地推荐电影。

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：

欢呼！ ？电影建议机器人已完成。

如果您喜欢该项目，请通过为存储库加注星标来表示对该项目的支持。

⭐ 明星电影推荐机器人

您还可以在 Copilotkit 的 X 手柄上关注 Copilotkit，并为他们的代码库加注星标。

⭐ 明星副驾驶套件

？关注副驾驶套件