Matte 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
• Agent Mode: Automatic file creation and code modifications

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 AI" in VS Code Extensions
2. Get API Key: Sign up at OpenRouter and get your API key
3. Configure: Open Matte settings and enter your API key
4. Choose Model: Select from available models (Chat GPT is free (up to 50 Requests))

Usage

Basic Chat

1. Click Matte 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
   • Use arrow keys to navigate, Enter/Tab to select
   • 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 (JavaScript, TypeScript, Python, etc.)
2. Matte 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

Models

Choose the right model for your needs:

• OpenAI: GPT-OSS-20B (Free): Excellent for coding, completely free
• Mistral Small 3.2-24B Instruct (Free): Lightweight and efficient for general tasks
• DeepSeek Chat v3.1 (Free): Optimized for conversational AI and code assistance
• Llama 4 Maverick (Free): Advanced reasoning and contextual understanding
• Gemini Pro (Free): Balanced performance for complex workflows

You can change your API key or model anytime in the Matte settings. To explore and pick a model that suits your needs, visit OpenRouter. Once you’ve selected your preferred model, update it in the Matte settings, and you’re ready to go!

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:

1. Type @ in the chat input
2. See available files with file type icons
3. Filter instantly by typing part of the filename
4. Navigate with arrow keys (↑↓)
5. Select with Enter, Tab, or click
6. 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

1. Be Specific: Detailed prompts get better results
2. 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
3. Agent Mode: Enable for faster file operations and automatic code changes
4. Model Selection: Use free models for simple tasks, premium for complex analysis
5. 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: Settings"
• VS Code Settings: Search "Matte"
• 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 settings. Simply navigate to the settings panel, enter your new API key, or select a different model. To explore available models, visit OpenRouter, choose the one that fits your needs, and update it in the settings. It’s that simple!

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)

Transform your coding workflow with intelligent AI assistance. From rapid prototyping to code completion and optimization, Matte AI Assistant adapts to your development needs.