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 дней после публикации. Расскажите о своем проекте — мы предложим оптимальную архитектуру расширения.

Практический разбор LLM: fine-tuning, RAG, агенты, деплой

Модель GPT‑4 или Claude 3.5 Sonnet через публичное API — не решение, а просто инструмент. Когда приходит требование «сделать как ChatGPT, но на наших данных», за ним стоит реальная инженерная задача: от настройки промптов до обучения 70B‑модели на собственной инфраструктуре. Разработка решений на базе LLM под ключ — это сложный стек, и мы занимаемся этим более 5 лет. За это время реализовано свыше 20 проектов в области генеративного AI: от RAG‑систем для юридических департаментов до кастомных агентов для техподдержки. Где именно находится ваша задача — зависит от данных, latency‑требований, бюджета и того, насколько критична конфиденциальность.

Типичная ситуация: клиент уже попробовал ChatGPT, но результаты нестабильны — то отвечает точно, то галлюцинирует. Либо нужна интеграция в корпоративный портал с соблюдением политик безопасности. Разберём каждый слой стека в деталях — от RAG до production‑деплоя.

Почему RAG‑системы ломаются и как это исправить?

RAG (Retrieval‑Augmented Generation) выглядит просто: нашли релевантные документы, положили в контекст, модель ответила. На практике сбоит в нескольких местах.

Chunking без перекрытия. Классическая ошибка: chunk_size=512, overlap=0. Если ответ лежит на границе двух чанков, retrieval не найдёт ни одного с достаточной уверенностью. Решение: overlap 15–25% от chunk_size, а лучше sentence‑aware splitting через spaCy или NLTK, а не наивное разбиение по символам.

Плохой embedder. Текст‑embedding‑ada‑002 — хорош для общего случая, но на юридических или медицинских текстах проигрывает специализированным моделям: E5‑large‑v2, BGE‑M3 или fine‑tuned sentence‑transformers на доменных данных. Разница в Recall@5 может составлять 15–25%.

Отсутствие re‑ranking. Векторный поиск оптимизирован по скорости, не по релевантности. Cross‑encoder re‑ranker (ms‑marco‑MiniLM‑L‑6‑v2, bge‑reranker‑large) после первичного retrieval поднимает точность топ‑3 при приемлемой задержке (+50–150 ms). Это часто важнее улучшения embedding‑модели.

Гибридный поиск. Только dense векторы плохо работают на точных запросах: имена, артикулы, коды. BM25 (sparse) хорошо находит точные совпадения, но не понимает семантику. Гибрид через RRF (Reciprocal Rank Fusion) — оптимальный компромисс. Qdrant, Weaviate и pgvector 0.7+ поддерживают гибридный поиск нативно.

Когда стоит fine‑tune, а не промпт‑инжиниринг?

Промпт‑инжиниринг решает ~70% задач адаптации LLM под домен. Оставшиеся 30% требуют дообучения. Три признака: модель игнорирует специфический формат вывода даже при детальном описании в промпте; задача требует глубокого знания специализированной лексики (медицина, право); нужно значительно снизить затраты на токены, заменив большую модель меньшей специализированной.

LoRA и QLoRA — стандарт для SFT. LoRA добавляет trainable low‑rank матрицы к attention‑слоям. Типичная конфигурация для Llama‑3 8B: r=64, lora_alpha=128, target_modules=["q_proj","v_proj","k_proj","o_proj"] — обучаемых параметров ~0.8%, обучение на одной A100 40GB. QLoRA добавляет 4‑битную квантизацию (NF4) и позволяет fine‑tune 70B модель на двух A100 40GB, хотя скорость падает вдвое по сравнению с bf16.

DPO вместо RLHF. Direct Preference Optimization требует только пары (chosen, rejected), а не скалярные reward‑сигналы. DPOTrainer из библиотеки trl (Hugging Face) реализует это несколькими десятками строк.

Типичная ошибка. Датасет из 500 примеров, 5 эпох, validation loss 0.8 — кажется норм. Но на тесте модель деградировала на общих инструкциях. Причина: catastrophic forgetting. Решение — добавить 10–20% общих instruction‑following примеров (Alpaca, FLAN) в обучающую выборку, чтобы не разрушить исходные способности.

Как выбрать базовую модель: 8B или 70B?

Для большинства задач fine‑tuning 8B модели достаточно. 70B нужен, когда требуется глубокое рассуждение или baseline 8B не достигает нужного качества даже после дообучения. Стоимость инференса Llama‑3 8B через vLLM на A100 — около $0.001/1K токенов, что в 15 раз дешевле GPT‑4.

Что даёт PagedAttention в production?

vLLM — первый выбор для serving open‑source моделей. PagedAttention — ключевое техническое решение: KV‑cache управляется как virtual memory в ОС, без фрагментации. Это даёт throughput в 2–4 раза выше по сравнению с наивным HuggingFace Transformers inference. Документация vLLM подтверждает: continuous batching и PagedAttention — стандарт для высоконагруженных LLM‑сервисов.

Типичные числа на A100 80GB для Llama‑3 8B (bf16): 400–600 req/s, P50 latency 200–400ms, P99 latency 600–900ms при concurrency 64. Для 70B на двух A100 с tensor parallelism: 80–120 req/s, P99 latency 1.5–2.5s. Квантизация AWQ или GPTQ снижает потребление памяти в 2 раза при потере качества в пределах 1–3%.

Мультиагентные системы

Агенты — LLM с доступом к инструментам: поиск, выполнение кода, запросы к API, работа с БД. Основные паттерны:

• ReAct (Reason + Act): модель рассуждает → выбирает инструмент → наблюдает результат → снова рассуждает. LangChain и LlamaIndex реализуют из коробки.
• Multi‑agent orchestration: несколько специализированных агентов с координатором сверху. Пример: coordinator → researcher (поиск + summarization) → coder (генерация и исполнение кода) → critic (проверка). Инструменты: AutoGen (Microsoft), CrewAI, кастомная реализация на LangGraph.

В продакшене агентные системы недетерминированы. Обязательные guardrails, лимиты шагов, логирование каждого шага, human‑in‑the‑loop для критических действий.

Как мы работаем: этапы, сроки, результат

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

Мы передаём:

• Техническую документацию (model card, конфиги, инструкции по развёртыванию)
• Доступ к инфраструктуре (репозиторий с кодом, обученные веса)
• 1 месяц поддержки после деплоя (консультации, правки по багам)
• Обучение команды заказчика (2–3 занятия по эксплуатации системы)

Сроки: базовый RAG‑прототип — 1–2 недели. Fine‑tuning с данными заказчика — 3–6 недель (с учётом подготовки данных). Production‑система с мониторингом и переобучением — 2–4 месяца. Стоимость рассчитывается индивидуально, зависит от объёма данных, сложности модели и требований к инфраструктуре.

Хотите оценить свой проект? Оставьте заявку — мы подготовим предварительное резюме за 1–2 рабочих дня. Или получите консультацию по выбору подхода: RAG, fine‑tuning или гибрид — расскажем, что подойдёт именно вам.