🔧 Create a Movie Suggestion Bot
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
Movie Suggestion Bot Tutorial
This tutorial will guide you through setting up a movie suggestion bot that uses natural language to detect your mood and genre preferences to suggest movies accordingly.
1. Set Up a Next.js Project
You can set up a Next.js project and then add Shadcn on top of that, or you can use the command:
npx shadcn@latest init
This will initialize both the Next.js project and Shadcn. 😉
2. Set Up CopilotKit
Use the following commands to install the required packages:
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
npm install groq-sdk
Next, add the /api/copilotkit backend endpoint with the following code:
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. Add a Server Action
To complete the backend setup, we just need to add one server action. Create the following file:
// 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. Build the Frontend
With the backend ready, we now need to build the frontend for this app.
Add Shadcn Components
Run the following command to add necessary components:
npx shadcn@latest add card badge
Also, add the spinner component.
Update the Page Component
Now, in src/app/page.tsx, import the necessary components and hooks:
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";
Define the Movie Type
Next, define the Movie type:
type Movie = {
Title: string;
Year: string;
imdbID: string;
Poster: string;
};
Implement the Page Component
Use the useCopilotAction hook to enable AI to fetch movies and display them to the user. Return the following 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>
Hurray! 🎉 The Movie Suggestion Bot is complete.
If you liked the project, show some support to the project by starring the repository.
Also you can follow Copilotkit on their X handle and star their repo as well.
...
🔧 Create a Movie Suggestion Bot
📈 45.54 Punkte
🔧 Programmierung
🔧 Python Project: Movie Suggestion System
📈 29.8 Punkte
🔧 Programmierung
🔧 Vote Bot: Create a Voting Bot Without Coding
📈 25.25 Punkte
🔧 Programmierung
🔧 Movie Database - find the perfect movie
📈 22.03 Punkte
🔧 Programmierung
📰 Movie Box Pro APK – Download Latest Movie App
📈 22.03 Punkte
Web Tipps