search

wildercb / csai

A full stack web application that deploys med-friend, a framework for using llms to provide safe and expert guided quick medical advice.
https://csai-alpha.vercel.app
0 stars 1 forks source link

readme

Getting Started on Local Development

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: System Documentation

Table of Contents

  1. Introduction
  2. System Architecture
  3. Key Components
  4. User Interface
  5. Backend Services
  6. AI Integration
  7. Database Design
  8. Authentication and Security
  9. API Documentation
  10. Deployment
  11. Development Workflow
  12. Troubleshooting
  13. Future Enhancements

1. Introduction

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.

Key Features:

Tech Stack:

2. System Architecture

Med-friend AI follows a modern, serverless architecture leveraging cloud services for scalability and maintainability.

High-Level Architecture Diagram

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;

Components:

  1. Next.js Frontend: Serves the user interface and handles client-side logic.
  2. API Routes: Serverless functions handling backend logic and external service integration.
  3. Multiple LLM Provider API's: Provide natural language processing capabilities.
  4. Firebase Auth: Manages user authentication.
  5. Firebase Firestore: Stores user data and chat history.
  6. Pinecone Vector DB: Stores and retrieves medical information for context-aware AI responses.

3. Key Components

3.1 Frontend Components

LandingPage (src/app/page.js)

The main entry point of the application, introducing users to Med-friend AI.

Key features:

ChatPage (src/app/chat/page.js)

The main chat interface for logged-in users.

Key features:

Auth Component (src/app/components/Auth.js)

Handles user authentication processes.

Key features:

PopupChat Component (src/app/components/PopupChat.js)

A floating chat widget for quick interactions with the AI assistant.

Key features:

3.2 Backend Components

Chat API Route (src/app/api/chat/route.js)

Handles chat requests and integrates with OpenAI and Pinecone.

Key features:

Firebase Utilities (src/app/utils/firebase.js)

Sets up Firebase services for the application.

Key features:

4. User Interface

The user interface is built using React components and styled with Material-UI, ensuring a responsive and accessible design across devices.

4.1 Landing Page

The landing page (src/app/page.js) serves as the main entry point for users. It features:

Key UI Components:

4.2 Chat Interface

The chat interface (src/app/chat/page.js) is the core of the application, where users interact with the AI assistant. It includes:

Key UI Components:

4.3 Popup Chat

The popup chat (src/app/components/PopupChat.js) provides a floating chat interface for quick interactions. Features include:

Key UI Components:

4.4 Styling

The application uses a combination of Material-UI's built-in styling system and custom styles:

5. Backend Services

The backend of Med-friend AI is primarily serverless, utilizing Next.js API routes and cloud services.

5.1 API Routes

Located in src/app/api/chat/route.js, the main API route handles chat functionality:

  1. Receives user messages
  2. Queries Pinecone for relevant medical information
  3. Sends context and user message to OpenAI
  4. Returns AI-generated response to the frontend

5.2 Firebase Services

Firebase provides authentication and database services:

Configuration and initialization of Firebase services are done in src/app/utils/firebase.js.

5.3 Pinecone Vector Database

Pinecone is used to store and retrieve medical information efficiently:

The Pinecone service is initialized and queried in the chat API route.

6. AI Integration

Med-friend AI leverages OpenAI's GPT models for generating intelligent responses to user queries.

6.1 OpenAI Integration

The application uses the OpenAI API to generate responses:

The integration is handled in the chat API route (src/app/api/chat/route.js).

6.2 Context Enhancement

To provide more accurate and relevant responses, the system:

  1. Queries Pinecone with the user's message
  2. Retrieves relevant medical information
  3. Includes this information as context when querying OpenAI

This process enhances the AI's ability to provide informed and contextually appropriate responses.

7. Database Design

Med-friend AI uses two database systems: Firebase Firestore and Pinecone Vector Database.

7.1 Firebase Firestore

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.

7.2 Pinecone Vector Database

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.

8. Authentication and Security

Med-friend AI implements robust authentication and security measures to protect user data and ensure secure interactions.

8.1 User Authentication

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.

8.2 Security Measures

  1. Environment Variables: Sensitive information like API keys are stored in environment variables (.env.local)
  2. Server-side API Calls: OpenAI API calls are made server-side to protect API keys
  3. HTTPS: All communications are encrypted using HTTPS
  4. Firebase Security Rules: Firestore database access is controlled by Firebase security rules

8.3 Data Privacy

9. API Documentation

9.1 Chat API

Endpoint: /api/chat

Method: POST

Request Body: json { "messages": [ { "role": "user", "content": "User's message here" } ], "chatId": "optional-chat-id" }

Error Responses:

9.2 Authentication API

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.

10. Deployment

Med-friend AI is designed to be deployed on cloud platforms that support Next.js applications.

10.1 Deployment Steps

  1. Set up environment variables on the deployment platform
  2. Build the Next.js application: npm run build
  3. Deploy the built application to the chosen platform (e.g., Vercel, Netlify)
  4. Configure custom domain and SSL certificate if required

10.2 Environment Variables

Ensure the following environment variables are set:

10.3 Continuous Integration/Continuous Deployment (CI/CD)

Set up a CI/CD pipeline to automate the deployment process:

  1. Configure GitHub Actions or similar CI/CD tool
  2. Set up automated testing before deployment
  3. Configure automatic deployment to staging environment on pull requests
  4. Set up manual approval for production deployments

11. Development Workflow

11.1 Setting Up the Development Environment

  1. Clone the repository
  2. Install dependencies: npm install
  3. Set up local environment variables in .env.local
  4. Run the development server: npm run dev

11.2 Code Style and Linting

11.3 Testing

11.4 Version Control

11.5 Documentation

12. Troubleshooting

12.1 Common Issues

  1. API Key Issues: Ensure all API keys are correctly set in environment variables
  2. Firebase Configuration: Verify Firebase configuration in firebase.js
  3. Pinecone Connection: Check Pinecone API key and environment settings
  4. OpenAI API Errors: Verify OpenAI API key and usage limits

12.2 Debugging Tools

12.3 Performance Monitoring

13. Future Enhancements

Potential areas for future development include:

  1. Implement more sophisticated conversation management

    • Context retention across multiple messages
    • User preference learning

  2. Add support for file uploads (e.g., medical reports)

    • Image analysis for visual symptoms
    • PDF parsing for medical documents

  3. Enhance error handling and user feedback mechanisms

    • Implement error boundaries in React components
    • Provide more detailed error messages to users

  4. Implement a user feedback and response rating system

    • Allow users to rate AI responses
    • Use feedback to improve AI training

  5. Develop an admin panel for monitoring conversations and fine-tuning the AI

    • Dashboard for usage statistics
    • Tools for analyzing common queries and improving responses

  6. Integrate with additional medical databases for more comprehensive information

    • Connect with public health databases
    • Integrate with electronic health record (EHR) systems

  7. Implement multi-language support

    • Localization of UI elements
    • Multi-language AI response generation

  8. Add voice input/output capabilities

    • Speech-to-text for user input
    • Text-to-speech for AI responses

  9. Implement advanced analytics

    • User behavior analysis
    • Health trend identification

  10. Enhance mobile experience

    • Develop native mobile apps
    • Optimize performance for low-bandwidth connections

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.

Learn More

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!

Deploy on Vercel

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.