Agentic Workflow DesignDemo-Übersicht vom 2. Juli 2026

RFC3339-Date MCP

Ausführliche Kursseite zum MCP von rfc3339.date mit Streamable HTTP, Tools, JSON-RPC-Fluss und Codex-/Claude-Nutzung.

Prompt
Erstelle bitte in agentic-workflow-design einen Unterordner für rfc3339, erstelle darin eine ausführliche HTML-Seite, die den MCP von rfc3339.date (~/dev/web/rfc3339-date) erklärt. Geh auf Besonderheiten von MCP ein und was damit alles möglich ist. Inklusive einer Erklärung, wie es in Codex und Claude genutzt werden kann.

Nachtrag: Umlaute bitte als echte Umlaute: ae -> ä, oe -> ö, etc.
Antwort
Ergebnis: statische HTML-Seite unter rfc3339/index.html plus Regressionstest. Die Seite erklärt MCP allgemein, den konkreten rfc3339.date-MCP mit Server Card, /mcp, Toolliste, JSON-RPC-Ablauf, read-only Tools, Streamable HTTP, Origin-Regeln und Beispielkonfigurationen für Codex und Claude. Tests liefen grün.

Ergebnis

HTML anzeigen
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>rfc3339.date MCP - Agentic Workflow Design</title>
    <style>
      :root {
        --bg: #f4f7f6;
        --surface: #ffffff;
        --surface-soft: #eef4f2;
        --ink: #17201d;
        --muted: #5c6b66;
        --line: #d7e2de;
        --accent: #0d746d;
        --accent-dark: #07524e;
        --blue: #315f8b;
        --blue-soft: #e5eef7;
        --amber: #9a6508;
        --amber-soft: #fff1d1;
        --rose: #9b4058;
        --rose-soft: #f8e4e9;
        --code: #10201e;
        --shadow: 0 18px 48px rgba(27, 45, 40, 0.1);
        --radius: 8px;
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-size: 16px;
        line-height: 1.58;
        letter-spacing: 0;
      }

      a {
        color: var(--accent-dark);
      }

      h1,
      h2,
      h3,
      p {
        margin: 0;
      }

      code,
      pre {
        font-family:
          "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      }

      .shell {
        width: min(1160px, calc(100% - 40px));
        margin: 0 auto;
      }

      .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid rgba(23, 32, 29, 0.12);
        background: rgba(244, 247, 246, 0.93);
        backdrop-filter: blur(14px);
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        min-height: 68px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-weight: 760;
        color: var(--ink);
        text-decoration: none;
      }

      .mark {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: var(--radius);
        background: var(--accent);
        color: #ffffff;
        font-weight: 820;
        box-shadow: 0 10px 26px rgba(13, 116, 109, 0.22);
      }

      .navlinks {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        color: var(--muted);
        font-size: 14px;
      }

      .navlinks a {
        color: inherit;
        text-decoration: none;
      }

      .navlinks a:hover {
        color: var(--ink);
      }

      .hero {
        padding: 72px 0 42px;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(330px, 0.74fr);
        gap: 42px;
        align-items: stretch;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
        color: var(--accent-dark);
        font-size: 14px;
        font-weight: 760;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
      }

      h1 {
        max-width: 850px;
        font-size: clamp(42px, 7vw, 76px);
        line-height: 0.98;
        font-weight: 820;
      }

      .lead {
        max-width: 770px;
        margin-top: 24px;
        color: #43524d;
        font-size: 20px;
        line-height: 1.55;
      }

      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 32px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 17px;
        border: 1px solid var(--accent);
        border-radius: 7px;
        background: var(--accent);
        color: #ffffff;
        font-size: 14px;
        font-weight: 720;
        text-decoration: none;
      }

      .button.secondary {
        border-color: var(--line);
        background: var(--surface);
        color: var(--ink);
      }

      .summary-panel {
        display: grid;
        gap: 14px;
        align-content: start;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .summary-panel h2 {
        font-size: 18px;
      }

      .fact-list {
        display: grid;
        gap: 10px;
      }

      .fact {
        display: grid;
        grid-template-columns: 112px 1fr;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
      }

      .fact strong {
        color: var(--muted);
        font-size: 13px;
        font-weight: 720;
        text-transform: uppercase;
      }

      .fact span {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .section {
        padding: 36px 0;
      }

      .section-header {
        display: grid;
        gap: 10px;
        max-width: 850px;
        margin-bottom: 20px;
      }

      .section-header h2 {
        font-size: clamp(28px, 4vw, 44px);
        line-height: 1.05;
      }

      .section-header p {
        color: var(--muted);
        font-size: 18px;
      }

      .grid {
        display: grid;
        gap: 16px;
      }

      .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .card,
      .callout {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .card {
        display: grid;
        gap: 12px;
        padding: 20px;
      }

      .card h3 {
        font-size: 20px;
        line-height: 1.2;
      }

      .card p,
      .card li,
      .callout p,
      .callout li {
        color: #43524d;
      }

      .card ul,
      .callout ul {
        display: grid;
        gap: 8px;
        margin: 0;
        padding-left: 20px;
      }

      .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .tag {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 10px;
        border-radius: 999px;
        background: var(--surface-soft);
        color: #31423d;
        font-size: 13px;
        font-weight: 680;
      }

      .tag.blue {
        background: var(--blue-soft);
        color: var(--blue);
      }

      .tag.amber {
        background: var(--amber-soft);
        color: var(--amber);
      }

      .tag.rose {
        background: var(--rose-soft);
        color: var(--rose);
      }

      .flow {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
      }

      .step {
        position: relative;
        display: grid;
        gap: 8px;
        min-height: 166px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
      }

      .step-number {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 50%;
        background: var(--accent);
        color: #ffffff;
        font-size: 13px;
        font-weight: 780;
      }

      .step strong {
        font-size: 16px;
        line-height: 1.25;
      }

      .step span {
        color: var(--muted);
        font-size: 14px;
      }

      .tools {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .tool-card {
        border-top: 5px solid var(--accent);
      }

      .tool-card:nth-child(2) {
        border-top-color: var(--blue);
      }

      .tool-card:nth-child(3) {
        border-top-color: var(--amber);
      }

      .tool-card:nth-child(4) {
        border-top-color: var(--rose);
      }

      .code-panel {
        overflow: hidden;
        border-radius: var(--radius);
        background: var(--code);
        box-shadow: var(--shadow);
      }

      .code-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #d7e8e5;
        font-size: 13px;
        font-weight: 720;
      }

      pre {
        margin: 0;
        padding: 18px;
        overflow-x: auto;
        color: #e7f3f1;
        font-size: 13px;
        line-height: 1.55;
      }

      .callout {
        display: grid;
        gap: 12px;
        padding: 20px;
        background: #fcfefd;
      }

      .callout h3 {
        font-size: 19px;
      }

      .matrix {
        display: grid;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .matrix-row {
        display: grid;
        grid-template-columns: 210px 1fr 1fr;
      }

      .matrix-row > div {
        padding: 14px;
        border-bottom: 1px solid var(--line);
        border-right: 1px solid var(--line);
      }

      .matrix-row > div:last-child {
        border-right: 0;
      }

      .matrix-row:last-child > div {
        border-bottom: 0;
      }

      .matrix-head {
        background: var(--surface-soft);
        font-size: 13px;
        font-weight: 780;
        text-transform: uppercase;
      }

      .footer {
        padding: 44px 0 54px;
        color: var(--muted);
        font-size: 14px;
      }

      @media (max-width: 980px) {
        .hero-grid,
        .cards,
        .two,
        .tools,
        .flow {
          grid-template-columns: 1fr;
        }

        .step {
          min-height: auto;
        }

        .matrix-row {
          grid-template-columns: 1fr;
        }

        .matrix-row > div {
          border-right: 0;
        }
      }

      @media (max-width: 720px) {
        .shell {
          width: min(100% - 28px, 1160px);
        }

        .nav {
          align-items: flex-start;
          flex-direction: column;
          padding: 14px 0;
        }

        .navlinks {
          justify-content: flex-start;
        }

        .hero {
          padding-top: 46px;
        }

        h1 {
          font-size: clamp(38px, 14vw, 56px);
        }

        .lead {
          font-size: 18px;
        }

        .fact {
          grid-template-columns: 1fr;
          gap: 4px;
        }
      }
    </style>
  </head>
  <body>
    <header class="topbar">
      <nav class="shell nav" aria-label="Seitennavigation">
        <a class="brand" href="#top" aria-label="Zum Seitenanfang">
          <span class="mark">RFC</span>
          <span>rfc3339.date MCP</span>
        </a>
        <div class="navlinks">
          <a href="#mcp">MCP</a>
          <a href="#tools">Tools</a>
          <a href="#codex">Codex</a>
          <a href="#claude">Claude</a>
          <a href="#übung">Übung</a>
        </div>
      </nav>
    </header>

    <main id="top">
      <section class="hero">
        <div class="shell hero-grid">
          <div>
            <div class="eyebrow">Agentic Workflow Design</div>
            <h1>rfc3339.date als MCP-Server verstehen und praktisch nutzen</h1>
            <p class="lead">
              rfc3339.date ist eine Cloudflare-Worker-API für Zeitstempel,
              Zeitzonen, RFC3339-Validierung und menschlich formulierte
              Terminangaben. Der MCP macht diese Funktionen für Agenten als
              sichere, strukturierte Werkzeuge verfügbar.
            </p>
            <div class="actions">
              <a class="button" href="https://rfc3339.date/mcp">MCP-Endpunkt</a>
              <a class="button secondary" href="https://rfc3339.date/.well-known/mcp/server-card.json">Server Card</a>
            </div>
          </div>

          <aside class="summary-panel" aria-label="Kurzprofil">
            <h2>Kurzprofil</h2>
            <div class="fact-list">
              <div class="fact">
                <strong>Server</strong>
                <span>rfc3339-date, Version 1.2.0</span>
              </div>
              <div class="fact">
                <strong>Transport</strong>
                <span>Streamable HTTP über <code>https://rfc3339.date/mcp</code></span>
              </div>
              <div class="fact">
                <strong>Protokoll</strong>
                <span>MCP JSON-RPC, unter anderem <code>2025-11-25</code></span>
              </div>
              <div class="fact">
                <strong>Prinzip</strong>
                <span>Read-only Tools ohne Nebenwirkungen</span>
              </div>
              <div class="fact">
                <strong>Discovery</strong>
                <span><code>/.well-known/mcp/server-card.json</code></span>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <section class="section" id="mcp">
        <div class="shell">
          <div class="section-header">
            <h2>Was ist an MCP besonders?</h2>
            <p>
              Das Model Context Protocol beschreibt nicht nur eine URL, sondern
              einen Vertrag zwischen Agent, Client und Werkzeugserver.
            </p>
          </div>

          <div class="grid cards">
            <article class="card">
              <div class="tag-row">
                <span class="tag">Werkzeugvertrag</span>
              </div>
              <h3>Tools statt Prompt-Tricks</h3>
              <p>
                Ein MCP-Server liefert maschinenlesbare Toolnamen,
                Beschreibungen und JSON-Schemas. Das Modell muss nicht raten,
                wie ein API-Call gebaut wird; der Client kann Eingaben prüfen
                und die Antwort strukturiert an das Modell zurückgeben.
              </p>
            </article>

            <article class="card">
              <div class="tag-row">
                <span class="tag blue">Kontextkanal</span>
              </div>
              <h3>Ressourcen und Daten</h3>
              <p>
                MCP kann neben Tools auch Ressourcen und Templates anbieten.
                rfc3339.date nutzt das schlank: Die Ressource
                <code>mcp://server-card.json</code> dokumentiert den Server
                selbst und macht Discovery reproduzierbar.
              </p>
            </article>

            <article class="card">
              <div class="tag-row">
                <span class="tag amber">Governance</span>
              </div>
              <h3>Kontrollierbare Befugnisse</h3>
              <p>
                Tools können lokal, remote, lesend, schreibend oder
                hochriskant sein. Hier ist die Grenze klar: Zeitdaten lesen,
                prüfen und umrechnen, aber keine Kalender ändern, keine Mails
                senden und keine externen Systeme beschreiben.
              </p>
            </article>
          </div>
        </div>
      </section>

      <section class="section">
        <div class="shell">
          <div class="section-header">
            <h2>Der Ablauf bei rfc3339.date</h2>
            <p>
              Ein Client entdeckt den Server, initialisiert das Protokoll,
              fragt die Toolliste ab und ruft danach einzelne Tools per
              JSON-RPC auf.
            </p>
          </div>

          <div class="flow" aria-label="MCP Ablauf">
            <div class="step">
              <span class="step-number">1</span>
              <strong>Discovery</strong>
              <span>Server Card unter <code>/.well-known/mcp/server-card.json</code> lesen.</span>
            </div>
            <div class="step">
              <span class="step-number">2</span>
              <strong>Initialize</strong>
              <span>Client und Server einigen sich auf eine MCP-Version.</span>
            </div>
            <div class="step">
              <span class="step-number">3</span>
              <strong>Tools/list</strong>
              <span>Der Client erhält Namen, Beschreibungen und Eingabeschemas.</span>
            </div>
            <div class="step">
              <span class="step-number">4</span>
              <strong>Tools/call</strong>
              <span>Das Modell lässt konkrete Zeitfragen über Tools ausführen.</span>
            </div>
            <div class="step">
              <span class="step-number">5</span>
              <strong>Structured Output</strong>
              <span>Antworten kommen als Text plus <code>structuredContent</code>.</span>
            </div>
          </div>
        </div>
      </section>

      <section class="section" id="tools">
        <div class="shell">
          <div class="section-header">
            <h2>Die vier MCP-Tools</h2>
            <p>
              Der Server kapselt die öffentlichen rfc3339.date-Funktionen als
              bewusst kleine, gut prüfbare Agentenwerkzeuge.
            </p>
          </div>

          <div class="grid tools">
            <article class="card tool-card">
              <h3><code>get-current-time</code></h3>
              <p>
                Liefert die aktuelle Zeit in UTC oder einer IANA-Zeitzone,
                inklusive Offset, Unix-Sekunden und Unix-Millisekunden.
              </p>
              <div class="tag-row">
                <span class="tag">tz optional</span>
                <span class="tag">precision 0-9</span>
              </div>
            </article>

            <article class="card tool-card">
              <h3><code>convert-timestamp</code></h3>
              <p>
                Wandelt Zeitstempel zwischen Formaten um, etwa RFC3339,
                ISO8601, Unix, Unixms, HTTP-Date, E-Mail-Date, GPS, TAI,
                Julian Date oder Kalenderwochenformat.
              </p>
              <div class="tag-row">
                <span class="tag blue">in/out</span>
                <span class="tag blue">timezone</span>
              </div>
            </article>

            <article class="card tool-card">
              <h3><code>parse-human-time</code></h3>
              <p>
                Löst Angaben wie <code>tomorrow 10am PST</code> gegen eine
                Zielzone auf. Relative Angaben können mit einem RFC3339-Base
                stabilisiert werden.
              </p>
              <div class="tag-row">
                <span class="tag amber">from/to</span>
                <span class="tag amber">base</span>
              </div>
            </article>

            <article class="card tool-card">
              <h3><code>validate-timestamp</code></h3>
              <p>
                Prüft einzelne Strings gegen RFC3339- und ISO8601-Profile.
                Die Modi <code>strict</code> und <code>lenient</code> trennen
                harte Normprüfung von praktischer Eingabetoleranz.
              </p>
              <div class="tag-row">
                <span class="tag rose">rfc3339</span>
                <span class="tag rose">iso8601</span>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section class="section">
        <div class="shell grid two">
          <div class="code-panel">
            <div class="code-title">
              <span>Toolliste abrufen</span>
              <span>JSON-RPC</span>
            </div>
            <pre><code>curl https://rfc3339.date/mcp \
  -H "content-type: application/json" \
  -H "accept: application/json, text/event-stream" \
  -H "mcp-protocol-version: 2025-11-25" \
  --data '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list"
  }'</code></pre>
          </div>

          <div class="code-panel">
            <div class="code-title">
              <span>Menschliche Terminangabe auflösen</span>
              <span>tools/call</span>
            </div>
            <pre><code>{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "parse-human-time",
    "arguments": {
      "value": "tomorrow 10am PST",
      "to": "Europe/Berlin",
      "base": "2026-06-01T12:00:00Z"
    }
  }
}</code></pre>
          </div>
        </div>
      </section>

      <section class="section">
        <div class="shell">
          <div class="section-header">
            <h2>Was damit möglich ist</h2>
            <p>
              Zeitfragen sind klein genug für ein Demo-Tool und wichtig genug,
              um echte Agentenfehler sichtbar zu machen.
            </p>
          </div>

          <div class="grid cards">
            <article class="card">
              <h3>Termine robust normalisieren</h3>
              <ul>
                <li>Kundenangaben wie "next Friday 3pm EST" eindeutig auflösen.</li>
                <li>Zielzeiten für lokale Kalender, CRM-Notizen und Follow-ups erzeugen.</li>
                <li>Sommerzeit und uneindeutige Abkürzungen explizit behandeln.</li>
              </ul>
            </article>

            <article class="card">
              <h3>Datenqualität verbessern</h3>
              <ul>
                <li>CSV- oder API-Exports mit gemischten Datumsformaten prüfen.</li>
                <li>Unix, RFC3339, HTTP-Date und andere Formate vergleichbar machen.</li>
                <li>Validierungsfehler als Rückfrage statt als stille Korrektur ausgeben.</li>
              </ul>
            </article>

            <article class="card">
              <h3>Agentische Workflows absichern</h3>
              <ul>
                <li>Das Modell entscheidet nicht selbst über Zeitzonenarithmetik.</li>
                <li>Toolaufrufe sind nachvollziehbare Zwischenschritte im Arbeitsprotokoll.</li>
                <li>Read-only Design begrenzt das Risiko im Live-Training.</li>
              </ul>
            </article>
          </div>
        </div>
      </section>

      <section class="section" id="codex">
        <div class="shell grid two">
          <div>
            <div class="section-header">
              <h2>Nutzung in Codex</h2>
              <p>
                In Codex wird ein MCP-Server typischerweise als externer
                Werkzeugserver konfiguriert. Danach kann der Agent die
                angebotenen Tools im Arbeitsverlauf verwenden.
              </p>
            </div>
            <div class="callout">
              <h3>Trainerhinweis</h3>
              <p>
                Gute Demo-Frage: "Ein Kunde schreibt: morgen 10 Uhr PST.
                Bitte erst in Europe/Berlin normalisieren und danach ein
                Follow-up mit eindeutigem Zeitstempel formulieren." Der
                Unterschied zwischen Modellwissen und Toolaufruf wird dann
                sofort sichtbar.
              </p>
            </div>
          </div>

          <div class="code-panel">
            <div class="code-title">
              <span>Beispielhafte MCP-Konfiguration</span>
              <span>Codex</span>
            </div>
            <pre><code>{
  "mcpServers": {
    "rfc3339-date": {
      "type": "http",
      "url": "https://rfc3339.date/mcp",
      "headers": {
        "MCP-Protocol-Version": "2025-11-25"
      }
    }
  }
}</code></pre>
          </div>
        </div>
      </section>

      <section class="section" id="claude">
        <div class="shell grid two">
          <div class="code-panel">
            <div class="code-title">
              <span>Beispielhafte MCP-Konfiguration</span>
              <span>Claude</span>
            </div>
            <pre><code>{
  "mcpServers": {
    "rfc3339-date": {
      "type": "http",
      "url": "https://rfc3339.date/mcp",
      "headers": {
        "MCP-Protocol-Version": "2025-11-25"
      }
    }
  }
}</code></pre>
          </div>

          <div>
            <div class="section-header">
              <h2>Nutzung in Claude</h2>
              <p>
                Claude-Clients mit MCP-Unterstützung können denselben
                Server als Remote-MCP eintragen. Je nach Client-Oberfläche
                erfolgt das über eine JSON-Konfiguration, eine Integrations-
                Seite oder eine Entwicklerkonfiguration.
              </p>
            </div>
            <div class="callout">
              <h3>Wichtig für die Praxis</h3>
              <ul>
                <li>Der Server ist remote erreichbar; es muss kein lokaler Node-Prozess gestartet werden.</li>
                <li>Der Endpunkt akzeptiert <code>POST</code> und <code>OPTIONS</code>; <code>GET</code> auf <code>/mcp</code> ist nicht der Arbeitsweg.</li>
                <li>Bei Browser-Clients greifen Origin-Regeln: rfc3339.date, lokale Hosts und Workers-Dev-Hosts sind vorgesehen.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section class="section">
        <div class="shell">
          <div class="section-header">
            <h2>MCP im Vergleich zu REST</h2>
            <p>
              rfc3339.date bietet beides: klassische HTTP-Endpunkte für
              Menschen und Skripte, und MCP für Agenten-Clients.
            </p>
          </div>

          <div class="matrix">
            <div class="matrix-row matrix-head">
              <div>Aspekt</div>
              <div>REST/API-Nutzung</div>
              <div>MCP-Nutzung</div>
            </div>
            <div class="matrix-row">
              <div><strong>Discovery</strong></div>
              <div>Dokumentation oder OpenAPI lesen.</div>
              <div>Server Card und <code>tools/list</code> liefern maschinenlesbare Fähigkeiten.</div>
            </div>
            <div class="matrix-row">
              <div><strong>Aufruf</strong></div>
              <div>Client baut URL, Query-Parameter und Fehlerbehandlung selbst.</div>
              <div>Client ruft <code>tools/call</code> mit validierbarem JSON-Schema auf.</div>
            </div>
            <div class="matrix-row">
              <div><strong>Agentenfit</strong></div>
              <div>Das Modell braucht explizite API-Anweisungen im Prompt.</div>
              <div>Das Werkzeug erscheint als benannte Fähigkeit im Agentenkontext.</div>
            </div>
            <div class="matrix-row">
              <div><strong>Governance</strong></div>
              <div>Berechtigungen liegen außerhalb der Modellinteraktion.</div>
              <div>Tools, Ressourcen und Grenzen sind Teil des Protokollvertrags.</div>
            </div>
          </div>
        </div>
      </section>

      <section class="section" id="übung">
        <div class="shell">
          <div class="section-header">
            <h2>Workshop-Übung</h2>
            <p>
              Die Teilnehmenden sollen nicht nur den Endpunkt bestaunen,
              sondern eine sinnvolle Toolgrenze für eigene Workflows
              formulieren.
            </p>
          </div>

          <div class="grid cards">
            <article class="card">
              <h3>1. Problem erkennen</h3>
              <p>
                In einem Follow-up-Prozess tauchen Datumsangaben aus Mail,
                Kalender, CRM und Logdaten auf. Welche Angaben darf ein Modell
                frei interpretieren, welche müssen per Tool geprüft werden?
              </p>
            </article>
            <article class="card">
              <h3>2. Toolaufruf planen</h3>
              <p>
                Formuliert die Argumente für <code>parse-human-time</code>
                oder <code>validate-timestamp</code>. Achtet auf Zielzone,
                Base-Zeitpunkt, Precision und Fehlerrückgabe.
              </p>
            </article>
            <article class="card">
              <h3>3. Guardrail benennen</h3>
              <p>
                Legt fest, wann der Agent automatisch weiterarbeiten darf und
                wann eine Rückfrage nötig ist, etwa bei fehlender Quelle,
                uneindeutiger Zeitzone oder ungültigem Timestamp.
              </p>
            </article>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="shell">
        Kursbaustein für Agentic Workflow Design. Fokus: MCP als saubere
        Werkzeuggrenze, rfc3339.date als konkretes read-only Beispiel.
      </div>
    </footer>
  </body>
</html>