Matte Code AI Assistant

**A streamlined VS Code extension that provides intelligent AI assistance for developers** Focus on what matters: smart code generation, editing, code completion, and agent-powered automation.

🚀 Core Features

🤖 Agent Mode

Toggle between chat mode and agent mode for different workflows:

• Chat Mode: Interactive conversations with AI for guidance and explanations
• Agent Mode: Automatic file creation and code modifications with your permission

💬 Smart Chat Interface

• Clean, responsive chat panel in VS Code sidebar
• Smart File Picker: Type @ to see available files with autocomplete
• File references with @filename syntax for instant context
• Context-aware conversations with file content
• Markdown rendering with syntax highlighting

🔧 Code Operations

• Create Files: Describe what you want, get working code
• Edit Selection: Select code and describe changes needed
• File References: Use @filename to include file context
• Multi-language Support: Works with all major programming languages

⚡ Code Completion

• Smart Snippets: Language-specific code snippets for faster development
• Context-Aware: Avoids providing completions in comments and strings
• Rich Documentation: Snippet previews with syntax highlighting
• Multiple Languages: Support for JavaScript, TypeScript, Python, HTML, CSS, Java, C, and C++

⌨️ Quick Commands

• Ctrl+Alt+M / Cmd+Alt+M: Open chat
• Ctrl+Alt+N / Cmd+Alt+N: Create file
• Ctrl+Alt+E / Cmd+Alt+E: Edit selection
• Ctrl+Alt+A / Cmd+Alt+A: Toggle agent mode
• Code completion is automatically available while typing

🛠️ Setup

1. Install Extension

Search "Matte Code" in VS Code Extensions marketplace or install from VSIX file

2. Get API Key

Sign up at OpenRouter and get your API key

3. Configure

• Open Matte Code settings in VS Code
• Enter your API key
• Choose your preferred model

4. Choose Model

Select from available models:

• Chat GPT (Free up to 50 requests)
• Mistral Small 3.2-24B Instruct (Free)
• DeepSeek Chat v3.1 (Free)
• Llama 4 Maverick (Free)
• Gemini Pro (Free)

📖 Usage

Basic Chat

1. Click Matte Code icon in sidebar or press Ctrl+Alt+M
2. Ask questions, get code help, or request explanations
3. File References: Type @ to see a dropdown of available files
4. Use arrow keys to navigate, Enter/Tab to select
5. Files are automatically included in your conversation context

Agent Mode

1. Toggle agent mode with Ctrl+Alt+A or the button in chat
2. Request file creation: "Create a React component for user login"
3. Agent automatically creates and opens files
4. Edit code by selecting and pressing Ctrl+Alt+E

Code Completion

1. Start typing in any supported language file
2. Matte Code will suggest relevant code snippets based on what you're typing
3. Press Tab to accept a suggestion
4. Snippets include placeholders you can navigate through with Tab
5. Completions are context-aware and won't appear in comments or strings

File Operations

• Create: Ctrl+Alt+N or ask in chat "create a file that..."
• Edit: Select code, press Ctrl+Alt+E, describe changes
• Reference: Use @package.json to include file content in chat

🤖 Available Models

Choose the right model for your needs:

You can change your API key or model anytime in the Matte Code settings. To explore and pick a model that suits your needs, visit OpenRouter.

🔄 Agent Mode vs Chat Mode

Chat Mode (Default)

• Interactive conversations
• Get explanations and suggestions
• Manual code application
• Safe for exploration

Agent Mode (Toggle with Ctrl+Alt+A)

• Automatic file creation and modification
• Direct code editing in your workspace
• Faster workflow for trusted operations
• Use when you want AI to take action

📁 File Picker Feature

Smart @ File References

The enhanced file picker makes referencing files effortless:

• Type @ in the chat input
• See available files with file type icons
• Filter instantly by typing part of the filename
• Navigate with arrow keys (↑↓)
• Select with Enter, Tab, or click
• Multiple files supported in one message

Clean Interface

• Simple file list without visual clutter
• Fast filtering and selection
• Keyboard navigation support
• Responsive design

Smart Filtering

• @app → Shows app.js, app.css, app.config.js
• @test → Shows all test files
• @src/ → Shows files in src directory

💡 Examples

Create a React Component

Agent Mode: "Create a React component for a user profile card with TypeScript"

Edit Existing Code

1. Select code in editor
2. Press Ctrl+Alt+E
3. Type: "Add error handling and loading states"

Code Completion

Type these prefixes in their respective language files to see completions:

• JavaScript/TypeScript: for, if, function, class, try
• Python: def, if, for, class, try
• HTML: div, form, table
• CSS: flex, grid, media

Each snippet includes helpful placeholders and documentation.

Reference Files in Chat

@src/utils.js @package.json
How can I optimize the utility functions and update dependencies?

Smart File Picker

• Type @ and see available files instantly
• Filter by typing: @util shows all files containing "util"
• Navigate with arrow keys, select with Enter or Tab
• Supports nested directories: @src/components/Button.tsx

File Creation Examples

• "Create a Python script that connects to PostgreSQL"
• "Make a CSS file for a responsive navigation bar"
• "Generate a Node.js Express server with authentication"
• "Create a TypeScript interface for user data"

💡 Tips

Be Specific

Detailed prompts get better results

Smart File References

• Type @ to see all available files with icons
• Reference multiple files: @package.json @src/app.js @README.md
• Files are automatically included with syntax highlighting

Agent Mode

Enable for faster file operations and automatic code changes

Model Selection

Use free models for simple tasks, premium for complex analysis

Keyboard Shortcuts

• Enter to send (Shift+Enter for new line)
• Arrow keys to navigate file picker
• Escape to close file picker

⚙️ Configuration

Access settings via:

• Command Palette: "Matte Code: Settings"
• VS Code Settings: Search "Matte Code"
• Chat panel: Click gear icon

Required Settings

• OpenRouter API Key
• Model selection

Optional Settings

• Agent mode preference
• Code completion (enabled by default)
• Default model

You can update your API key or switch models anytime through the Matte Code settings. Simply navigate to the settings panel, enter your new API key, or select a different model.

🔧 Troubleshooting

API Key Issues

• Verify key is correct in settings
• Check OpenRouter account has credits
• Ensure internet connection

Slow Responses

• Try a faster model like GPT-3.5 Turbo
• Reduce context size
• Check OpenRouter status

Agent Mode Not Working

• Ensure agent mode is enabled
• Check workspace folder is open
• Verify file permissions

Code Completion Issues

• Ensure code completion is enabled in settings
• Restart VS Code if completions don't appear
• Check that you're working in a supported language file

🔒 Privacy & Security

• Code is sent to AI providers via OpenRouter
• No data stored locally by extension
• Review OpenRouter privacy policy
• Avoid sending sensitive data (API keys, passwords)

🏗️ Building from Source

1. Clone this repository
2. Install dependencies: npm install
3. Build the extension: node build.mjs
4. Package the extension: npx vsce package

Project Structure

src/                    # Main extension source code
webview-ui/            # React-based webview UI
proto/                 # Protocol buffer definitions
assets/                # Icons and resources
standalone/            # Standalone runtime files

📄 License

This project is licensed under the Apache-2.0 License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📞 Support

If you encounter any issues or have questions, please open an issue on GitHub.