Skip to content

jdhines/fullstack-react-ai-chat-assistant

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Fullstack AI Chat Assistant

A modern fullstack AI chat assistant application featuring persistent conversations, session restoration, and a beautiful React-based interface.

πŸ›  Technology Stack

Tech stack diagram

Frontend

  • React 18 - Modern React with hooks and concurrent features
  • TanStack Router - Type-safe routing and navigation
  • TanStack Query - Data fetching and state management
  • Tailwind CSS - Utility-first CSS framework
  • Vite - Fast build tool and development server

AI Integration

  • CopilotKit - AI assistant UI components and runtime
  • LangGraph - Agent workflow orchestration
  • Azure OpenAI - GPT-4 language model integration

Backend

  • FastAPI - High-performance Python API framework
  • MongoDB - Document database for conversation persistence
  • Motor - Async MongoDB driver
  • Pydantic - Data validation and serialization

✨ Key Features

  • πŸ—£ Persistent Conversations - Chat history saved to MongoDB with automatic session restoration
  • πŸ‘€ Single Conversation Per User - Each user maintains one continuous conversation thread
  • πŸ”„ Session Restoration - Conversations automatically restore on page refresh
  • 🎨 Modern UI - Beautiful, responsive chat interface built with React and Tailwind
  • πŸš€ Real-time Streaming - Live AI responses with CopilotKit's streaming capabilities
  • πŸ›‘ Type Safety - Full TypeScript support across frontend and backend
  • πŸ“± Mobile Friendly - Responsive design that works on all devices

πŸš€ Quick Start

Prerequisites

  • Node.js 18+
  • Python 3.11+
  • MongoDB instance (local or cloud)
  • Azure OpenAI API access

1. Clone and Setup Environment

git clone <repository-url> fullstack-ai-chat
cd fullstack-ai-chat

2. Backend Setup

cd backend/lang-graph-service
cp .env.example .env
# Edit .env with your MongoDB and Azure OpenAI credentials
python -m venv .venv
source .venv/Scripts/activate  # Windows: .venv\Scripts\activate
pip install poetry
poetry install

3. Frontend Setup

cd client
npm install

4. Start Services

# Terminal 1: Start LangGraph service
cd backend/lang-graph-service
poetry run python server.py

# Terminal 2: Start CopilotKit runtime
cd backend/copilot-runtime-service
npm install && npm start

# Terminal 3: Start React client
cd client
npm start

The application will be available at:

πŸ“š Documentation

  • Frontend Documentation: client/README.md
    • React components, routing, styling, and testing
  • Backend Documentation: backend/README.md
    • API endpoints, MongoDB setup, and deployment

πŸ— Project Structure

/
β”œβ”€β”€ README.md                          # This file
β”œβ”€β”€ client/                            # React frontend application
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ components/               # Reusable UI components
β”‚   β”‚   β”œβ”€β”€ pages/                    # Page components
β”‚   β”‚   β”œβ”€β”€ routes/                   # TanStack Router routes
β”‚   β”‚   └── providers/                # React context providers
β”‚   └── README.md                     # Frontend documentation
β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ copilot-runtime-service/      # CopilotKit runtime service
β”‚   └── lang-graph-service/           # LangGraph agent service
β”‚       β”œβ”€β”€ server.py                 # FastAPI server
β”‚       β”œβ”€β”€ sample_agent/             # AI agent implementation
β”‚       └── README.md                 # Backend documentation
└── docs/                             # Additional documentation

πŸ”§ Configuration

Environment Variables

The application requires configuration for:

  • MongoDB Connection: For conversation persistence
  • Azure OpenAI: For AI model access
  • CORS Settings: For frontend-backend communication

See the backend documentation for detailed configuration instructions.

πŸš€ Deployment

This application is designed for easy deployment to:

  • Azure Container Apps - For scalable container deployment
  • Azure App Service - For traditional web app hosting
  • Docker - Using the provided Dockerfiles

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

πŸ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ†˜ Support

For technical support or questions:


Built with ❀️ using modern web technologies and AI.

About

React + CopilotKit + LangGraph + MongoDB

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors