AI-расширения для VS Code: разработка под ключ с интеграцией LLM

Разработчики тратят часы на поиск в документации и написание шаблонного кода. Наше AI-расширение встраивается прямо в редактор и ускоряет рутинные задачи в 2–3 раза. За 5 лет мы разработали более 20 инструментов с интеграцией LLM — от простого автодополнения до полноценных чат-панелей с контекстом проекта. Интеграция с API Anthropic и OpenAI позволяет гибко выбирать модель под задачу, а стриминг через client.messages.stream() даёт первые токены за 200–300 мс. Средняя стоимость одного объяснения кода через Claude Haiku — около $0.25, а генерация тестов через GPT-4o mini — $0.15 за 1K токенов.

Одна из частых проблем — задержка при генерации. Мы используем стриминг, первые токены появляются за 200–300 мс. P99 latency для коротких запросов — менее 1.5 с. Чтобы снизить галлюцинации, добавляем контекст из активного файла и few-shot примеры — это уменьшает число неверных подсказок на 40%. В результате разработчик получает релевантные предложения без необходимости перепроверять каждое. Экономия времени позволяет сократить затраты на разработку на 30–50%.

Какие проблемы решаем?

• Задержки при генерации — модели с низкой задержкой (Claude Haiku, GPT-4o mini), стриминг и debounce 300 мс.
• Галлюцинации — контекст проекта, few-shot, кастомные промпты под ваш стек (Django, React, FastAPI).
• Интеграция с Extension API — типовые ошибки: пропущенный cleanup в deactivate(), утечки в WebView. Мы прорабатываем это на код-ревью.
• Публикация в Marketplace — подготовка иконок, описание, тестирование на разных версиях VS Code (1–2 дня).

Как мы это делаем?

Стек: TypeScript, VS Code Extension API, Anthropic SDK / OpenAI SDK. Для inline completion используем InlineCompletionItemProvider, для чата — WebView с acquireVsCodeApi(). Все вызовы LLM асинхронные, с повторными попытками при таймаутах. Ниже — сравнение моделей для разных задач.

VS Code Extension API предоставляет богатые возможности для интеграции AI-сервисов. Документация

{ "aiAssistant.model": "gpt-4o-mini", "aiAssistant.apiKey": "sk-..." } 

Почему кастомное расширение лучше готового?

Готовые решения из Marketplace часто не знают специфику вашего стека. Мы настраиваем промпты под ваши библиотеки и добавляем code actions для конкретных ошибок. Например, расширение может автоматически предлагать try/except для блоков с риском исключений. Это сокращает время код-ревью в 2–3 раза.

Что входит в работу?

• Исходный код расширения с документацией.
• Интеграция с вашей LLM (бесплатные ключи не предоставляем).
• Настройка CI/CD для публикации.
• Поддержка в течение 1 месяца после сдачи.

Как устроен провайдер inline completion?

Провайдер реализует интерфейс InlineCompletionItemProvider. При каждом вводе символа отправляется запрос к LLM с контекстом текущего файла. Мы используем debounce 300 мс и кэшируем результаты для одинаковых контекстов. Это позволяет держать latency p99 ниже 1.5 с.

Структура расширения

Код ниже — конфигурация для четырёх команд и code actions.

{ "name": "ai-dev-assistant", "displayName": "AI Dev Assistant", "engines": { "vscode": "^1.85.0" }, "activationEvents": ["onStartupFinished"], "contributes": { "commands": [ { "command": "aiAssistant.explainCode", "title": "AI: Explain Code" }, { "command": "aiAssistant.refactor", "title": "AI: Refactor Selection" }, { "command": "aiAssistant.generateTests", "title": "AI: Generate Tests" }, { "command": "aiAssistant.openChat", "title": "AI: Open Chat" } ], "keybindings": [ { "command": "aiAssistant.explainCode", "key": "ctrl+shift+e", "when": "editorTextFocus" } ], "configuration": { "title": "AI Assistant", "properties": { "aiAssistant.apiKey": { "type": "string", "description": "Anthropic API Key" }, "aiAssistant.model": { "type": "string", "default": "claude-haiku-4-5", "enum": ["claude-haiku-4-5", "claude-sonnet-4-5"] } } } }, "main": "./out/extension.js" } 

Основной файл расширения

import * as vscode from 'vscode'; import Anthropic from '@anthropic-ai/sdk'; let client: Anthropic; export function activate(context: vscode.ExtensionContext) { const config = vscode.workspace.getConfiguration('aiAssistant'); client = new Anthropic({ apiKey: config.get('apiKey') || '' }); context.subscriptions.push( vscode.commands.registerCommand('aiAssistant.explainCode', explainSelectedCode) ); // ... другие команды } async function explainSelectedCode() { const editor = vscode.window.activeTextEditor; if (!editor) return; const selection = editor.selection; const selectedText = editor.document.getText(selection); if (!selectedText) { vscode.window.showWarningMessage('Выберите код для объяснения'); return; } await vscode.window.withProgress( { location: vscode.ProgressLocation.Notification, title: 'AI анализирует код...' }, async () => { const response = await client.messages.create({ model: 'claude-haiku-4-5', max_tokens: 1024, messages: [{ role: 'user', content: `Объясни этот код кратко и понятно:\n\`\`\`\n${selectedText}\n\`\`\`` }] }); const explanation = response.content[0].type === 'text' ? response.content[0].text : ''; const outputChannel = vscode.window.createOutputChannel('AI Assistant'); outputChannel.appendLine('=== AI Объяснение ==='); outputChannel.appendLine(explanation); outputChannel.show(); } ); } 

Chat Panel

class ChatPanel { private static currentPanel?: ChatPanel; private readonly panel: vscode.WebviewPanel; static createOrShow(extensionUri: vscode.Uri) { if (ChatPanel.currentPanel) { ChatPanel.currentPanel.panel.reveal(); return; } const panel = vscode.window.createWebviewPanel( 'aiChat', 'AI Chat', vscode.ViewColumn.Beside, { enableScripts: true } ); ChatPanel.currentPanel = new ChatPanel(panel, extensionUri); } constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) { this.panel = panel; this.panel.webview.html = this.getWebviewContent(); this.panel.webview.onDidReceiveMessage(async message => { if (message.type === 'chat') { const stream = await client.messages.stream({ model: 'claude-sonnet-4-5', max_tokens: 2048, messages: message.history, }); for await (const chunk of stream.textStream) { this.panel.webview.postMessage({ type: 'token', text: chunk }); } this.panel.webview.postMessage({ type: 'done' }); } }); } private getWebviewContent(): string { return `<!DOCTYPE html> <html> <head><style>/* styles */</style></head> <body> <div id="messages"></div> <input type="text" id="input" placeholder="Задайте вопрос..." /> <button onclick="sendMessage()">Отправить</button> <script> const vscode = acquireVsCodeApi(); const history = []; function sendMessage() { const input = document.getElementById('input'); history.push({ role: 'user', content: input.value }); vscode.postMessage({ type: 'chat', history }); input.value = ''; } window.addEventListener('message', event => { const msg = event.data; if (msg.type === 'token') { // Append token } }); </script> </body> </html>`; } } 

Code Actions Provider

class AICodeActionProvider implements vscode.CodeActionProvider { provideCodeActions( document: vscode.TextDocument, range: vscode.Range, ): vscode.CodeAction[] { const actions: vscode.CodeAction[] = []; const selectedText = document.getText(range); if (!selectedText) return actions; const explainAction = new vscode.CodeAction('AI: Объяснить', vscode.CodeActionKind.RefactorRewrite); explainAction.command = { command: 'aiAssistant.explainCode', title: 'Объяснить' }; actions.push(explainAction); return actions; } } 

Процесс работы

1. Аналитика — изучаем ваши сценарии, выбираем модель LLM.
2. Проектирование — проектируем команды, WebView, провайдеры.
3. Разработка — пишем код на TypeScript, настраиваем API-клиенты.
4. Тестирование — тестируем на реальных проектах, замеряем latency.
5. Публикация — публикуем в VS Code Marketplace, настраиваем CI/CD.

Сроки ориентировочно

• Базовые команды (explain, refactor): 3–5 дней.
• Chat panel с WebView: 1 неделя.
• Inline completion provider: 1–2 недели.
• Публикация в Marketplace: 1–2 дня.

Типичные ошибки при самостоятельной разработке

• Использование activate() без вызова context.subscriptions.push() — команды не регистрируются.
• Игнорирование dispose() для WebView — утечка памяти.
• Отсутствие fallback при недоступности API — пользователь видит пустой экран.

Свяжитесь с нами для оценки вашего проекта. Закажите разработку AI-расширения, которое будет работать именно под ваши задачи. Опыт нашей команды — 5 лет, гарантируем качество и поддержку в течение 30 дней после публикации. Расскажите о своем проекте — мы предложим оптимальную архитектуру расширения.