1. Download Visual Studio Code

Your code editor for both frontend and backend development.

2. Install Node.js

You’ll need Node.js and npm for the backend server.

3. Use Google’s AI Studio

Access and manage your Gemini API key here.

4. Prompt

You are an expert AI development assistant. Your task is to create a complete, step-by-step guide to build and deploy a fully functional AI-powered question-solving website.
The guide must be based on the following specific requirements and must also include instructions for troubleshooting common issues that arise during the process.

Project Requirements:
Technology Stack:
Frontend: A single index.html file containing all HTML, CSS (for a modern, clean, mobile-friendly UI), and vanilla JavaScript.
Backend: Node.js with the Express framework.
AI: Google Gemini API (@google/generative-ai library).
Deployment: Serverless deployment on Vercel, integrated with GitHub.

Project Structure: The project must be organized into two main folders:
frontend/ containing index.html.
backend/ containing index.js, .env (for the API key), and vercel.json (for Vercel configuration).

Security Principle: The Google Gemini API key must be kept secure. It should never be exposed in the frontend code. All API calls must be proxied through the backend.

The Guide Must Provide the Following, in Order:
Part 1: Code Implementation
Provide the complete, final source code for each of the following files. The code should be ready for both local testing and final deployment.
frontend/index.html: The complete file with HTML structure, CSS for a modern chat interface, and JavaScript for handling user input and fetching responses from the backend's /api/ask endpoint.

backend/index.js: The full Node.js Express server code. It must include:
The express and @google/generative-ai libraries.
The cors library to handle local development issues.
An app.listen() block so the server can be run locally for testing.
The module.exports = app; line so it can be deployed as a serverless function on Vercel.
A single /api/ask POST endpoint that receives a question, calls the Gemini API, and returns the answer.

backend/vercel.json: The correct JSON configuration to tell Vercel how to build the Node.js server and route requests from /api/* to the index.js function.

backend/.env: The structure and an example of the environment variable file for storing the API key.

.gitignore: A complete .gitignore file for the project root to exclude node_modules and .env files from Git.

Part 2: Local Testing Instructions
Provide a clear, step-by-step guide on how to test the entire application on a local machine. This section must explain:
How to install backend dependencies (npm install express @google/generative-ai dotenv cors).
How to run the backend server (node index.js).
How to serve the frontend using the "Live Server" extension in VS Code.
Crucially, explain that for local testing, the fetch URL in frontend/index.html must be temporarily changed to the full local backend address (e.g., http://localhost:3000/api/ask) and that this change must be reverted before final deployment.

Part 3: Deployment and Troubleshooting
Provide a complete guide for deploying the application to the public internet. This must include:
Instructions on how to push the project to a new GitHub repository.
Instructions on how to import and deploy the project on Vercel.

Troubleshooting for the 404: NOT_FOUND Error: This is a critical step. You must:
Describe the common problem where the deployed Vercel URL shows a 404: NOT_FOUND error.
Explain the cause: that this happens if the "Root Directory" in Vercel's project settings is incorrectly set to backend.
Provide the solution: Instruct the user to go to their Vercel project settings, find the "Root Directory" option, clear the field so it is empty, save the changes, and redeploy. Explain that this allows Vercel to correctly identify the frontend folder for the UI and the backend folder for the API.

Instructions on how to set the GEMINI_API_KEY as a secure environment variable in the Vercel project settings.
Your entire response should be a single, cohesive guide that a user can follow from start to finish to successfully build and launch the application.
    

Click the button below to copy the full prompt 👇

5. GitHub

Host your project for version control and Vercel integration.

6. Vercel

Launch your site live in seconds using serverless deployment.

7. Monetize with Adsterra

Earn by showing ads on your site. Sign up using my referral link: