Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/12pavani/fullstack_ai_app

ThinkAI is a web app powered by OpenAI's GPT-3.5 for real-time question-answering. Built with React.js on the frontend and FastAPI on the backend, it allows users to ask questions and get accurate AI-generated responses instantly.
https://github.com/12pavani/fullstack_ai_app

fastapi gpt-3-5 openai reactjs

Last synced: 20 days ago
JSON representation

ThinkAI is a web app powered by OpenAI's GPT-3.5 for real-time question-answering. Built with React.js on the frontend and FastAPI on the backend, it allows users to ask questions and get accurate AI-generated responses instantly.

Awesome Lists containing this project

README 

        



    

    



🚀 ThinkAI: Your AI-Powered Question-Answering System



ThinkAI is an intelligent question-answering system powered by OpenAI's GPT-3.5 model. Users can ask questions, and the AI responds with accurate and relevant answers in real time. This web application leverages React.js for the frontend and FastAPI with the OpenAI API for the backend.



✨ Features



Real-time Question-Answering


    

        
  • Ask any question, and get instant, relevant answers powered by GPT-3.5
    • 

        
  • Interactive user interface for seamless interaction
    • 

        
  • Instantaneous responses for any query
    • 




User Interface


    

        
  • Simple and user-friendly design
    • 

        
  • Responsive layout optimized for desktops, tablets, and mobile devices
    • 

        
  • Real-time updates of user questions and AI responses
    • 




🛠️ Tech Stack



Backend


    

        
  • FastAPI
    • 

        
  • OpenAI GPT-3.5 API
    • 

        
  • Python 3.8+
    • 

        
  • CORS enabled for cross-origin requests
    • 




Frontend


    

        
  • React.js
    • 

        
  • React Router for navigation
    • 

        
  • Context API for state management
    • 




💻 Components Structure



Frontend Components


- App.js            // Main React component

- App.css           // Styles for the frontend



Backend Components


- main.py          // FastAPI backend entry point



🚀 Local Development Setup



Backend Setup



![Backend](back-end.png)



1. Clone the repository

git clone https://github.com/yourusername/thinkai.git

cd thinkai



2. Create a virtual environment

python -m venv venv

source venv/bin/activate  # For Windows: venv\Scripts\activate



3. Install dependencies

pip install -r requirements.txt



4. Set up environment variables (.env)

OPENAI_API_KEY=your-openai-api-key-here



5. Run the backend server

uvicorn main:app --reload



Frontend Setup



![Backend](front-end.png)



1. Navigate to the frontend directory

cd frontend



2. Install dependencies

npm install



3. Set up environment variables (.env)

REACT_APP_API_URL=http://localhost:8000



4. Start the frontend server

npm start



📡 API Endpoints



Question-Answering


POST /ask             - Send a question to the AI for an answer



🔄 Example Usage


// Example of sending a question from the frontend

const response = await fetch(${process.env.REACT_APP_API_URL}/ask, {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify({ question: 'What is React.js?' })

});



const data = await response.json();

console.log(data.answer); // Logs the AI-generated answer



🚀 Deployment



Backend Deployment


    

        
  1. Create a new Web Service on Render or your preferred platform
    2. 

        
  2. Set the environment variable for OpenAI API key
    3. 

        
  3. Deploy the backend service with FastAPI and Uvicorn
    4. 




Frontend Deployment


    

        
  1. Deploy the frontend on platforms like Render, Netlify, or Vercel
    2. 

        
  2. Connect the deployed frontend to the backend API
    3. 




🔐 Security Features


    

        
  • Environment variables for API keys
    • 

        
  • Cross-origin resource sharing (CORS) protection
    • 




🐛 Troubleshooting


Common issues and solutions:

    

        
  • API errors: Verify your OpenAI API key and network connection
    • 

        
  • CORS issues: Ensure your frontend URL is allowed in the backend CORS settings
    • 




📱 Responsive Design


The application is fully responsive and tested on:

    

        
  • Desktop (1200px+)
    • 

        
  • Tablet (768px - 1199px)
    • 

        
  • Mobile (320px - 767px)
    • 




🤝 Contributing


    

        
  1. Fork the repository
    2. 

        
  2. Create a feature branch
    3. 

        
  3. Commit your changes
    4. 

        
  4. Push your branch
    5. 

        
  5. Create a Pull Request
    6. 




📄 License


This project is licensed under the MIT License.



Made with ❤️ by Vislavath Pavani