1 / 17
Pfeiltasten ↑ ↓ oder scrollen · Leertaste = weiter
Medumio · Interner Workshop

Claude Code

Verstehen – und deine erste Webseite live bringen.

Was ist ein Agent? Was ist ein Skill? Was ist eine MCP-Connection?

16. Juni 2026  ·  26 Teilnehmer:innen

Worauf du dich freuen kannst

Das nimmst du heute mit

🧠

Du verstehst Claude Code

Agent, Skill, MCP & Tools – nicht als Theorie, sondern an echten Beispielen.

🌐

Deine Webseite ist live

Eine eigene Seite im Internet – gebaut, hochgeladen und online gestellt mit Claude.

📨

Dein Lead-Formular läuft

Echte Einträge landen sichtbar bei dir – das Mini-Modell jedes Funnels.

Claude Code Workshop · Medumio2
So läuft der Tag

Vom Begriff zur eigenen Live-Seite

🧩
Schritt 1

Konzepte

Die 4 Grundbegriffe verstehen

🔑
Schritt 2

Accounts

GitHub & Cloudflare anlegen

🛠️
Schritt 3

Bauen

Webseite mit Claude erstellen

🚀
Schritt 4

Online

Erstes Deployment, Live-URL

📨
Schritt 5

Lead-Formular

Einträge live empfangen

Claude Code Workshop · Medumio3
Die große Idee

Vom Chatbot zum Kollegen

💬

Normaler Chatbot

  • ·redet nur – gibt Text zurück
  • ·du kopierst alles selbst weiter
  • ·kennt deine Dateien & Tools nicht
  • ·jeder Schritt liegt bei dir

Claude Code

  • handelt – legt Dateien an, ändert Code
  • führt Befehle aus, deployt für dich
  • arbeitet in deinem Projekt & deinen Tools
  • bringt eine Aufgabe eigenständig zu Ende

Merksatz: Tools sind der Unterschied zwischen „über Arbeit reden“ und „Arbeit erledigen“.

Claude Code Workshop · Medumio4
Der Konzeptteil

Die 4 Grundbegriffe

Claude Code ist dein neuer digitaler Kollege. Vier Bausteine beschreiben, womit er arbeitet:

Tools

die Hände – Dateien, Befehle, Suche

🤖

Agent

der Kollege selbst, der eigenständig arbeitet

📘

Skill

die Firmen-Handbücher, die er gelesen hat

🔌

MCP

die Zugänge zu unseren anderen Tools

Claude Code Workshop · Medumio5
Grundbegriff 1 von 4

Tools

= Claudes Hände

Ein Chatbot kann nur reden. Claude Code hat Werkzeuge und tut Dinge: Dateien lesen & schreiben, Befehle ausführen, im Web suchen, Webseiten testen. Du wählst sie nicht selbst – du sagst das Ziel, Claude greift zum richtigen Werkzeug.

Die wichtigsten Werkzeuge
📄

Lesen & Schreiben

Dateien anlegen und ändern

⌨️

Befehle ausführen

z. B. Code hochladen, deployen

🔍

Suchen

im Projekt das Richtige finden

🌍

Web

recherchieren & nachschlagen

👀

Vorschau

Seite im Browser testen

🧯

Nachfragen

bei heiklen Aktionen erst fragen

Claude Code Workshop · Medumio6
Grundbegriff 2 von 4
🤖

Agent

= der Kollege selbst

Ein Agent ist Claude, der ein Ziel bekommt und selbstständig in einer Schleife arbeitet, bis die Aufgabe erledigt ist. Für Großes holt er sich Helfer (Sub-Agents), die parallel arbeiten und berichten.

So arbeitet ein Agent (die Schleife)
🧠

Nachdenken

Was ist der nächste sinnvolle Schritt?

🛠️

Werkzeug nutzen

Datei schreiben, Befehl ausführen …

🔎

Ergebnis prüfen

Hat es geklappt? Was fehlt noch?

🔁

Wiederholen

… bis das Ziel erreicht ist

Helfer-Agenten: Explore (durchsuchen) · Plan (planen) · deep-research (recherchieren)

Claude Code Workshop · Medumio7
Grundbegriff 3 von 4
📘

Skill

= ein Firmen-Playbook

Ein Skill ist eine gespeicherte Arbeitsanleitung mit Vorlagen und Regeln. Claude lädt sie automatisch, wenn die Situation passt. So wird unser Firmenwissen für alle abrufbar – du musst nicht wissen, wie ein Kongress aufgebaut ist, der Skill weiß es.

Echte Medumio-Skills
📨

kongress-pipeline

Kongress-Mails, Landingpages & Konzepte im Medumio-Stil

📚

content-hub-pipeline

Wissensplattformen nach dem Vivito-Muster (Astro + MDX)

🏢

salutem-org

kennt unsere Organisation – wer ist für was zuständig

Aufrufen:  /  tippen → Skill-Name wählen
Claude Code Workshop · Medumio8
Grundbegriff 4 von 4
🔌

MCP

= der Adapter zu Tools

MCP (Model Context Protocol) ist ein einheitlicher Standard, um Claude an externe Programme anzuschließen – wie ein USB-C-Anschluss für KI. Einmal verbunden, kann Claude darin lesen und handeln. Wichtig: nur Tools verbinden, denen du den Zugriff gibst.

Verbundene Tools (Beispiele)
Claude
💬
Slack
🛒
Shopify
✉️
Gmail
📁
Drive
Claude Code Workshop · Medumio9
Recap

Alle vier auf einen Blick

Tools
Die Grundfähigkeiten: lesen, schreiben, ausführen, suchen.
= Claudes Hände
🤖
Agent
Claude, der eine Aufgabe eigenständig zu Ende bringt.
= der Kollege
📘
Skill
Gespeichertes Playbook, automatisch zur Hand.
= die Handbücher
🔌
MCP
Adapter zu unseren anderen Tools.
= die Zugänge
Claude Code Workshop · Medumio10
Ein Beispiel aus dem Alltag

Wie alles zusammenspielt

„Claude, finde im Slack die Wünsche zum Nebennieren-Kongress, schreib daraus eine Tagesmail im Medumio-Stil und leg sie als Entwurf ab.“
🔌

MCP

holt die Slack-Nachrichten herein

📘

Skill

liefert Stil & Aufbau der Kongress-Mail

🤖

Agent

verknüpft beides & schreibt die Mail

Tools

legen den Entwurf am Ende ab

Ein Satz – vier Bausteine im Einsatz. Genau das ist Claude Code.

Claude Code Workshop · Medumio11
Der Praxisteil

Jetzt baust DU.

Eigene Webseite · erstes Deployment · funktionierendes Lead-Formular.

🗣️

Sprich wie mit einem Kollegen

Ganze Sätze, sag das Ziel.

🆘

Hakt's? Frag Claude

Fehlermeldung einfach reinkopieren.

🛟

Nichts kaputtmachbar

Dein eigenes Spielprojekt.

Claude Code Workshop · Medumio12
Praxis · Schritt 1–2

Accounts anlegen

🔑

Zwei kostenlose Accounts sind dein Fundament: GitHub lagert deinen Code, Cloudflare stellt die Seite ins Netz.

Du schaffst das, wenn:
  • GitHub-Account erstellt (github.com/signup)
  • E-Mail bei GitHub bestätigt
  • Cloudflare-Account erstellt (dash.cloudflare.com)
  • Cloudflare-Dashboard ist sichtbar
Erst kurz Hallo sagen – tipp in Claude Code:
Claude Code
Hi! Ich mache gerade einen Workshop und
baue gleich meine erste Webseite.
Erklär mir in 2 Sätzen, was du als
Nächstes für mich tun kannst.
💡 In der Pause schon anlegen – Bestätigungsmails brauchen einen Moment.
Claude Code Workshop · Medumio13
Praxis · Schritt 3–4

Verbinden & bauen

🛠️

Gib Claude einen Zugangsschlüssel zu GitHub (deinen ersten API-Token!) – dann beschreibst du ihm deine Wunsch-Webseite.

Du schaffst das, wenn:
  • GitHub-Token erstellt (Scopes: repo + workflow)
  • Token sofort kopiert (wird nur 1× gezeigt!)
  • Bei GitHub angemeldet (Claude führt dich)
  • Webseite gebaut & in der Vorschau gesehen
Webseite bauen – dein Prompt (Thema anpassen):
Claude Code
Bau mir eine moderne einseitige
Landingpage als einzelne index.html
(CSS eingebettet, kein Build).
Thema: <DEIN THEMA>.
Mit Lead-Formular (Vorname + E-Mail),
das später an /api/lead sendet.
Leg alles im Ordner "meine-webseite" an.
🔐 Token = Passwort für Programme. Nie in Chat / Code / Mail teilen.
Claude Code Workshop · Medumio14
Praxis · Schritt 5

Online stellen 🎉

🚀

Der Höhepunkt: Claude lädt deinen Code zu GitHub, du verbindest Cloudflare damit – und bekommst deine eigene Live-URL.

Du schaffst das, wenn:
  • Code via Claude zu GitHub hochgeladen
  • Cloudflare Pages mit dem Repo verbunden
  • Build output directory = /  · preset None
  • Seite ist live unter …pages.dev
Hochladen – dein Prompt:
Claude Code
Mach aus "meine-webseite" ein
Git-Repo und lade es als neues
öffentliches Repository
"meine-webseite" zu meinem
GitHub hoch.
🥳 Live-URL in den Workshop-Chat posten – Seiten der anderen ansehen!
Claude Code Workshop · Medumio15
Praxis · Schritt 6–7

Lead-Formular & Secret

📨

Hol dir auf webhook.site einen Live-Briefkasten, lass Claude die Funktion bauen und hinterlege die URL als Secret in Cloudflare.

Du schaffst das, wenn:
  • webhook.site-URL geholt (kein Account nötig)
  • Funktion /api/lead von Claude gebaut & gepusht
  • Secret LEAD_WEBHOOK_URL gesetzt (Encrypt!)
  • Neu deployt → Formular getestet → Lead da!
Lead-Funktion bauen – dein Prompt:
Claude Code
Bau eine Cloudflare Pages Function
unter functions/api/lead.js, die
POST (JSON name+email) annimmt und
Erfolg zurückgibt. Wenn
LEAD_WEBHOOK_URL gesetzt ist, leite
den Lead dorthin weiter. Dann
committen & pushen.
🔐 „Encrypt“ macht aus der Variable ein echtes Secret. Danach neu deployen!
Claude Code Workshop · Medumio16
Geschafft 🎉

Du hast heute ein Fundament gelegt.

🔑

API-Token erstellt

🔐

Secret gesetzt

🚀

Seite live gestellt

📨

Lead-Formular gebaut

Und im Großen?

Genau dieses Prinzip – Seite → Formular → Lead landet im System – steckt hinter jedem Medumio-Funnel. Im Großen übernehmen das Skills wie kongress-pipeline und content-hub-pipeline. Du hast es jetzt selbst einmal gebaut.

Claude Code Workshop · Medumio17