Vibely VS Code Extension

An AI-powered coding assistant featuring Vib, your friendly coding companion. Vibely provides real-time code generation with streaming responses, interactive explanations, and seamless integration with VS Code.

🚀 Quick Start - Running the Extension (Super Simple!)

The easiest way to run Vibely: Just open the folder in VS Code, click on extension.ts, and hit F5!

⚡ Ultra-Quick Reference (TL;DR)

# 1. Get the code and install dependencies
git clone https://github.com/CalebTraxler/vibely_ide_extension.git
cd vibely_ide_extension
npm install

# 2. Create .env file with your API keys (see details below)
touch .env
# Add your API keys to .env

# 3. Open in VS Code, click src/extension.ts, press F5

That's it! 🎉

Step-by-Step Instructions

1. Get the Code

   git clone https://github.com/CalebTraxler/vibely_ide_extension.git
   cd vibely_ide_extension
   

2. Install Dependencies

   npm install
   

3. Set up Environment Variables (Required) Create a .env file in the project root:

   # Create the .env file
   touch .env
   

   Add your API keys to the .env file:

   # Claude API Configuration (Required)
   CLAUDE_API_KEY=your_claude_api_key_here
   
   # Supabase Configuration (Required)
   SUPABASE_URL=your_supabase_url_here
   SUPABASE_ANON_KEY=your_supabase_anon_key_here
   
   # Auth0 Configuration (Optional - only if using Auth0)
   AUTH0_DOMAIN=your_auth0_domain_here
   AUTH0_CLIENT_ID=your_auth0_client_id_here
   AUTH0_CLIENT_SECRET=your_auth0_client_secret_here
   AUTH0_AUDIENCE=your_auth0_audience_here
   

   🔑 Need API Keys?

   • Claude API: Get your key from Anthropic Console
   • Supabase: Create a project at Supabase and get your URL and anon key from Settings → API

4. Open in VS Code

   • Open VS Code
   • Click "File" → "Open Folder" (or Cmd+O / Ctrl+O)
   • Select the vibely_ide_extension folder

5. Run the Extension ⭐ (The Magic Step!)

   • In VS Code's file explorer, navigate to src/extension.ts
   • Click on extension.ts to open it (this is important!)
   • Press F5 or click the "Run and Debug" icon in the sidebar
   • Select "Run Extension" from the dropdown
   • 🎉 A new "Extension Development Host" window will open with Vibely loaded!

What Happens Next?

Once the Extension Development Host window opens:

• Look for the Vibely icon in the Activity Bar (left sidebar)
• Click it to open the Vibely panel
• Start chatting with Vib to generate code!

🎯 First Time Setup Notes

Important: The extension will prompt you to:

1. Sign in - You'll see a login screen first
2. Select workspace - Choose how you want to work with files
3. Start coding - Once set up, you can start chatting with Vib!

Pro tip: The Extension Development Host window is like a separate VS Code instance just for testing your extension. You'll do all your Vibely interactions there, while keeping your main VS Code window for editing the extension code.

🔄 Development Workflow

Once you have the extension running:

1. Edit code in your main VS Code window (the one with the extension source)
2. Test changes by pressing Ctrl+R (or Cmd+R) in the Extension Development Host window to reload
3. Debug issues using the Debug Console in your main VS Code window
4. Iterate quickly - changes are hot-reloaded when you save files!

Features

• 🤖 AI-Powered Code Generation: Uses Claude API for intelligent code suggestions
• ⚡ Real-time Streaming: Code blocks appear as they're generated, no waiting
• 🧠 Interactive Explanations: Get detailed explanations for any code block
• 💬 Block-specific Chat: Ask questions about specific parts of your code
• 🎨 Beautiful UI: Vib character with thought bubbles and modern interface
• 📦 Smart Caching: Background prefetching for instant next blocks
• 🔄 VS Code Integration: Seamlessly integrated into your development workflow

Method 2: Manual Compilation

If you prefer to compile manually:

1. Follow steps 1-3 above
2. Compile the TypeScript:

   npm run compile
   

3. Follow steps 4-5 above

Package the Extension

To create a .vsix package:

npm install -g vsce
vsce package

Then install the .vsix file in VS Code.

Usage

1. Open Vibely Assistant: The extension will automatically open a panel next to your terminal when activated
2. Start a Conversation: Type what you want to build in the input field
3. Watch Code Generate: Vib will stream code blocks in real-time
4. Interact with Blocks:
   • Click "Got it! Next →" to proceed to the next block
   • Click "Explain more" for detailed explanations
   • Use "Chat" to ask questions about specific blocks

🔧 Troubleshooting

Common Issues & Solutions

🚫 Extension won't start:

• ✅ Make sure you've installed dependencies: npm install
• ✅ Check that your .env file exists and has the correct API keys
• ✅ Try running npm run compile first, then F5
• ✅ Ensure you're in the correct project directory

🚫 "Extension Development Host" window doesn't open:

• ✅ Important: Make sure you clicked on src/extension.ts first (this is crucial!)
• ✅ Check the Debug Console (View → Debug Console) for any error messages
• ✅ Try closing VS Code completely and reopening the project folder
• ✅ Make sure you have the "Run Extension" configuration selected in the debug dropdown

🚫 API errors or authentication issues:

• ✅ Verify your .env file has the correct API keys (no extra spaces or quotes)
• ✅ Check that your Claude API key is valid and has sufficient credits
• ✅ Ensure your Supabase credentials are correct
• ✅ Test your API keys independently if possible

🚫 Extension panel doesn't appear:

• ✅ Look for the Vibely icon in the Activity Bar (left sidebar)
• ✅ Try reloading the Extension Development Host window (Ctrl+R or Cmd+R)
• ✅ Check if the extension is enabled in the Extensions view
• ✅ Make sure you're looking in the Extension Development Host window, not your main VS Code window

🚫 "Run Extension" option not available:

• ✅ Make sure you have the VS Code Extension Development tools installed
• ✅ Try installing the "Extension Pack for Visual Studio Code" if missing
• ✅ Restart VS Code and try again

Still Having Issues?

1. Check the Debug Console:

   • Go to View → Debug Console in VS Code
   • Look for any error messages when you try to run the extension

2. Verify Your Setup:

   # Check if dependencies are installed
   ls node_modules
   
   # Check if .env file exists and has content
   cat .env
   
   # Try compiling manually
   npm run compile
   

3. Clean Start:

   # Remove node_modules and reinstall
   rm -rf node_modules package-lock.json
   npm install
   

4. Check VS Code Extensions:

   • Make sure you have the latest version of VS Code
   • Install any recommended extensions when prompted

How It Works

Streaming Architecture

Vibely uses advanced streaming techniques to provide instant feedback:

1. Block Detection: Automatically detects when code blocks are complete
2. Real-time Display: Shows blocks as soon as they're finished
3. Background Caching: Prefetches additional blocks for seamless progression
4. Smart Heuristics: Uses natural language patterns to identify block boundaries

Claude API Integration

• Uses Claude 3.5 Sonnet for high-quality code generation
• Implements proper streaming with Server-Sent Events (SSE)
• Includes error handling and retry mechanisms
• Supports context-aware conversations about specific code blocks

Configuration

Environment Variables

Create a .env file in the project root with the following variables:

# Claude API Configuration
CLAUDE_API_KEY=your_claude_api_key_here

# Supabase Configuration
SUPABASE_URL=your_supabase_url_here
SUPABASE_ANON_KEY=your_supabase_anon_key_here

# Auth0 Configuration
AUTH0_DOMAIN=your_auth0_domain_here
AUTH0_CLIENT_ID=your_auth0_client_id_here
AUTH0_CLIENT_SECRET=your_auth0_client_secret_here
AUTH0_AUDIENCE=your_auth0_audience_here

Copy .env.example to .env and fill in your actual API keys. The .env file is automatically ignored by git for security.

Development

Project Structure

src/
├── extension.ts          # Main extension entry point
├── vibelyProvider.ts     # Webview provider and message handling
└── claudeService.ts      # Claude API integration and streaming

media/
├── vib.png              # Vib character (smiling)
└── vib-thinking.png     # Vib character (thinking)

Key Components

• VibelyProvider: Manages the webview panel and handles user interactions
• ClaudeService: Handles API communication, streaming, and block caching
• Webview UI: Interactive interface with Vib character and code display

Building

# Watch mode for development
npm run watch

# One-time compilation
npm run compile

API Features

Streaming Support

Vibely implements the latest Claude streaming capabilities:

• Content Block Deltas: Real-time token streaming
• Block Completion Detection: Automatic detection of logical code boundaries
• Error Recovery: Graceful handling of stream interruptions
• Background Prefetching: Continuous generation of additional blocks

Block Detection Heuristics

The system uses multiple strategies to detect when code blocks are complete:

• Function/class completion markers
• Natural language boundaries
• Brace matching and structure analysis
• Minimum block size requirements

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is proprietary to Vibely. All rights reserved.

Support

For issues, questions, or feature requests, please contact the Vibely development team.

Made with ❤️ by the Vibely team