ホームページ > ウェブフロントエンド > jsチュートリアル > 映画の提案ボットを作成する

映画の提案ボットを作成する

Barbara Streisand
リリース: 2024-10-13 16:27:30
オリジナル
380 人が閲覧しました

Create a Movie Suggestion Bot

映画提案ボットのチュートリアル

このチュートリアルでは、自然言語を使用してユーザーの気分やジャンルの好みを検出し、それに応じて映画を提案する映画提案ボットのセットアップについて説明します。

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. サーバーアクションの追加

バックエンドのセットアップを完了するには、サーバー アクションを 1 つ追加するだけです。次のファイルを作成します:

// 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 を返します:

<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>
ログイン後にコピー

万歳! ?映画おすすめボットが完成しました。

プロジェクトが気に入った場合は、リポジトリにスターを付けることでプロジェクトへのサポートを示してください。

⭐ スター映画の提案ボット

X ハンドルで Copilotkit をフォローし、リポジトリにスターを付けることもできます。

⭐ スター・コパイロットキット

?コパイロットキットをフォローする

以上が映画の提案ボットを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート