From 5761556d84db5d7fa8a2c93b83face6a51081fea Mon Sep 17 00:00:00 2001 From: Hitonabi Date: Sun, 21 Jun 2026 19:02:29 +0200 Subject: [PATCH] feat(guide+verbinden): Agenten/Skills/MCP als Dummy-Leitfaden + Quote-Bug fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Guide: tiefe Einsteiger-Abschnitte "Was ist ein Agent (und wann)", "Was sind Skills (Quellen + Installation)", "MCP — Werkzeuge geben"; Konzept-Karten Agent/MCP/Skills geschaerft + "Rules/Commands"-Karte - Verbinden: Hinweis verlinkt zum Guide (Agent/Skill/MCP von Grund auf) - FIX: MCP-Konzeptkarte hatte ein ASCII-`"` in einem doppelt-gequoteten String -> String brach vorzeitig ab, guides.js parste nicht -> die GANZE Mount-Kette stand (Modelle/Verbinden/Guide leer). Im Text statt Anfuehrungszeichen "Anschluss". Hinweis: `node --check x.js` parst lax als CommonJS und uebersah den Fehler; erst ein erzwungener ESM-Parse (.mjs) bzw. der Browser deckte ihn auf. Co-Authored-By: Claude Opus 4.8 --- static/js/panels/connect.js | 4 +- static/js/panels/guides.js | 77 ++++++++++++++++++++++++++++++++----- 2 files changed, 70 insertions(+), 11 deletions(-) diff --git a/static/js/panels/connect.js b/static/js/panels/connect.js index 8ce67d7..55cca81 100644 --- a/static/js/panels/connect.js +++ b/static/js/panels/connect.js @@ -93,7 +93,9 @@ function render() { ${toolRow("OpenCode", "Beliebtester Open-Source-Coding-Agent (MIT) — Terminal, Desktop & IDE.", "https://opencode.ai", "Empfohlen")} ${toolRow("Cline", "Bestes Erlebnis in VS Code, Bring-Your-Own-Key, Mensch-im-Loop.", "https://cline.bot")} ${toolRow("Continue.dev", "Feinkörnige Kontrolle + bestes MCP-Ökosystem für Werkzeuge.", "https://continue.dev")} -
MCP gibt Agenten zusätzliche Werkzeuge (Web durchsuchen, Dateien, Tools). Continue & Cline unterstützen MCP — mehr dazu im Guide.
+
Diese Tools sind Agenten: Sie lassen dein Modell selbst Dateien ändern und Befehle ausführen. + Noch unklar, was Agent, Skill oder MCP heißt? + Im Guide von Grund auf erklärt →
diff --git a/static/js/panels/guides.js b/static/js/panels/guides.js index 99058f5..e2b3c5c 100644 --- a/static/js/panels/guides.js +++ b/static/js/panels/guides.js @@ -30,15 +30,71 @@ const TUTORIALS = [
  • Kontext vergrößern: Tab Modelle → Konfigurieren → wir zeigen das Optimum für deine Hardware (mehr Kontext = mehr Speicherbedarf).
    • `], - ["Brauche ich überhaupt einen Agenten?", ` -

    Kommt drauf an, was du willst:

    + ["Was ist ein Agent — und wann brauche ich einen?", ` +

    Ein nacktes Modell schreibt nur Text zurück. Ein Agent ist ein Programm drumherum, + das das Modell handeln lässt: Dateien lesen und ändern, Befehle ausführen, im Web suchen — + Schritt für Schritt in einer Schleife, bis die Aufgabe erledigt ist.

    +

    Bild dazu: Reiner Chat = du fragst einen Experten und tippst seine Antwort selbst ab. + Agent = der Experte sitzt an deinem PC und macht es selbst — du schaust zu und bestätigst.

    +

    Wann lohnt sich was?

      -
    • Nur chatten / Fragen stellen: Nein — eine Chat-Oberfläche wie OpenWebUI reicht.
      • -
    • Coden, wo die KI selbst Dateien liest/ändert und Befehle ausführt: Ja — dafür gibt es - Agenten wie OpenCode oder Cline.
      • +
    • Fragen, Texte, Erklärungen, Brainstorming → kein Agent nötig, eine Chat-Oberfläche + wie OpenWebUI reicht völlig.
      • +
    • Coden über mehrere Dateien, Befehle ausführen, recherchieren + umsetzen, automatisieren + → Agent (OpenCode, Cline, Continue).
    -

    Das Gute: Diese Agenten laufen lokal auf deinem PC und reden mit deinem lokalen Modell. - Du brauchst keinen Cloud-Agenten — die „empfohlenen Tools" SIND die Agenten.

    `], +

    So arbeitest du damit: Du beschreibst ein Ziel in Worten („baue Feature X", „finde den + Bug in dieser Datei"). Der Agent macht sich einen Plan und arbeitet ihn ab; heikle Schritte bestätigst + du. Lass ihn am besten in einem Projektordner mit Git arbeiten — dann ist jede Änderung + nachvollziehbar und rückgängig zu machen.

    +

    Gut zu wissen: Diese Agenten laufen lokal auf deinem PC und reden mit deinem lokalen + Modell. Du brauchst keinen Cloud-Dienst — die „empfohlenen Tools" im Tab Verbinden SIND + die Agenten.

    `], + ["Was sind Skills — und wie installiere ich sie?", ` +

    Ein Skill ist verpacktes Können: eine kurze Anleitung (oft + ein paar Hilfsskripte), + die dem Agenten beibringt, eine wiederkehrende Aufgabe jedes Mal so zu erledigen, wie du + es willst. Stell es dir wie ein Rezept oder eine Arbeitsanweisung vor, die der Agent liest, sobald sie passt.

    +

    Skill vs. MCP — nicht verwechseln: MCP gibt dem Agenten neue Werkzeuge (Aktionen, + z.B. „auf eine Datenbank zugreifen"). Skills geben ihm Know-how (wie er etwas gut macht) + mit den Werkzeugen, die er schon hat. Kurz: Werkzeuge = MCP, Anleitungen = Skills.

    +

    Wofür gut?

    +
      +
    • Einheitlichkeit: „Commit-Nachrichten immer in diesem Format", „unsere Komponenten sehen so aus".
      • +
    • Wiederholung sparen: du musst denselben Kontext nicht jedes Mal neu erklären.
      • +
    • Wissen festhalten: „so testen wir", „so wird ein Changelog geschrieben", Fach-Workflows.
      • +
    +

    In deinen Tools heißt das konkret:

    +
      +
    • OpenCode: Projektregeln in einer AGENTS.md + eigene Befehle (Commands).
      • +
    • Cline: Regeln als .clinerules + „Workflows".
      • +
    • Continue: „Rules" + „Prompts".
      • +
    • Offener Standard „Agent Skills": ein Ordner mit einer SKILL.md (Beschreibung + + Anleitung, optional Skripte) — zunehmend von mehreren Tools unterstützt.
      • +
    +

    Installieren = meist nur eine Datei/einen Ordner ablegen (kein Build, kein Neustart-Zauber):

    +
      +
    1. Pro Projekt: die Datei in den Projektordner legen (z.B. AGENTS.md, + .clinerules/) — gilt nur für dieses Projekt.
      2. +
    2. Global: in den Konfig-Ordner des Tools — gilt überall. Das Tool liest es beim nächsten Start.
      3. +
    +

    Beste Quellen: zuerst die Doku deines Tools (OpenCode/Cline/Continue) — am verlässlichsten. + Dann „awesome"-Listen auf GitHub (z.B. awesome-claude-skills, awesome-mcp-servers) und + die quelloffenen Anthropic-Skills als Vorlagen, um das Format zu lernen.

    +

    Für lokale Modelle wichtig: Skills sind nur Text-Anleitungen + und funktionieren mit jedem Modell — aber kleinere lokale Modelle befolgen komplexe Skills weniger + zuverlässig als große. Halte sie kurz, klar und konkret.

    `], + ["MCP — deinem Agenten echte Werkzeuge geben", ` +

    MCP (Model Context Protocol) ist ein einheitlicher „Stecker", über den ein Agent zusätzliche + Werkzeuge bekommt: das Web durchsuchen, Dateien lesen, eine Datenbank abfragen, GitHub bedienen … + Ohne MCP kann das Modell nur reden; mit MCP kann es etwas tun.

    +

    So nutzt du es: Du fügst in deinem Agenten einen „MCP-Server" hinzu (eine kleine Zeile in der + Konfiguration je Werkzeug). Danach entscheidet der Agent selbst, wann er das Werkzeug einsetzt.

    +
      +
    • Unterstützt: Cline und Continue haben das beste MCP-Ökosystem; viele fertige Server gibt es + auf GitHub (Suchbegriff awesome-mcp-servers).
      • +
    • Faustregel: Fehlt dem Agenten eine Fähigkeit (z.B. Web-Zugriff) → MCP. Soll er etwas + nur besser/einheitlicher machen → Skill.
      • +
    `], ["Auto-Swap — wie das Laden funktioniert", `

    llama-swap lädt automatisch das Modell, das gerade angefragt wird, und entlädt es nach einer Leerlaufzeit wieder (oder wenn du ein anderes anfragst). Es läuft immer nur eines gleichzeitig.

    @@ -60,9 +116,10 @@ const CONCEPTS = [ ["Quantisierung (Q4_K_M)", "Verkleinert ein Modell (16-Bit → 4-Bit), damit es in den Speicher passt — bei kaum Qualitätsverlust. Q4_K_M ist der beliebte Sweetspot."], ["Kontextfenster", "Das Kurzzeitgedächtnis: wie viel Text sich das Modell gleichzeitig merkt. Größer = mehr Überblick, mehr Speicher, etwas langsamer."], ["Auto-Swap", "llama-swap lädt/entlädt Modelle automatisch — immer nur eins gleichzeitig. Du managst nichts."], - ["Agent", "Ein Programm (OpenCode, Cline), das die KI selbstständig Aufgaben erledigen lässt: Dateien lesen/schreiben, Befehle ausführen, planen."], - ["MCP", "Model Context Protocol — gibt einem Agenten zusätzliche Werkzeuge (Web durchsuchen, Dateien, Tools). Macht aus dem Textmodell einen echten Helfer."], - ["Skills", "Vorgefertigte Fähigkeiten/Anleitungen, die ein Agent für wiederkehrende Aufgaben nutzt."], + ["Agent", "Ein Programm (OpenCode, Cline, Continue), das das Modell handeln lässt — Dateien lesen/ändern, Befehle ausführen, planen, im Loop bis die Aufgabe erledigt ist. Reiner Chat schreibt nur Text zurück."], + ["MCP", "Model Context Protocol — der Anschluss, über den ein Agent zusätzliche Werkzeuge bekommt (Web, Dateien, Datenbank). MCP = Werkzeuge."], + ["Skills", "Verpackte Anleitung für wiederkehrende Aufgaben — der Agent liest sie und macht es jedes Mal wie du willst. Skills = Anleitungen (das Gegenstück zu MCP-Werkzeugen)."], + ["Rules / Commands", "Die konkrete Form von Skills je Tool: AGENTS.md (OpenCode), .clinerules (Cline), Rules/Prompts (Continue) — eine Datei im Projekt- oder Konfig-Ordner."], ]; function mount() {