Tutorials

Eigene KI-Agents in VS Code erstellen: Der ultimative Guide

Melden

Hier ist ein umfassendes Tutorial, wie du eigene KI-Agents für Visual Studio Code erstellst. In dieser Anleitung konzentrieren wir uns auf die Nutzung des VS Code Extension SDK und der GitHub Copilot Chat API, da dies der Standardweg ist, um Agenten direkt in die IDE zu integrieren.

KI-Agents in VS Code (oft als „Chat Participants“ bezeichnet) sind spezialisierte Erweiterungen, die innerhalb des Copilot-Chats agieren. Sie können Code analysieren, Dateien erstellen, Terminal-Befehle ausführen und komplexe Workflows automatisieren.

1. Voraussetzungen

Bevor du startest, stelle sicher, dass du folgende Tools installiert hast:

  • Node.js (aktuelle LTS-Version)
  • Visual Studio Code
  • GitHub Copilot (aktiviertes Abonnement)
  • Yeoman und den VS Code Extension Generator:
    npm install -g yo generator-code

2. Das Projekt aufsetzen

  1. Öffne dein Terminal und erstelle ein neues Extension-Projekt:

    yo code

  2. Wähle folgende Optionen:

    • Type of extension: New Extension (TypeScript)
    • Name: My-Custom-Agent
    • Identifier: my-custom-agent
    • Description: „Ein eigener KI-Agent für VS Code“
    • Initialize git repository? Yes
    • Package manager: npm (oder pnpm/yarn)

  3. Öffne den neuen Ordner in VS Code.

3. Die Agent-Konfiguration (package.json)

Damit VS Code erkennt, dass deine Erweiterung einen Agenten enthält, musst du ihn in der package.json registrieren. Füge den Bereich contributes hinzu oder erweitere ihn:

"contributes": {
  "chatParticipants": [
    {
      "id": "my-custom-agent.helper",
      "name": "helper",
      "description": "Ein Agent, der mir bei spezifischen Architektur-Entscheidungen hilft.",
      "isSticky": true
    }
  ],
  "commands": [
    {
      "command": "my-custom-agent.clearHistory",
      "title": "Agent-Verlauf löschen"
    }
  ]
}
  • name: Das ist der Name, den Nutzer mit @ im Chat aufrufen (z. B. @helper).
  • isSticky: Bewirkt, dass der Agent aktiv bleibt, nachdem er einmal ausgewählt wurde.

4. Den Agenten programmieren (extension.ts)

Nun implementieren wir die Logik. Öffne src/extension.ts. Der wichtigste Teil ist der chat.createChatParticipant.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    // 1. Erstelle den Chat Participant
    const agent = vscode.chat.createChatParticipant('my-custom-agent.helper', 
    async (request: vscode.ChatRequest, context: vscode.ChatContext, stream: vscode.ChatResponseStream, token: vscode.CancellationToken) => {

        // 2. Zugriff auf das Language Model (z.B. GPT-4o)
        const [model] = await vscode.lm.selectChatModels({ family: 'gpt-4' });

        if (model) {
            // System-Prompt definieren
            const messages = [
                vscode.LanguageModelChatMessage.Assistant(
                    "Du bist ein spezialisierter Software-Architekt. Antworte präzise und hilf beim Strukturieren von Code."
                ),
                vscode.LanguageModelChatMessage.User(request.prompt)
            ];

            // 3. Den Request an das Model senden und streamen
            const chatResponse = await model.sendRequest(messages, {}, token);

            for await (const fragment of chatResponse.text) {
                stream.markdown(fragment);
            }
        }

        return { metadata: { command: 'help' } };
    });

    agent.iconPath = vscode.Uri.joinPath(context.extensionUri, 'agent-icon.png');
}

5. Fortgeschrittene Funktionen: Tools & Slash-Commands

Ein echter Agent soll nicht nur chatten, sondern handeln.

Slash-Commands hinzufügen

In der package.json unter chatParticipants:

"commands": [
  {
    "name": "refactor",
    "description": "Strukturiert den aktuellen Code nach Clean Code Prinzipien um."
  }
]

In der extension.ts kannst du prüfen, welcher Command genutzt wurde:

if (request.command === 'refactor') {
    stream.markdown("Ich analysiere deinen Code für ein Refactoring...");
    // Spezielle Logik hier
}

Zugriff auf den Workspace

Dein Agent kann den aktuellen Code lesen, um Kontext zu erhalten:

const files = await vscode.workspace.findFiles('**/*.ts', '**/node_modules/**', 10);
stream.markdown(`Ich habe ${files.length} TypeScript-Dateien in deinem Projekt gefunden.`);

6. Den Agenten testen

  1. Drücke F5 in VS Code. Ein neues Fenster („Extension Development Host“) öffnet sich.
  2. Öffne den GitHub Copilot Chat (meistens in der Seitenleiste).
  3. Tippe @helper ein.
  4. Stelle eine Frage oder nutze einen Slash-Command wie @helper /refactor.

7. Best Practices für 2026

  • Streaming verwenden: Nutzer hassen es zu warten. Streame die Antwort des LLM immer sofort via stream.markdown().
  • Context-Awareness: Nutze vscode.chat.history, um den Verlauf des Gesprächs einzubeziehen.
  • Sicherheit: Führe niemals zerstörerische Aktionen (z. B. rm -rf) ohne explizite Bestätigung des Nutzers über einen Button in der Chat-Antwort aus.
  • UX: Verwende stream.button(), um dem Nutzer direkt im Chat Interaktionen wie "Code übernehmen" oder "Datei erstellen" anzubieten.

Fazit

Das Erstellen von Custom Agents für VS Code ist durch die native chatParticipant-API sehr zugänglich geworden. Anstatt nur einfache Textantworten zu geben, können diese Agents tief in das Dateisystem und die Befehlsstruktur von VS Code eingreifen, was sie zu mächtigen Begleitern im Entwicklungsalltag macht.

Nächste Schritte: Experimentiere mit der vscode.lm-API, um verschiedene Sprachmodelle für unterschiedliche Aufgaben (z. B. schnelles Feedback vs. komplexe Analyse) zu nutzen.

0