First, run the development server:
npm install npm run dev # or yarn dev /pnpm dev /bun dev
Open http://localhost:3000 with your browser to see the result.
Med-friend is an advanced health assistant application designed to provide users with instant access to accurate, AI-powered health information. We combine the best publicly available health knowledge, with the best AI tools able to efficiently provide that knowledge as needed. The system combines modern web technologies with artificial intelligence to create an interactive and informative experience for users seeking health-related advice.
Med-friend AI follows a modern, serverless architecture leveraging cloud services for scalability and maintainability.
graph TD
User[User] -->|HTTPS| Frontend[Next.js Frontend]
subgraph Frontend
Landing[Landing Page]
Chat[Chat Interface]
end
Frontend -->|API Calls| Routes[API Routes]
subgraph Routes
ChatProcess[Chat Processing]
UserAuth[User Auth]
VectorSearch[Vector Search]
end
ChatProcess -->|NLP Requests| LLMAPI[LLM API]
UserAuth -->|Authenticate| FireAuth[Firebase Auth]
VectorSearch -->|Query| PineconeAPI[Pinecone API]
FireAuth --> Firestore[Firebase Firestore]
PineconeAPI --> Firestore
classDef frontend fill:#d0e0ff,stroke:#333,stroke-width:2px;
classDef backend fill:#ffe0d0,stroke:#333,stroke-width:2px;
classDef external fill:#d0ffe0,stroke:#333,stroke-width:2px;
class Frontend frontend;
class Routes backend;
class LLMAPI,FireAuth,PineconeAPI,Firestore external;
src/app/page.js
)The main entry point of the application, introducing users to Med-friend AI.
Key features:
src/app/chat/page.js
)The main chat interface for logged-in users.
Key features:
src/app/components/Auth.js
)Handles user authentication processes.
Key features:
src/app/components/PopupChat.js
)A floating chat widget for quick interactions with the AI assistant.
Key features:
src/app/api/chat/route.js
)Handles chat requests and integrates with OpenAI and Pinecone.
Key features:
src/app/utils/firebase.js
)Sets up Firebase services for the application.
Key features:
The user interface is built using React components and styled with Material-UI, ensuring a responsive and accessible design across devices.
The landing page (src/app/page.js
) serves as the main entry point for users. It features:
FeatureCard
: Displays individual features of the applicationAppBar
: Navigation bar with authentication optionsModal
: For displaying the authentication formThe chat interface (src/app/chat/page.js
) is the core of the application, where users interact with the AI assistant. It includes:
ChatListContainer
: Displays the list of previous chatsChatListItem
: Individual chat session in the sidebarMainContent
: Contains the chat messages and input areaDisclaimerBox
: Informs users about the limitations of AI adviceThe popup chat (src/app/components/PopupChat.js
) provides a floating chat interface for quick interactions. Features include:
StyledPaper
: The main container for the popup chatChatHeader
: Contains the title and close buttonMessageBubble
: Displays individual messagesTypingIndicator
: Shows when the AI is generating a responseThe application uses a combination of Material-UI's built-in styling system and custom styles:
src/app/page.js
src/app/globals.css
styled
function from Material-UIThe backend of Med-friend AI is primarily serverless, utilizing Next.js API routes and cloud services.
Located in src/app/api/chat/route.js
, the main API route handles chat functionality:
Firebase provides authentication and database services:
Configuration and initialization of Firebase services are done in src/app/utils/firebase.js
.
Pinecone is used to store and retrieve medical information efficiently:
The Pinecone service is initialized and queried in the chat API route.
Med-friend AI leverages OpenAI's GPT models for generating intelligent responses to user queries.
The application uses the OpenAI API to generate responses:
The integration is handled in the chat API route (src/app/api/chat/route.js
).
To provide more accurate and relevant responses, the system:
This process enhances the AI's ability to provide informed and contextually appropriate responses.
Med-friend AI uses two database systems: Firebase Firestore and Pinecone Vector Database.
Firestore is used to store user data and chat history. The data model is as follows: users/ {userId}/ conversations/ {conversationId}/ messages/ {messageId}/ content: string createdAt: timestamp userId: string This structure allows for efficient retrieval of user-specific chat histories.
Pinecone stores medical information as vector embeddings, allowing for fast similarity search:
The Pinecone database is queried in the chat API route to retrieve context for AI responses.
Med-friend AI implements robust authentication and security measures to protect user data and ensure secure interactions.
Firebase Authentication is used to handle user signup and login processes:
The Auth component (src/app/components/Auth.js
) manages the UI for these processes.
.env.local
)Endpoint: /api/chat
Method: POST
Request Body: json { "messages": [ { "role": "user", "content": "User's message here" } ], "chatId": "optional-chat-id" }
Firebase Authentication is used, which provides RESTful endpoints for authentication operations. Refer to the Firebase Authentication REST API documentation for detailed information on these endpoints.
Med-friend AI is designed to be deployed on cloud platforms that support Next.js applications.
npm run build
Ensure the following environment variables are set:
NEXT_PUBLIC_FIREBASE_*
: Firebase configuration variablesOPENAI_API_KEY
: OpenAI API keyPINECONE_API_KEY
: Pinecone API keyPINECONE_ENVIRONMENT
: Pinecone environmentPINECONE_INDEX_NAME
: Pinecone index nameSet up a CI/CD pipeline to automate the deployment process:
npm install
.env.local
npm run dev
npm run lint
npm test
firebase.js
Potential areas for future development include:
Implement more sophisticated conversation management
Add support for file uploads (e.g., medical reports)
Enhance error handling and user feedback mechanisms
Implement a user feedback and response rating system
Develop an admin panel for monitoring conversations and fine-tuning the AI
Integrate with additional medical databases for more comprehensive information
Implement multi-language support
Add voice input/output capabilities
Implement advanced analytics
Enhance mobile experience
By continuously improving and expanding the capabilities of Med-friend AI, we aim to provide an increasingly valuable tool for users seeking health information and advice.
This is a Next.js project bootstrapped with create-next-app
.
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.