मूवी सुझाव बॉट ट्यूटोरियल

यह ट्यूटोरियल आपको एक मूवी सुझाव बॉट स्थापित करने में मार्गदर्शन करेगा जो आपके मूड और शैली प्राथमिकताओं का पता लगाने के लिए प्राकृतिक भाषा का उपयोग करता है और तदनुसार फिल्में सुझाता है।

1. Next.js प्रोजेक्ट सेट करें

आप एक Next.js प्रोजेक्ट सेट कर सकते हैं और फिर उसके ऊपर Shadcn जोड़ सकते हैं, या आप कमांड का उपयोग कर सकते हैं:

npx shadcn@latest init

यह Next.js प्रोजेक्ट और Shadcn दोनों को आरंभ करेगा। ?

2. कोपिलॉटकिट सेट करें

आवश्यक पैकेज स्थापित करने के लिए निम्नलिखित कमांड का उपयोग करें:

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. फ्रंटएंड बनाएं

बैकएंड तैयार होने के साथ, अब हमें इस ऐप के लिए फ्रंटएंड बनाने की जरूरत है।

शेडकन घटक जोड़ें

आवश्यक घटकों को जोड़ने के लिए निम्नलिखित कमांड चलाएँ:

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

पेज घटक लागू करें

फिल्में लाने और उन्हें उपयोगकर्ता को प्रदर्शित करने के लिए एआई को सक्षम करने के लिए यूज़कोपायलटएक्शन हुक का उपयोग करें। निम्नलिखित JSX लौटाएँ:

हुर्रे! ? मूवी सुझाव बॉट पूरा हो गया है।

यदि आपको प्रोजेक्ट पसंद आया, तो रिपॉजिटरी को अभिनीत करके प्रोजेक्ट को कुछ समर्थन दिखाएं।

⭐ स्टार मूवी-सुझाव-बॉट

इसके अलावा आप कोपिलॉटकिट को उनके एक्स हैंडल पर फॉलो कर सकते हैं और उनके रेपो को भी स्टार कर सकते हैं।

⭐ स्टार कोपिलॉटकिट

? कोपिलॉटकिट का पालन करें