Flow - AI Chat Interface for VS Code

A powerful chat interface for VS Code that integrates with multiple AI providers including OpenAI, Anthropic, and Google AI.

Features

🤖 Support for multiple AI models:
- OpenAI: GPT-4o, GPT-4.1
- Anthropic: Claude-4-Sonnet, Claude-4-Opus
- Google AI: Gemini-2.5-Pro
💬 Interactive chat interface in VS Code sidebar
🔧 Easy API key configuration
⌨️ Keyboard shortcuts for quick access

Setup

API Key Configuration

You can configure your API keys in two ways:

Option 1: VS Code Settings (Recommended)

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run "Configure Flow API Keys" or use the shortcut Ctrl+Shift+K / Cmd+Shift+K
Add your API keys in the Flow settings section:
- flow.apiKeys.openai: Your OpenAI API key
- flow.apiKeys.anthropic: Your Anthropic API key
- flow.apiKeys.google: Your Google AI API key

🔐 Security Note: API key fields are password-protected (masked input) and stored securely in your user settings.

Option 2: Environment Variables

Create a .env file in your workspace root

Add your API keys:

OPENAI_API_KEY=your_openai_api_key_here
ANTHROPIC_API_KEY=your_anthropic_api_key_here
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here

Restart VS Code

You can also use the "Create .env Template for Flow" command to generate a template file.

Getting API Keys

OpenAI: Get your API key from OpenAI API Keys
Anthropic: Get your API key from Anthropic Console
Google AI: Get your API key from Google AI Studio

Usage

Open the Flow Chat panel from the Activity Bar or use Ctrl+Shift+C / Cmd+Shift+C
Select your preferred AI model from the dropdown
Start chatting!

Commands

Flow: Start Flow Chat - Open the chat interface
Flow: Configure Flow API Keys - Open API key settings
Flow: Create .env Template for Flow - Create a template .env file

Keyboard Shortcuts

Ctrl+Shift+C / Cmd+Shift+C - Start Flow Chat
Ctrl+Shift+K / Cmd+Shift+K - Configure API Keys
Ctrl+Enter / Cmd+Enter - Send message (in chat)

Troubleshooting

If you're experiencing issues with specific AI providers:

Check API Keys: Ensure your API keys are properly configured in VS Code settings or environment variables
Check Console Logs: Open the VS Code Developer Console (Help > Toggle Developer Tools) to see detailed debug information
Verify API Keys: Ensure your API keys are valid and have the necessary permissions
Restart VS Code: After changing environment variables, restart VS Code completely

Common Issues

Only OpenAI works: Make sure Anthropic and Google AI keys are properly set in either VS Code settings or environment variables
"Missing API key" errors: Verify your configuration in VS Code settings
Environment variables not loading: Restart VS Code after creating/modifying .env files

Introducing Flow

flow.mp4

Flow is a lightweight clone of agentic IDEs like Cursor and Windsurf. Built as a VSCode extension, this project helped me dive deep into understanding the inner workings of AI-powered development environments.

Through building Flow, I gained hands-on experience with the architecture and mechanisms that power modern intelligent IDEs.

To see the cool demo, check it out on YouTube

More Similar Projects on gauravreddy08.github.io

gauravreddy08/flow