Tutorial: Erstellen eines Chat-Teilnehmers für Code-Tutorials mit der Chat API
In diesem Tutorial lernen Sie, wie Sie eine Visual Studio Code-Erweiterung erstellen, die sich in die GitHub Copilot Chat-Erfahrung integriert. Sie verwenden die Chat-Erweiterungs-API, um einen Chat-Teilnehmer beizusteuern. Ihr Teilnehmer ist ein Code-Tutor, der Erklärungen und Beispielübungen für Programmierkonzepte liefern kann.
Voraussetzungen
Für dieses Tutorial benötigen Sie die folgenden Tools und Konten
Schritt 1: Projekt einrichten
Generieren Sie zuerst das Erweiterungsprojekt mit Yeoman und dem VS Code Extension Generator.
npx --package yo --package generator-code -- yo code
Wählen Sie die folgenden Optionen, um die Einrichtung abzuschließen
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? Code Tutor
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? code-tutor
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
Sobald Ihr Erweiterungsprojekt generiert ist, werden Sie in zwei Dateien arbeiten: extension.ts und package.json, über die Sie in der Dokumentation zur Erweiterungsanatomie mehr erfahren können. Eine kurze Übersicht
extension.tsist der Haupteinstiegspunkt für Ihre Erweiterung und enthält die Logik für Ihren Chat-Teilnehmer.package.jsonenthält die Metadaten für Ihre Erweiterung, wie z. B. den Namen und die Beschreibung Ihres Teilnehmers.
Löschen Sie den automatisch generierten Code in der activate()-Methode von extension.ts. Hier platzieren Sie unsere Logik für unseren Chat-Teilnehmer.
Schritt 2: Registrieren eines Chat-Teilnehmers
Ersetzen Sie im package.json-File den automatisch generierten Abschnitt contributes durch Folgendes
"contributes":{
"chatParticipants": [
{
"id": "chat-tutorial.code-tutor",
"fullName": "Code Tutor",
"name": "tutor",
"description": "What can I teach you?",
"isSticky": true
}
]
}
Dieser Code registriert einen Chat-Teilnehmer mit den folgenden Attributen
- Eindeutige ID
chat-tutorial.code-tutor, auf die im Code verwiesen wird - Vollständiger Name
Code Tutor, der im Titelbereich einer Antwort Ihres Teilnehmers angezeigt wird - Name
tutor, der verwendet wird, um auf den Chat-Teilnehmer im Chat-Fenster als@tutorzu verweisen - Beschreibung "Was kann ich Ihnen beibringen?", die im Chat-Eingabefeld als Platzhaltertext angezeigt wird
Schließlich stellt isSticky: true sicher, dass der Teilnehmername im Chat-Eingabefeld automatisch vorangestellt wird, nachdem der Benutzer mit dem Teilnehmer interagiert hat.
Schritt 3: Erstellen der Eingabeaufforderung
Nachdem der Teilnehmer registriert ist, können Sie mit der Implementierung der Logik für den Code-Tutor beginnen. In der Datei extension.ts definieren Sie eine Eingabeaufforderung für die Anfragen.
Das Erstellen einer guten Eingabeaufforderung ist der Schlüssel, um die besten Ergebnisse von Ihrem Teilnehmer zu erhalten. Schauen Sie sich diesen Artikel für Tipps zur Eingabeaufforderungsentwicklung an.
Ihr Code-Tutor sollte einen realen Tutor nachahmen, indem er den Studenten anleitet, das Konzept zu verstehen, anstatt direkte Antworten zu geben. Darüber hinaus sollte der Tutor auf das Thema fokussiert bleiben und keine Fragen beantworten, die nicht mit Programmierung zu tun haben.
Betrachten Sie die folgenden beiden Eingabeaufforderungen. Welche wird mit größerer Wahrscheinlichkeit das angegebene Verhalten ergeben?
-
Sie sind ein hilfreicher Code-Tutor. Ihre Aufgabe ist es, dem Benutzer einfache Beschreibungen und Beispielcode des Konzepts zu vermitteln.
-
Sie sind ein hilfreicher Code-Tutor. Ihre Aufgabe ist es, dem Benutzer einfache Beschreibungen und Beispielcode des Konzepts zu vermitteln. Antworten Sie mit einem geführten Überblick über das Konzept in einer Reihe von Nachrichten. Geben Sie dem Benutzer nicht direkt die Antwort, sondern leiten Sie ihn an, sie selbst zu finden. Wenn der Benutzer eine nicht-programmierbezogene Frage stellt, lehnen Sie höflich ab zu antworten.
Die zweite Eingabeaufforderung ist spezifischer und gibt dem Teilnehmer eine klare Richtung, wie er antworten soll. Fügen Sie diese Eingabeaufforderung in die Datei extension.ts ein.
const BASE_PROMPT =
'You are a helpful code tutor. Your job is to teach the user with simple descriptions and sample code of the concept. Respond with a guided overview of the concept in a series of messages. Do not give the user the answer directly, but guide them to find the answer themselves. If the user asks a non-programming question, politely decline to respond.';
Schritt 4: Implementieren des Anforderungs-Handlers
Nachdem die Eingabeaufforderung ausgewählt wurde, müssen Sie den Anforderungs-Handler implementieren. Dieser verarbeitet die Chat-Anfrage des Benutzers. Sie definieren den Anforderungs-Handler, führen die Logik zur Verarbeitung der Anfrage aus und geben eine Antwort an den Benutzer zurück.
Definieren Sie zuerst den Handler
// define a chat handler
const handler: vscode.ChatRequestHandler = async (
request: vscode.ChatRequest,
context: vscode.ChatContext,
stream: vscode.ChatResponseStream,
token: vscode.CancellationToken
) => {
return;
};
Innerhalb des Körpers dieses Handlers initialisieren Sie die Eingabeaufforderung und ein messages-Array mit der Eingabeaufforderung. Senden Sie dann ein, was der Benutzer in das Chat-Feld eingegeben hat. Sie können darauf über request.prompt zugreifen.
Senden Sie die Anfrage mit request.model.sendRequest, was die Anfrage mit dem aktuell ausgewählten Modell sendet. Streamen Sie schließlich die Antwort an den Benutzer.
// define a chat handler
const handler: vscode.ChatRequestHandler = async (
request: vscode.ChatRequest,
context: vscode.ChatContext,
stream: vscode.ChatResponseStream,
token: vscode.CancellationToken
) => {
// initialize the prompt
let prompt = BASE_PROMPT;
// initialize the messages array with the prompt
const messages = [vscode.LanguageModelChatMessage.User(prompt)];
// add in the user's message
messages.push(vscode.LanguageModelChatMessage.User(request.prompt));
// send the request
const chatResponse = await request.model.sendRequest(messages, {}, token);
// stream the response
for await (const fragment of chatResponse.text) {
stream.markdown(fragment);
}
return;
};
Schritt 5: Erstellen des Chat-Teilnehmers
Sobald der Handler implementiert ist, besteht der letzte Schritt darin, den Chat-Teilnehmer mithilfe der Methode createChatParticipant der Chat-Erweiterungs-API zu erstellen. Stellen Sie sicher, dass Sie dieselbe ID verwenden, die Sie in package.json verwendet haben.
Sie können Ihren Teilnehmer weiter anpassen, indem Sie ein Symbol dafür hinzufügen. Dies wird im Chat-Fenster angezeigt, wenn Sie mit dem Teilnehmer interagieren.
// define a chat handler
const handler: vscode.ChatRequestHandler = async (
request: vscode.ChatRequest,
context: vscode.ChatContext,
stream: vscode.ChatResponseStream,
token: vscode.CancellationToken
) => {
// initialize the prompt
let prompt = BASE_PROMPT;
// initialize the messages array with the prompt
const messages = [vscode.LanguageModelChatMessage.User(prompt)];
// add in the user's message
messages.push(vscode.LanguageModelChatMessage.User(request.prompt));
// send the request
const chatResponse = await request.model.sendRequest(messages, {}, token);
// stream the response
for await (const fragment of chatResponse.text) {
stream.markdown(fragment);
}
return;
};
// create participant
const tutor = vscode.chat.createChatParticipant('chat-tutorial.code-tutor', handler);
// add icon to participant
tutor.iconPath = vscode.Uri.joinPath(context.extensionUri, 'tutor.jpeg');
Schritt 6: Code ausführen
Sie sind nun bereit, Ihren Chat-Teilnehmer auszuprobieren! Drücken Sie F5, um den Code auszuführen. Ein neues Fenster von VS Code wird mit Ihrem Chat-Teilnehmer geöffnet.
Im Copilot Chat-Bereich können Sie Ihren Teilnehmer nun aufrufen, indem Sie @tutor eingeben!
Testen Sie es, indem Sie eingeben, was Sie lernen möchten. Sie sollten eine Antwort erhalten, die Ihnen einen Überblick über das Konzept gibt!
Wenn Sie eine verwandte Nachricht eingeben, um das Gespräch fortzusetzen, werden Sie feststellen, dass der Teilnehmer keine Folgeantwort basierend auf Ihrem Gespräch gibt. Das liegt daran, dass unser aktueller Teilnehmer nur die aktuelle Nachricht des Benutzers sendet und nicht den Nachrichtenverlauf des Teilnehmers.
Im folgenden Screenshot antwortet der Tutor korrekt mit einer anfänglichen Erklärung von Stacks. Im Anschluss versteht er jedoch nicht, dass der Benutzer das Gespräch fortsetzt, um eine Implementierung von Stacks in Python zu sehen, und gibt stattdessen eine allgemeine Antwort über Python.
Schritt 7: Hinzufügen des Nachrichtenverlaufs für mehr Kontext
Einer der größten Vorteile von Copilot Chat ist die Möglichkeit, mehrere Nachrichten zu durchlaufen, um die beste Antwort zu erhalten. Dazu möchten Sie den Nachrichtenverlauf des Teilnehmers an die Chat-Anfrage senden. Sie können darauf über context.history zugreifen.
Sie müssen diesen Verlauf abrufen und ihn dem messages-Array hinzufügen. Dies müssen Sie tun, bevor request.prompt hinzugefügt wird.
// define a chat handler
const handler: vscode.ChatRequestHandler = async (
request: vscode.ChatRequest,
context: vscode.ChatContext,
stream: vscode.ChatResponseStream,
token: vscode.CancellationToken
) => {
// initialize the prompt
let prompt = BASE_PROMPT;
// initialize the messages array with the prompt
const messages = [vscode.LanguageModelChatMessage.User(prompt)];
// get all the previous participant messages
const previousMessages = context.history.filter(
h => h instanceof vscode.ChatResponseTurn
);
// add the previous messages to the messages array
previousMessages.forEach(m => {
let fullMessage = '';
m.response.forEach(r => {
const mdPart = r as vscode.ChatResponseMarkdownPart;
fullMessage += mdPart.value.value;
});
messages.push(vscode.LanguageModelChatMessage.Assistant(fullMessage));
});
// add in the user's message
messages.push(vscode.LanguageModelChatMessage.User(request.prompt));
// send the request
const chatResponse = await request.model.sendRequest(messages, {}, token);
// stream the response
for await (const fragment of chatResponse.text) {
stream.markdown(fragment);
}
return;
};
Wenn Sie nun den Code ausführen, können Sie ein Gespräch mit Ihrem Teilnehmer führen, mit dem gesamten Kontext der vorherigen Nachrichten! Im folgenden Screenshot versteht der Teilnehmer korrekt, dass der Benutzer die Implementierung von Stacks in Python anfordert.
Schritt 8: Hinzufügen eines Befehls
Nachdem der Basisteilnehmer implementiert ist, können Sie ihn durch Hinzufügen eines Befehls erweitern. Befehle sind eine Kurzschreibweise für häufige Benutzerabsichten und werden durch das /-Symbol gekennzeichnet. Die Erweiterung kann dann den Befehl verwenden, um das Sprachmodell entsprechend aufzufordern.
Es wäre großartig, einen Befehl hinzuzufügen, um Ihren Tutor aufzufordern, eine Übung für ein Konzept zu geben. Sie müssen den Befehl in der Datei package.json registrieren und die Logik in extension.ts implementieren. Sie können den Befehl exercise nennen, damit er durch Eingabe von /exercise aufgerufen werden kann.
Fügen Sie in package.json die Eigenschaft commands zur Eigenschaft chatParticipants hinzu. Hier geben Sie den Namen des Befehls und eine kurze Beschreibung an
"contributes": {
"chatParticipants": [
{
"id": "chat-tutorial.code-tutor",
"fullName": "Code Tutor",
"name": "tutor",
"description": "What can I teach you?",
"isSticky": true,
"commands": [
{
"name": "exercise",
"description": "Provide exercises to practice a concept."
}
]
}
]
},
Um die Logik zum Abrufen von Beispielübungen vom Tutor zu implementieren, ändern Sie am einfachsten die Eingabeaufforderung, die Sie an die Anfrage senden. Erstellen Sie eine neue Eingabeaufforderung, EXERCISES_PROMPT, die den Teilnehmer auffordert, Beispielübungen zurückzugeben. Hier ist ein Beispiel, wie das aussehen könnte
const EXERCISES_PROMPT =
'You are a helpful tutor. Your job is to teach the user with fun, simple exercises that they can complete in the editor. Your exercises should start simple and get more complex as the user progresses. Move one concept at a time, and do not move on to the next concept until the user provides the correct answer. Give hints in your exercises to help the user learn. If the user is stuck, you can provide the answer and explain why it is the answer. If the user asks a non-programming question, politely decline to respond.';
Im Anforderungs-Handler müssen Sie dann Logik hinzufügen, um zu erkennen, dass der Benutzer den Befehl referenziert hat. Dies können Sie über die Eigenschaft request.command tun.
Wenn der Befehl referenziert wird, aktualisieren Sie die Eingabeaufforderung auf die neu erstellte EXERCISES_PROMPT
// define a chat handler
const handler: vscode.ChatRequestHandler = async (
request: vscode.ChatRequest,
context: vscode.ChatContext,
stream: vscode.ChatResponseStream,
token: vscode.CancellationToken
) => {
// initialize the prompt
let prompt = BASE_PROMPT;
if (request.command === 'exercise') {
prompt = EXERCISES_PROMPT;
}
// initialize the messages array with the prompt
const messages = [vscode.LanguageModelChatMessage.User(prompt)];
// get all the previous participant messages
const previousMessages = context.history.filter(
h => h instanceof vscode.ChatResponseTurn
);
// add the previous messages to the messages array
previousMessages.forEach(m => {
let fullMessage = '';
m.response.forEach(r => {
const mdPart = r as vscode.ChatResponseMarkdownPart;
fullMessage += mdPart.value.value;
});
messages.push(vscode.LanguageModelChatMessage.Assistant(fullMessage));
});
// add in the user's message
messages.push(vscode.LanguageModelChatMessage.User(request.prompt));
// send the request
const chatResponse = await request.model.sendRequest(messages, {}, token);
// stream the response
for await (const fragment of chatResponse.text) {
stream.markdown(fragment);
}
return;
};
Und das ist alles, was hinzugefügt werden muss! Der Rest der Logik zum Abrufen des Nachrichtenverlaufs, zum Senden der Anfrage und zum Streamen der Anfrage bleibt gleich.
Jetzt können Sie /exercise eingeben, wodurch Ihr Chat-Teilnehmer aufgerufen wird, und Sie erhalten interaktive Übungen zum Üben des Programmierens!
Nächste Schritte
Herzlichen Glückwunsch! Sie haben erfolgreich einen Chat-Teilnehmer erstellt, der Erklärungen und Beispielübungen für Programmierkonzepte bereitstellen kann. Sie können Ihren Teilnehmer weiter erweitern, indem Sie die Eingabeaufforderungen verfeinern, weitere Schrägstrich-Befehle hinzufügen oder andere APIs wie die Language Model API nutzen. Sobald Sie fertig sind, können Sie Ihre Erweiterung auch im Visual Studio Code Marketplace veröffentlichen.
Den vollständigen Quellcode für dieses Tutorial finden Sie im Repository vscode-extensions-sample.