FilmFinder

Stop scrolling through Netflix. Ask an AI and get actual movie cards with posters, ratings, and IMDb links. Built with Vercel AI SDK.

Demo

What this is

A quick experiment with Vercel AI SDK's generative UI. Ask for a movie, get a card instead of text. Has posters, ratings, genres, IMDb links. That's about it.

Quick Start

git clone <this-repo>
cd filmfinder
npm install

Create .env.local:

OPENROUTER_API_KEY=sk_or_v1_xxxxx  # Free at openrouter.ai
OMDB_API_KEY=xxxxx                 # Optional - for real posters

Run it:

npm run dev

Open localhost:3000 and start asking for movies.

API Keys

OpenRouter (required) - Get yours here. Free tier included.

OMDB (optional) - Request here. Without this, you get AI-generated poster URLs. With it, you get real movie data from IMDb.

How it works

Uses Vercel AI SDK's tool calling. When you ask for a movie, the LLM calls recommendMovie with structured data (title, year, rating, poster URL). The frontend renders a <MovieCard> component instead of text.

// app/api/chat/route.ts
tools: {
  recommendMovie: tool({
    parameters: z.object({
      title: z.string(),
      year: z.number(),
      rating: z.number(),
      posterUrl: z.string().url(),
      // ...
    }),
    execute: async (params) => params,
  }),
}

The rest is just UI polish.

Built with

• Next.js 16 (App Router + Turbopack)
• Vercel AI SDK 5.0
• OpenRouter (free LLM access)
• shadcn/ui + Tailwind
• TypeScript

Customizing

Change the AI model - Edit app/api/chat/route.ts line 16. Free options:

• mistralai/mistral-small-3.2-24b-instruct:free (default)
• deepseek/deepseek-r1-0528:free
• qwen/qwen3-coder:free

Browse all free models

Edit starter prompts - components/chat/suggestions-grid.tsx:

const mainSuggestions = [
  {
    emoji: "🎬",
    title: "Your prompt",
    description: "What it does",
    prompt: "Actual message sent to AI",
  },
];

Deployment

Push to GitHub, import on Vercel, add your API keys, deploy. Done.

For other platforms: Next.js deployment docs

Troubleshooting

• Port 3000 in use: Next.js auto-switches to 3001
• API keys not working: Check .env.local is in project root, restart dev server
• Build fails: rm -rf .next && npm run build

Community

Discord - Ask questions, share what you built, hang out.

Contributing

PRs welcome. Bug fixes: just send it. Features: open an issue first.

License

MIT