An intelligent full-stack coding assistant built with React and a Node.js/TypeScript backend that uses the power of OpenAI GPT and LangChain for advanced code generation, debugging, and analysis.
CodeWhisper is a full-stack AI-powered coding assistant built to enhance developer productivity by offering intelligent code generation, explanation, and debugging capabilities. Designed with a clean, chat-based interface, it transforms natural language prompts into functional code while helping users understand and fix errors effectively.
The system leverages OpenAI's GPT-4 for core reasoning, LangChain agents for multi-step problem-solving, and FAISS-based Retrieval-Augmented Generation (RAG) to provide relevant, context-aware responses based on historical prompts and solutions. With a strong focus on both backend orchestration and frontend usability, CodeWhisper blends modern GenAI techniques with robust software engineering.
Generate accurate code snippets across languages using natural language queries powered by GPT-4.
Paste faulty code and receive detailed analysis along with corrected versions and explanations.
Employs LangChain agents to deconstruct complex prompts and deliver logical, step-by-step solutions.
Integrates a FAISS vector database to retrieve semantically similar historical queries, improving context awareness in responses.
Uses OpenAI Function Calling to extract metadata such as programming language, difficulty level, and key concepts from generated content.
Built with a responsive React.js frontend and a Python Flask backend, ensuring seamless communication between user inputs and AI processing.
A modern, chat-style UI allows users to interact naturally with the assistant, enhancing usability and developer experience.
CodeWhisper operates on a classic client-server model but with a highly intelligent backend.
- Frontend (React.js): The user interacts with the React application, submitting requests for code generation or debugging. The UI is designed to be intuitive and manage the conversation state.
- Backend (Node.js & Express.js): The Node.js/Express server acts as the brain of the operation. It receives requests from the frontend via a REST API and orchestrates the AI functionalities.
- LangChain Agents: For complex queries, the backend uses
langchain.jsto create a chain-of-thought process. The agent can decide to use different tools (like the RAG system or the base GPT model) to fulfill the request. - RAG with FAISS: When a query requires specific context, the system uses the FAISS vector index to find the most relevant documents or code snippets. This information is then "augmented" to the prompt sent to the language model.
- OpenAI GPT: The core generative power comes from an OpenAI GPT model. It receives the final, context-rich prompt and generates the code or debugging explanation.
- OpenAI Function Calling: After a response is generated, a separate call is made using OpenAI Function Calling to analyze the text and return structured JSON data (e.g.,
{"language": "Python", "difficulty": "Intermediate", "tags": ["data-processing", "pandas"]}). - Response: The final, complete response (generated code + metadata) is sent back to the React frontend to be displayed to the user.
- Frontend: React.js, CSS3
- Backend: Node.js, TypeScript, Express.js
- Core AI: OpenAI GPT-3.5/4
- Orchestration Framework: LangChain.js
- Vector Store / RAG: FAISS (Facebook AI Similarity Search)
- API & Metadata: OpenAI Function Calling
Follow these instructions to get a local copy up and running.
- Node.js and npm/yarn installed
- An OpenAI API Key
-
Clone the repository:
git clone [https://github.com/Shivang139/CodeWhisper-AI-Powered-Coding-Assistant.git](https://github.com/Shivang139/CodeWhisper-AI-Powered-Coding-Assistant.git) cd CodeWhisper-AI-Powered-Coding-Assistant -
Backend Setup (Node.js & TypeScript):
# Navigate to the backend directory (e.g., /api or /backend) cd backend # Install dependencies npm install # Set up your environment variables # Create a .env file in the backend folder and add your OpenAI API key echo "OPENAI_API_KEY='your_super_secret_key_here'" > .env # (Optional) If you have a pre-built FAISS index, place it in the designated folder.
-
Frontend Setup (React):
# Navigate to the frontend directory from the root cd ../frontend # Install npm packages npm install # Create a .env.local file and add the backend API URL # Make sure the port matches the one your Node.js server is using. echo "REACT_APP_API_URL=http://localhost:5000/api" > .env.local
-
Start the Node.js Backend:
# From the /backend directory # This will compile TypeScript and start the server. npm run dev
The backend will typically be running on
http://localhost:5000. Check yourpackage.jsonfor the exact command and port. -
Start the React Frontend:
# From the /frontend directory in a new terminal npm startThe application will open in your browser at
http://localhost:3000.
Simply open the application in your browser and start typing!
- To generate code: Type a clear instruction like, "Write a Python function that takes a list of integers and returns the sum of all even numbers."
- To debug code: Paste your code snippet along with the error message or a question like, "Why am I getting a TypeError in this JavaScript code?"
The AI will process your request and provide a detailed response, including the generated code and any extracted metadata.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See the LICENSE file for more information.
Shivang - shivangagrawal139@gmail.com
Project Link: https://github.com/Shivang139/CodeWhisper-AI-Powered-Coding-Assistant