JARVIS VSCode Extension

Voice-enabled AI assistant extension for Visual Studio Code, powered by Google Gemini.

📁 Project Structure

your-extension/
├── package.json          # Extension manifest (VSCode configuration)
├── extension.ts          # Main extension code (TypeScript)
├── tsconfig.json         # TypeScript configuration
├── webview/              # React UI with voice features
│   ├── package.json      # Webview dependencies
│   ├── vite.config.ts    # Vite build configuration
│   ├── index.html        # HTML entry point
│   ├── src/
│   │   ├── main.tsx      # React entry point
│   │   ├── App.tsx       # Main React component
│   │   └── App.css       # Styles
│   └── dist/             # Built webview files (generated)
└── dist/                 # Compiled extension (generated)

🚀 Setup Instructions

1. Install Extension Dependencies

cd your-extension
npm install

This installs:

• @types/vscode - VSCode extension API types
• typescript - TypeScript compiler
• @google/genai - Google Gemini API
• Voice dependencies (Speech-to-Text, Text-to-Speech)

2. Install Webview Dependencies

cd webview
npm install

This installs:

• React 19
• Vite (build tool)
• Voice feature dependencies

3. Build the Webview

cd webview
npm run build

This creates webview/dist/ with your compiled React app.

4. Compile the Extension

cd ..
npm run compile

This creates dist/extension.js from extension.ts.

🔧 Development Workflow

Option A: Development Mode

Terminal 1 - Watch extension changes:

npm run watch

Terminal 2 - Watch webview changes:

cd webview
npm run dev

VS Code: Press F5 to launch Extension Development Host

Option B: Full Build

# Build webview
cd webview
npm run build

# Build extension
cd ..
npm run compile

# Test in VSCode
# Press F5 to open Extension Development Host

🎯 Usage

In VS Code:

1. Press Ctrl+Shift+J (or Cmd+Shift+J on Mac)
2. Or: Click the "🤖 JARVIS" button in the status bar
3. Or: Open Command Palette (Ctrl+Shift+P) → "Open JARVIS Assistant"

Features:

• 💬 Chat with AI - Ask questions, get code help
• 🎤 Voice Input - Speak commands (when enabled)
• 🔊 Voice Output - Hear responses
• 🔧 Terminal Integration - Execute commands from JARVIS
• 📂 Workspace Aware - Knows your project context

🎤 Adding Voice Features

Copy Voice Utils

Copy your existing voice-utils.ts to the webview:

# From CLI_Upgrade root:
cp voice-utils.ts your-extension/webview/src/

Update App.tsx

Import and use voice functions:

import { captureVoiceCommand, respondWithVoice, checkVoiceSupport } from './voice-utils';

// In your component:
const handleVoiceInput = async () => {
  const text = await captureVoiceCommand(5000);
  setInput(text);
};

const handleVoiceOutput = async (text: string) => {
  await respondWithVoice(text, 'smooth');
};

Set Environment Variables

Create .env in webview/:

API_KEY=your_gemini_api_key
GOOGLE_APPLICATION_CREDENTIALS=/path/to/credentials.json

📦 Packaging for Distribution

1. Install vsce

npm install -g @vscode/vsce

2. Package Extension

npm run package

This creates jarvis-vscode-extension-1.0.0.vsix.

3. Install Locally

code --install-extension jarvis-vscode-extension-1.0.0.vsix

Or: Extensions panel → ... → Install from VSIX

🔐 Publishing (Optional)

1. Create Publisher Account

Visit: https://marketplace.visualstudio.com/manage

2. Get Personal Access Token

Create token with Marketplace (Publish) scope

3. Login

vsce login your-publisher-name

4. Publish

vsce publish

🎨 Customization

Change Extension Name

Edit package.json:

{
  "name": "your-name",
  "displayName": "Your Display Name",
  "publisher": "your-publisher-id"
}

Change Keyboard Shortcut

Edit package.json → contributes.keybindings:

{
  "key": "ctrl+alt+j",
  "command": "jarvis.openAssistant"
}

Add New Commands

1. Add to package.json:

"contributes": {
  "commands": [
    {
      "command": "jarvis.newCommand",
      "title": "New Command"
    }
  ]
}

2. Register in extension.ts:

vscode.commands.registerCommand('jarvis.newCommand', () => {
  // Your code
});

📝 Notes

Current Status

✅ Extension structure created ✅ React webview setup ✅ Voice feature placeholders ✅ Terminal integration ready ✅ TypeScript configured

⏳ TODO: Connect real Gemini API ⏳ TODO: Integrate voice-utils.ts ⏳ TODO: Add chat history persistence

Files to Customize

• extension.ts - Extension logic
• webview/src/App.tsx - UI and interactions
• webview/src/App.css - Styling
• package.json - Extension configuration

🐛 Troubleshooting

Extension not loading?

# Rebuild everything
cd webview
npm run build
cd ..
npm run compile
# Press F5 in VS Code

Webview not showing?

Check Developer Tools (Help → Toggle Developer Tools) for errors.

Voice not working?

1. Check Google Cloud credentials
2. Verify API keys in .env
3. Make sure voice-utils.ts is copied to webview/src/

📚 Resources

• VSCode Extension API
• Webview API
• Publishing Extensions

Ready to customize! 🚀

Start by running npm install in both your-extension/ and your-extension/webview/.