Installation & Setup
Relevant source files
The following files were used as context for generating this wiki page:
This guide provides the necessary steps to install and configure the Bridge AI platform. The project is split into a backend service (Node.js/Express) and a frontend application (React/Vite), requiring specific environment configurations for AI services and external APIs.
Sources: BACKEND/package.json, frontend/front/package.json
Project Architecture
The application follows a client-server architecture. The frontend is built using React and Vite, while the backend utilizes Express.js to provide RESTful endpoints and integrate with third-party AI and data services like OpenAI, Google Generative AI, and Product Hunt.
This diagram illustrates the flow of data from the React frontend through the Express backend to various external AI and data providers.
Sources: BACKEND/src/app.js:13-33, frontend/front/src/Article/article.jsx:100-110, BACKEND/src/routes/articles.routes.js:8-12
Prerequisites and Dependencies
Backend Dependencies
The backend requires Node.js and manages several critical packages for AI integration and security.
| Dependency | Purpose |
|---|---|
express | Web framework for routing and middleware. |
@langchain/groq | Integration for Llama3 models via Groq. |
openai | Interface for GPT-4 summarization features. |
mongoose | MongoDB object modeling for data persistence. |
dotenv | Management of environment variables. |
cors | Cross-Origin Resource Sharing configuration. |
Sources: BACKEND/package.json:18-37, BACKEND/src/routes/articles.routes.js:1-5
Frontend Dependencies
The frontend is a modern React application leveraging Vite for high-performance development.
| Dependency | Purpose |
|---|---|
react | UI library for component-based architecture. |
vite | Next-generation frontend tooling and bundler. |
axios | Promise-based HTTP client for API requests. |
react-router-dom | Declarative routing for the SPA. |
framer-motion | Animation library for UI transitions. |
Sources: frontend/front/package.json:13-20, frontend/front/README.md:1-5
Backend Setup
1. Installation
Navigate to the BACKEND directory and install the required modules:
npm install
Sources: BACKEND/package.json
2. Configuration
Create a .env file in the BACKEND root directory. The following environment variables are required for full functionality:
OPENAI_API_KEY: Required for article summarization.NEWS_API_KEY: Required for fetching global news.GROQ_API_KEY: Required for the AI Networking Assistant.PRODUCT_HUNT_API_KEY: Required for fetching Product Hunt data.
Sources: BACKEND/src/routes/articles.routes.js:9-10, BACKEND/src/routes/producthunt.routes.js:9, BACKEND/src/app.js:6
3. Execution
The backend uses nodemon for development with experimental JSON module support.
npm run dev
Sources: BACKEND/package.json:7-9
Frontend Setup
1. Installation
Navigate to the frontend/front directory and install dependencies:
npm install
Sources: frontend/front/package.json
2. Execution
Start the Vite development server:
npm run dev
The application will be available at the local address provided by Vite (typically http://localhost:5173). The frontend is configured to communicate with the backend at http://localhost:8000.
Sources: frontend/front/package.json:6, frontend/front/src/Article/article.jsx:101
API Endpoint Reference
The backend exposes several versioned API endpoints for the frontend to consume.
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/v1/articles | Fetches and summarizes news based on a query. |
| POST | /api/v1/chatbot/query | Processes networking assistant queries. |
| GET | /api/v1/products | Retrieves top posts from Product Hunt. |
| POST | /api/v1/users/signup | Registers a new user account. |
Sources: BACKEND/src/app.js:28-33, BACKEND/src/routes/articles.routes.js:32, BACKEND/src/routes/producthunt.routes.js:52
Summary
The installation of Bridge AI requires setting up two separate environments. The backend serves as a proxy and processing layer for multiple AI models and external data sources, requiring valid API keys for OpenAI, Groq, and NewsAPI. The frontend is a standard Vite-React setup that interfaces with the backend to provide a dynamic user experience.