Welcome! This is a Next.js application that uses AI to help you manage and generate code for your software projects. This guide will walk you through setting up and running the project on your computer, with special attention for those new to a MacBook Pro.
Before you begin, you'll need to install a few essential tools.
Homebrew is a package manager for macOS that makes it easy to install software. If you don't have it, open your Terminal and paste this command:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"This project requires Node.js (version 20 or newer). Node.js comes with npm (Node Package Manager), which we'll use to install the project's dependencies.
You can install Node.js using Homebrew:
brew install nodeTo verify the installation, run these commands in your Terminal:
node -v # Should show v20.x.x or higher
npm -v # Should show a version numberWe recommend using Visual Studio Code, a popular and free code editor.
Follow these steps to get the application running on your local machine.
This project uses Google Firebase for its database (Firestore) and AI capabilities.
- Go to the Firebase Console.
- Click "Add project" and follow the on-screen instructions to create a new Firebase project.
- Once your project is created, go to the Project Overview page. Click the Web icon (
</>) to add a web app to your project. - Give your app a nickname and click "Register app".
- You will be shown your Firebase configuration credentials. Copy these credentials. You'll need them in the next step.
- In your new project, navigate to the Firestore Database section in the left-hand menu.
- Click "Create database".
- Choose to start in "Production mode".
- Select a Firestore location (choose one close to you) and click "Enable".
The application needs your Firebase and Google AI API keys to work.
-
Create an environment file: In the project's root directory, create a new file named
.env. -
Get your Google AI API Key: Visit Google AI Studio to get your API key.
-
Add your keys to
.env: Open the.envfile and paste the following content. Replace the placeholder values with your actual credentials from Step 1 and 2.# Google AI API Key GOOGLE_API_KEY=YOUR_GOOGLE_AI_API_KEY_HERE # Firebase Web App Configuration NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=YOUR_FIREBASE_MEASUREMENT_ID
This file is kept private and should not be shared or committed to version control.
Now, we'll install all the necessary libraries and packages the project depends on. These are listed in the package.json file. Open your terminal in the project directory and run:
npm installThis might take a few minutes as it downloads all the required packages into a node_modules folder.
This project runs as two separate services that need to run at the same time:
- The Next.js frontend: This is the web interface you'll interact with.
- The Genkit AI backend: This handles all the communication with the AI models.
You'll need to open two separate Terminal windows or tabs to run them.
In your first terminal window (already in the project directory), run:
npm run devYou'll see a message like ✓ Ready in .... This means your web application is running. You can view it by opening your web browser and going to http://localhost:9002.
Open a new terminal window or tab. Make sure you are in the same project directory. Then, run:
npm run genkit:devThis starts the AI service that the frontend will call. It's now ready to process requests.
Congratulations! Your development environment is now fully set up. You can start using the application in your browser.
Here are some of the most common commands you'll use:
npm run dev: Starts the Next.js frontend development server.npm run genkit:dev: Starts the Genkit AI development server.npm run build: Creates a production-ready version of the Next.js application.npm run start: Starts the production version of the application (you must runnpm run buildfirst).npm run lint: Checks the code for any style or syntax errors.