🤖 AICodeAgent – AI Assistant for VS Code

AICodeAgent is a Visual Studio Code extension that brings an AI-powered chat assistant right into your code editor. You can ask questions, get coding help, and even attach files from your workspace using @filename syntax for contextual responses.

---

✨ Features

• 🧠 AI Chat Interface — Powered by OpenAI (GPT-3.5+)
• 💬 Clean React Chat UI — Rendered in a WebView using Vite + React
• 📎 Attach Files with @filename — Inject file content into prompts
• 📁 Workspace Aware — Understands local files and your input
• ⚡ Instant Setup — No backend needed, everything runs locally

---

🛠 Tech Stack

• Language: TypeScript
• Frontend: React (with Vite)
• Styling: Plain CSS
• AI: OpenAI API
• Tools: VS Code Extension API, WebView API

---

🚀 Installation & Setup

Follow these steps to run the extension locally in your VS Code:

1. Clone the Repository

git clone https://github.com/your-username/aicodeagent.git
cd aicodeagent

2. Install Root Dependencies (VS Code Extension)

npm install

3. Setup the React Frontend (Webview)

cd media
npm install
npm run build

This will build the React app and output files into media-dist/, which will be loaded by the extension.

4. Return to Root and Start the Extension

cd ..
npm run compile

Now open the project in VS Code and press:

F5

This will launch a new Extension Development Host window.

---

⚙️ Configuration

🔑 Add Your OpenAI API Key

To use the AI assistant, store your API key securely in VS Code's settings:

1. Press Ctrl + , or Cmd + , to open User Settings
2. Search for:

aiCodeAgent.openaiApiKey

3. Add this setting:

"aiCodeAgent.openaiApiKey": "sk-YourActualOpenAIKey"

---

💡 Usage

• Press Ctrl + Shift + P → Select "Hello World" to open the AI panel.
• Type a prompt like:

How do I create a debounce function in JavaScript?

• Attach a file using:

@utils.js

You can then type a follow-up prompt and press Enter or Send to submit.

---

📂 Project Structure

aicodeagent/
├── src/                 # VS Code extension (TypeScript)
│   └── extension.ts     # Extension activation & WebView logic
├── media/               # React app for chat UI
│   ├── src/             # React components (Chat.tsx, etc.)
│   └── index.html       # WebView HTML shell
├── media-dist/          # Compiled WebView bundle (after `npm run build`)
├── package.json         # Root extension config
└── tsconfig.json        # TypeScript config

---

🔐 Hiding Your API Key in Git

Never hard-code your API key in extension.ts or anywhere else.

To keep it safe:

• Only store it in settings.json (user-level)
• Add any local .env or config files to .gitignore

# .gitignore
.env
.vscode/settings.json

---

🧪 Troubleshooting

• 🟠 @file syntax does nothing? Make sure you're typing @filename and pressing Enter. A file picker should open.

• 🔴 OpenAI key not found? Double-check you added the setting correctly.

• 🔒 "Quota exceeded" error? Your OpenAI key may have expired free credits or lacks billing setup.

• ⚙️ React not rendering? Make sure media is built with npm run build and media-dist exists.

---

📜 License

MIT License. Use freely, contribute, or customize for your team!

---

🤝 Contributions

Feel free to open issues or pull requests to improve the extension. You can also fork it and customize it for other LLM APIs like Groq, OpenRouter, or local LLMs.

---

🙌 Acknowledgments

Built with ❤️ using:

• OpenAI API
• Visual Studio Code Extensions Guide
• React
• Vite