AI Chatbot System

Relevant source files

The following files were used as context for generating this wiki page:

• BACKEND/src/controllers/chatbot.controller.js
• BACKEND/src/app.js
• frontend/front/src/chatbot/chatbot.jsx
• BACKEND/src/models/Chat.model.js
• frontend/front/src/App.jsx
• BACKEND/package.json

The AI Chatbot System, referred to as "Bridge AI," is a specialized networking assistant designed to facilitate professional interactions. It enables users to find professionals, summarize expertise, generate outreach messages, and suggest engagement strategies through a conversational interface.

The system utilizes a modern full-stack architecture with a React-based frontend and a Node.js/Express backend. It leverages the Groq Cloud platform and LangChain framework to process natural language queries using the llama3-8b-8192 model. Beyond standard chat capabilities, the system programmatically extracts professional names from AI responses to generate direct links to social media profiles such as LinkedIn and Twitter.

Sources: BACKEND/src/controllers/chatbot.controller.js:98-101, frontend/front/src/chatbot/chatbot.jsx:194, BACKEND/package.json:28-32

System Architecture

The AI Chatbot follows a request-response cycle where the frontend communicates with a dedicated API endpoint. The backend acts as an orchestration layer, transforming user input into formatted prompts for the Large Language Model (LLM).

High-Level Data Flow

The following diagram illustrates the flow of a message from the user interface through the AI processing logic and back to the display.

This diagram shows the end-to-end communication path between the React frontend and the LLM-powered backend.
Sources: frontend/front/src/chatbot/chatbot.jsx:136-150, BACKEND/src/controllers/chatbot.controller.js:125-155

Backend Implementation

The backend is built using Express and utilizes ChatGroq from the @langchain/groq package to interface with the AI model.

AI Processing Logic

The core logic resides in processQuery, which handles the following steps:

1. Validation: Ensures the userQuery is present in the request body.
2. Prompt Engineering: Uses ChatPromptTemplate to combine a systemInstruction with the human query. The system instruction defines the persona as an "AI networking assistant."
3. Model Invocation: Sends the formatted messages to the Groq API.
4. Post-Processing: Uses regex to extract professional names from the AI's response and generates social media profile links using a helper function.

Sources: BACKEND/src/controllers/chatbot.controller.js:108-112, BACKEND/src/controllers/chatbot.controller.js:145-152

API Endpoints

The system exposes a primary endpoint for interaction:

Method	Endpoint	Description	Payload
POST	/api/v1/chatbot/query	Processes a user message and returns AI text and profile links.	{ "userQuery": "string" }

Sources: BACKEND/src/app.js:41, frontend/front/src/chatbot/chatbot.jsx:144

Data Models

While the current interaction is primarily ephemeral, the system includes a Mongoose schema for chat persistence.

Field	Type	Description
user	ObjectId	Reference to the User model.
createdAt	Date	Timestamp of message creation (default: Date.now).

Sources: BACKEND/src/models/Chat.model.js:4-7

Frontend Implementation

The frontend is a React functional component (ChatbotPage) that manages chat history, loading states, and a typewriter-style response display.

Component Logic and State

The component uses several React hooks to manage the interactive experience:

• Typing Effect: A useEffect hook triggers when a botResponse is received, iterating through characters with a setInterval to simulate real-time typing.
• Profile Discovery: If the backend returns a list of profiles, these are rendered as interactive cards with LinkedIn and Twitter links.
• Navigation: The interface includes a sidebar for navigating to "Showcase" or "Help" and a profile dropdown for account settings.

The sequence diagram demonstrates the asynchronous handling of the user query and the subsequent simulation of the bot's response.
Sources: frontend/front/src/chatbot/chatbot.jsx:136-180, frontend/front/src/chatbot/chatbot.jsx:251-267

Navigation and Routing

The application uses react-router-dom to integrate the chatbot into the broader platform.

// From frontend/front/src/App.jsx
<Route path="/chatbotpage" element={<ChatbotPage/>}/>
<Route path="/dashboard" element={<Dashboard/>}/>
<Route path="/articles" element={<ArticlesPage/>}/>

Sources: frontend/front/src/App.jsx:21-31

Technical Configuration

The system requires specific environment variables and dependencies to function.

Key Dependencies

• @langchain/groq: Integration with Groq's high-speed inference engine.
• @langchain/core: Foundational structures for prompts and message formatting.
• express: Web framework for the backend.
• react-router-dom: Client-side routing for the frontend.

Sources: BACKEND/package.json:23-32, frontend/front/package.json:18-21

AI Model Details

• Provider: Groq Cloud
• Model ID: llama3-8b-8192
• System Role: Networking Assistant
• Output Format: Text with regex-based entity extraction for social profiles.

Sources: BACKEND/src/controllers/chatbot.controller.js:93-104

Summary

The AI Chatbot System provides a specialized networking tool within the Bridge AI platform. By combining the Llama-3 model with programmatic link generation, it moves beyond simple conversation to offer actionable professional networking data. The architecture ensures a responsive user experience through typewriter-effect rendering and structured API responses.