📋 Prerequisite: This guide assumes you have a Next.js website deployed on Vercel. If you don't have one yet, start with Your Website in an Afternoon — you can be back here in under an hour.
Before you ask your AI IDE to build anything, it helps to understand what you're asking for. Every AI feature has three parts:
What's an AI IDE? An IDE (Integrated Development Environment) is the app where you write and edit code. An AI IDE is one that has AI built in to help you. Popular options include Claude Code, Cursor, and Windsurf. You describe what you want in plain English, and the AI writes the code for you.
- Your Context — A file that tells the AI everything about you: your background, skills, achievements. Without this, the AI is just making things up.
- An API Route — Server-side code that receives questions, adds your context, and talks to the AI. This keeps your API keys secure.
- A UI Component — The chat bubble or form that visitors actually see and interact with.
The good news: You don't need to understand how any of this works technically. You just need to know what to ask your AI IDE for.
What You'll Tell Your AI IDE
"I want a chat widget on my candidate page that answers questions about my background. It should use OpenRouter with Gemini Flash for cost efficiency."
Your AI IDE will figure out the three components and build them for you. This guide teaches you what to ask for and how to verify it works.