Cursor IDE Clone - Step 2: AI Assistant Integration

A VS Code-like IDE built with Electron, Monaco Editor, and AI-powered coding assistance.

Features

Phase 1 (Completed)

• ✅ Electron app with Monaco Editor
• ✅ File management (create, open, save, delete)
• ✅ Code execution (JavaScript, Python)
• ✅ Integrated terminal (fallback and xterm.js)
• ✅ File explorer with context menus

Phase 2 (Current - AI Integration)

• ✅ AI Chat sidebar (Ctrl+L to toggle)
• ✅ Groq API integration for code generation
• ✅ Automatic file creation in ai-processing folder
• ✅ Context-aware code assistance
• ✅ Support for multiple programming languages

Setup Instructions

1. Install Dependencies

npm install

2. Install Python Dependencies

The AI features use a Python script to handle API calls:

cd ai-processing
pip install -r requirements.txt

Or on Windows, run:

cd ai-processing
install_dependencies.bat

3. Configure AI API (Required for AI features)

The API key is already configured in ai-processing/.env!

If you need to update it:

1. Edit ai-processing/.env
2. Update the GROQ_API_KEY value
3. Optionally configure the model:

   GROQ_API_KEY=your_actual_api_key_here
   LLM_MODEL=llama3-70b-8192
   LLM_PROVIDER=groq
   

🔍 Test the AI integration:

cd ai-processing
python groq_api.py "write a hello world in python"

⚠️ Security Warning:

• The API key is only accessed in the main process (Node.js), never exposed to the renderer
• Never commit API keys to git
• Use user-scope environment variables for better security

3. Run the Application

npm start

Usage

Basic IDE Features

• File Management: Use the sidebar to create, rename, delete files/folders
• Code Editing: Full Monaco editor with syntax highlighting
• Terminal: Integrated terminal for running commands
• Code Execution: Use the Run button or Ctrl+R

AI Assistant Features

1. Open AI Chat: Press Ctrl+L to toggle the AI sidebar
2. Ask Questions: Type natural language prompts like:
   • "Create a Python hello world"
   • "Fix this JavaScript function"
   • "Add error handling to this code"
   • "Explain what this code does"
3. Code Generation: The AI will generate code and automatically:
   • Create files in the ai-processing folder
   • Open the generated file in the editor
   • Suggest appropriate filenames based on content

Keyboard Shortcuts

• Ctrl+L - Toggle AI chat sidebar
• Ctrl+S - Save current file
• Ctrl+R - Run current file
• Ctrl+Enter (in AI chat) - Send message
• Escape - Close modals/AI chat

Project Structure

cursor-app/
├── src/
│   ├── index.html          # Main UI
│   ├── styles.css          # All styling
│   └── renderer.js         # Frontend logic
├── workspace/              # User files
├── ai-processing/          # AI-generated files
├── index.js                # Main Electron process
├── preload.js              # IPC bridge
└── package.json

AI Integration Details

How It Works

1. User types prompt in AI chat sidebar
2. Current editor content + prompt sent to main process
3. Main process calls Groq API with structured prompts
4. Response parsed for code blocks and explanations
5. Generated code saved to ai-processing/ folder
6. File automatically opened in editor

Supported Models

• Groq: llama3-70b-8192 (default), mixtral-8x7b-32768
• Configure via LLM_MODEL environment variable

Safety Features

• API key never exposed to frontend
• All AI requests go through main process
• Generated files isolated in ai-processing folder
• Error handling for API failures
• Graceful fallback when API key is missing

Development

Adding New AI Providers

1. Modify the ask-ai handler in index.js
2. Add provider-specific API calls
3. Update environment variable documentation

Customizing AI Behavior

Edit the system prompt in index.js around line 520 to change how the AI responds.

Troubleshooting

AI Features Not Working

1. Check if GROQ_API_KEY is set: echo $env:GROQ_API_KEY
2. Restart the application after setting environment variables
3. Check console for API error messages
4. Verify API key is valid at Groq Console

Terminal Issues

• On Windows, uses cmd.exe by default
• For better experience, ensure Node.js and Python are in PATH

File Permissions

• App creates workspace and ai-processing folders automatically
• If file operations fail, check folder permissions

Contributing

This is a learning project implementing a Cursor-like IDE. Feel free to extend features:

• Add more AI providers (OpenAI, Anthropic)
• Implement code completion
• Add debugging features
• Enhance terminal integration

License

MIT License - Feel free to use and modify for learning purposes.