LeetCode Helper is a Chrome Extension designed to supercharge your LeetCode problem-solving experience with instant, AI-powered guidance. It seamlessly detects the current LeetCode problem, sends the details to a powerful backend, and returns step-by-step solutions—all without leaving your browser.
- Auto-Detects LeetCode Problems: Instantly grabs the title and URL of the LeetCode problem you're viewing.
- AI-Powered Guidance: Sends problem details to a deployed Django REST API, which uses an LLM (Gemini or OpenAI) to generate step-by-step solutions.
- Clean UI: Displays AI responses in Markdown, rendered beautifully in the extension popup using marked.min.js.
- No Local Setup Needed: Backend is fully managed and deployed on Render.com.
LeetCode Helper streamlines your LeetCode workflow. With a single click, you get expert-level guidance directly from a large language model, tailored to the problem you're working on. No more context switching or copy-pasting—just solutions when you need them.
- Download or clone this repository.
- Open Google Chrome and go to
chrome://extensions/
. - Enable Developer mode (top right).
- Click Load unpacked and select the
extension
folder inside the project. - The LeetCode Helper icon should appear in your extensions bar.
- Navigate to any LeetCode problem page.
- Click the LeetCode Helper extension icon.
- The extension will auto-fill the problem title and URL.
- Click Get Guidance.
- See step-by-step AI-generated guidance appear instantly in the popup!
Note: No need to run any local servers—everything works out of the box.
+---------------------+ +------------------------------+ +-----------------------------+
| Chrome Extension | <------> | Django REST API (Render.com)| <-------> | Large Language Model (LLM) |
| (popup.html/js) | | Endpoint: /api/solve/ | | (Gemini, OpenAI, etc.) |
+---------------------+ +------------------------------+ +-----------------------------+
| |
|------------------- User initiates a request -------------------------------------|
- Frontend: Presents popup UI, grabs problem info, and renders Markdown via marked.js.
- Backend:
The backend is built with Django and Django REST Framework, deployed on Render.com for seamless scalability and reliability. It exposes a single endpoint at
/api/solve/
and handles communication with the LLM. - LLM: Generates step-by-step guidance tailored to the problem context.
- Integration with LLMs: Utilizes APIs from LLM providers (e.g., Gemini, OpenAI) to generate detailed solutions and explanations.
- Markdown Output: Formats responses in Markdown for easy rendering on the frontend.
- Error Handling: Returns user-friendly error messages and backend status codes if the AI cannot generate guidance.
- Scalability: Hosted on Render.com for auto-scaling and high availability.
- Security: Basic request validation and sanitization are performed to ensure safe API usage.
- Production Ready: Includes Procfile and render.yaml for cloud deployment, and
.gitignore
for environment management. - Extensible: Modular structure for easy addition of endpoints or support for other coding platforms.
The backend is fully managed—no user setup required. All requests are handled securely and efficiently in the cloud.
Leetcode-Helper/
├── extension/ # Chrome Extension source code
│ ├── icon.png
│ ├── manifest.json
│ ├── marked.min.js
│ ├── popup.css
│ ├── popup.html
│ └── popup.js
├── leetcode backend/
│ ├── api/
│ ├── backend/
│ ├── .gitignore
│ ├── Procfile
│ ├── db.sqlite3
│ ├── manage.py
│ ├── render.yaml
│ └── requirements.txt
├── screenshots/
- Support for more coding platforms (HackerRank, Codeforces, etc.)
- Chrome Web Store publication
- Enhanced error handling and retry logic
- User authentication and saved guidance history
Contributions are welcome! Please open an issue or submit a pull request with a clear description of your changes.