Agentic AI Workshop

English Readme below

Eine interaktive Web-Präsentation und Self-Guided Workshop zum Thema AI Agents, LLMs und AI-Assisted Coding.

agentic-ai.weisser.dev – direkt im Browser starten.

---

Was ist das?

Dieses Projekt ist beides:

• Live-Präsentation – Fullscreen-Slides mit Scroll-Snap, Timer, Konfetti und Presenter Mode für Workshops und Vorträge
• Self-Guided Workshop – Interaktive Experience mit Quizzes, Copy-Buttons und Schritt-für-Schritt Hands-On Anleitungen zum Selbstlernen

Die gesamte Präsentation wurde mit OpenCode erstellt – sie ist ihr eigenes Beispiel.

Für wen?

• Entwickler die verstehen wollen, wie AI Agents funktionieren
• Technik-Interessierte ohne KI-Vorwissen
• Teams die einen Workshop zu AI-Assisted Coding durchführen wollen
• Alle die wissen wollen, was hinter LLMs, Tokens, Kontext und MCP steckt

Was lernt man?

Geschichte & Status Quo

• 70 Jahre KI-Geschichte: von 1956 bis 2026
• Was bedeutet GPT? (Generative Pre-trained Transformer)
• Warum lernt die KI nicht aus meinen Fragen? (Training vs. Inference)
• Die Big 6 (OpenAI, Anthropic, Google, Meta, xAI, Alibaba/Qwen)
• Benchmarks, Preise, GPU vs Token APIs
• AGI und der Intelligence Index

KI – Das neue Internet

• Kreative KI: Video, Bilder, Gefahren
• Vom ChatBot zum Agenten
• MCP (Model Context Protocol) als offener Standard
• Reale Beispiele: Automatisierung, No-Backend, eigene Agents
• Risiken und Kosten ($82k-Story)

Die Basics

• Wie LLMs denken: Tokenisierung, Embeddings, Attention
• Wie lernt ein neuronales Netz? (Spam-Erkennungs-Beispiel)
• Warum KI manchmal „dumm" antwortet (Waschanlage-Problem, Common Sense)
• Was sind Tokens und warum sind sie wichtig
• Kontext-Fenster und Komprimierung
• AGENTS.md – das Regelwerk für deinen Agent
• Sub-Agents: Theorie und Praxis
• Realitätscheck: ROI, Fragilität, Human-in-the-Loop

AI Assisted Coding

• Evolution: von Copilot zu Agentic Development
• Tool-Zoo: 16 aktuelle Tools im Vergleich
• Vibe Coding vs. Spec-Driven Development
• Agent-Driven vs. Spec-Driven im Vergleich

Agentic AI (NEU)

• Was ist Agentic AI? (Definition, Single vs. Multi-Agent, Backend vs. Frontend Agents)
• Layer-Modelle im Vergleich (Boomi, Vendia LAMP, Mezmo/AURA, Workshop-Modell)
• Agentic Architecture Deep Dive (2-Spalten: Mit User Input vs. 100% Automatisierung)
• Interaktiver Architecture Builder mit 11 Use-Case-Presets als Mermaid.js-Diagramme
  • Lokal: Coding Assistant, Doku-Agent
  • Remote: Code Review, Kunden-Chatbot, Voice Agent, Ticket-Automatisierung, Wissens-Agent, Data Pipeline
  • Headless: CVE Auto-Patching, Anomalie-Erkennung, Tägliche System-Prüfung
• 3 Wege: Selbst bauen / Agent baut / Agent IST das Backend
• Sind Agenten resilient? (Determinismus, Model-Updates, fachliche Tests, Monitoring)

Hands-On

• Warum npm? Was ist Node.js? (Vergleich mit Java/Python)
• Was ist Vite? (Build-Tool, Hot Reload, kostenloses Hosting)
• Terminal, Dev-Server & Chrome Dev Tools (Typische Stolpersteine)
• Schritt-für-Schritt Setup: Node.js, OpenCode, VS Code, Bedrock (3 Optionen: Workshop, Enterprise, Privat)
• Spiele bauen: 2048, Doodle Jump, Space Invaders
• AGENTS.md schreiben und verbessern lassen

Deep Dive

• MCP verbinden (Playwright MCP Tutorial)
• Sub-Agents bauen (OpenCode Agents + OpenAgentsControl)
• OpenCode Web als lokales ChatGPT
• Custom Commands (/review, /test, /docs)
• Agent Skills

Features

Präsentation

• Fullscreen Slides mit Scroll-Snap (Desktop)
• Rechte Sidebar-Navigation mit Section Labels und Sub-Dots
• Adaptive Farben (Hell/Dunkel je nach Slide-Hintergrund)
• Keyboard-Navigation (Pfeiltasten, F für Fullscreen)
• URL-Hash für Slide-Persistenz
• Instant-Jump bei großer Distanz, Smooth bei Nachbar-Slides
• Sprachauswahl DE/EN mit automatischer Browser-Erkennung

Presenter Mode

• Aktivieren: ?presenter URL-Parameter oder P-Taste (Hidden Feature)
• Willkommens-Slide mit Organisatorischem
• Check-In Runde (KI-Erfahrung der Teilnehmer)
• 20-Minuten Pause-Timer mit Konfetti-Overlay
• 15-Minuten Diskussionsrunde mit Verlängern/Fortfahren
• Feedback-Runde am Ende
• Quiz-Slides auf Desktop ausgeblendet

Self-Paced Mode (Standard)

• „Experience starten" Einstieg
• Quiz-Slides sichtbar (Wissens-Checks nach jedem Kapitel)
• Kein Timer, keine Pause-Slides
• Handout als reines Nachschlagewerk

Mobile

• App-Mode mit Progress Bar, Burger-Menü, Prev/Next Buttons
• Touch-Swipe Navigation (ignoriert Swipes in scrollbaren Elementen)
• Horizontale Tabellen-Scrollung (kein Word-Break bei Tabellenzellen)
• Eigene Onboarding-Slides (Für wen? Was lernst du? Was brauchst du?)
• Quiz-Slides zwischen Kapiteln
• Alle Layouts stacken zu einer Spalte

Progression

• Aktueller Slide wird bei jedem Wechsel in localStorage gespeichert
• Beim Öffnen ohne URL-Hash: „Willkommen zurück"-Modal mit Fortschrittsbalken
• Optionen: Weitermachen oder Neu beginnen
• State verfällt nach 7 Tagen

Architecture Builder

• 11 Use-Case-Presets als interaktive Mermaid.js-Flowcharts
• Deployment-Zonen (Lokal, On-Prem, AWS, Azure, SaaS) als farbige Subgraphs
• User-Akteure in allen Diagrammen (Entwickler, Kunde, Mitarbeiter, Admin, Cron)
• Bidirektionale Pfeile mit beschreibenden Labels
• PNG-Export mit Watermark (agentic-ai.weisser.dev)
• Link-Sharing mit URL-Parameter (?uc=voice#arch-builder)
• Deep-Linking: URL-Parameter lädt Use Case automatisch
• Nur auf Desktop sichtbar, Mobile zeigt Hinweis

Tastenkürzel

Taste	Funktion
↓ → Space PageDown	Nächste Slide
↑ ← PageUp	Vorherige Slide
Home	Erste Slide
End	Letzte Slide
F	Fullscreen an/aus
P	Presenter Mode an/aus (Hidden Feature)

Tech Stack

• Vite 5 – Build Tool
• Vanilla JS – Kein Framework
• Mermaid.js – Architektur-Diagramme (SVG)
• CSS – Custom Design System (Teal/Yellow/Navy)
• HTML – Template Literals in JS-Modulen
• Playwright – Mobile Audit (Dev-Dependency)

Projektstruktur

src/
  main.js                       # Navigation, Timer, i18n, Mobile, Quiz, Arch Builder, Progression
  style.css                     # Design System, Layouts, Responsive, Mobile
  sections/
    de/                         # Deutsche Slides
      01-intro.js ... 06c-agentic.js ... 09-abschluss.js
    en/                         # English Slides
      01-intro.js ... 06c-agentic.js ... 09-abschluss.js
index.html                      # HTML-Shell mit Favicon
public/
  favicon/                      # Custom Favicons
CHANGELOG.md                    # Alle Releases dokumentiert

Lokal starten

npm install
npm run dev

Öffnet http://localhost:5173 im Browser.

Presenter Mode testen

http://localhost:5173/?presenter

Timer verkürzen (Debug)

http://localhost:5173/?presenter&timer=30

Sprache erzwingen

http://localhost:5173/?lang=en

Deployment

npm run build

Erzeugt dist/ – statische Dateien, hostbar auf jedem Webserver.

Aktuell deployed auf: agentic-ai.weisser.dev

Quellen & Credits

Ressource	Verwendung	Lizenz / Link
OpenCode	AI Coding Agent (Erstellung dieser Präsentation)	Open Source
Anthropic Claude	LLM (Claude via Amazon Bedrock)	Commercial
Vite	Build Tool	MIT
Continue	IDE-Plugin Referenz	Apache 2.0
Open WebUI	Self-hosted Chat Referenz	MIT
Playwright MCP	Deep Dive Tutorial-Referenz	Apache 2.0
OpenAgentsControl	Sub-Agent Framework Referenz	Open Source
awesome-claude-code-subagents	Sub-Agent Beispielsammlung	Open Source
remote-opencode-telegram	OpenCode per Telegram bedienen (Fork, selbst gebaut)	MIT
HUK-Coburg GitHub	Praxisbeispiel KI-Agents in Produktion	Public
artificialanalysis.ai	Live Benchmark Iframe	Public
trackingai.org	Historische KI-IQ Entwicklung (GIF)	Public
qrserver.com	QR-Code Generierung	Free API
YouTube	Will Smith Spaghetti Video Embed	YouTube ToS
agents.md	AGENTS.md Konzept	Open Source
MCP Spec	Model Context Protocol	Open Source
agidefinition.ai	AGI Definition Referenz	Public
GitHub Blog	AI Impact on Developer Experience	Public
a16z	High Cost of AI Compute	Public
Business Insider	Klarna & KI	Public
FAZ	Grok Content Filter	Public
NDR	Moltbook-Gefahren	Public
GenAI Newsletter	Cursor schlägt Claude & GPT-5	Public
Reddit/singularity	Cursor = Kimi k2.5 Diskussion	Public
OpenClaw	KI-Lizenz-Tool Referenz	Public
Moltbook	KI-Agenten-Gefahren Beispiel	Public
Kiro	AWS Kiro IDE (Spec-Driven Development)	Public
Roo Code	AI Coding Tool Referenz	Open Source
Claude Code Docs	Sub-Agents Dokumentation	Public
Pragmatic Engineer	Stack Overflow Rückgang	Public
Heise	KI-Bewusstsein Debatte	Public
Tenet Blog	GitHub Copilot Nutzungsdaten	Public
WinFuture	Stack Overflow Traffic-Rückgang	Public
Futurism	Sam Altman zu Programmierern	Public
Capital	Trump vs. KI-Giganten	Public
Anthropic Blog	Distillation Attacks Report	Public
CosmicJS	Claude Sonnet vs. Opus Vergleich	Public
AWS Bedrock Docs	Bedrock vs. SageMaker Guide	Public
Dataiku	Understanding AI Agents & Agentic Workflows	Public
Vectorize	Designing Agentic AI Systems	Public
Blog: Cloudflare Pages	Frontend Hosting Anleitung	Public
Blog: OpenCode Telegram	OpenCode Remote Telegram	Public
Mermaid.js	Diagramm-Rendering Engine	MIT

Meta

Diese Präsentation wurde vollständig mit OpenCode erstellt – einem Open-Source AI Coding Agent. Sie nutzt Claude über Amazon Bedrock und ist damit ihr eigenes bestes Beispiel für AI-Assisted Development.

Deep Dive 6: remote-opencode-telegram

Der Workshop enthält einen Bonus Deep Dive über remote-opencode-telegram — ein Fork des Discord-Bots, der um vollständigen Telegram-Support erweitert wurde. Als Beispiel für AI-Assisted Development: in ~1 Stunde mit OpenCode gebaut.

Setup (einmalig):

git clone https://github.com/weisser-dev/remote-opencode-telegram.git
cd remote-opencode-telegram && npm install && npm run build && npm link

remote-opencode configure    # Bot-Token, Projekte, Modell konfigurieren
remote-opencode telegram start

Vibe Coding Flow in Telegram:

/sps           → Projekt wählen (/sp1, /sp2 — ein Tap)
/lm            → Modell wählen (/sm1, /sm2 — ein Tap)
/vibe_coding   → Session starten
"fix the bug"  → einfach tippen, kein /command nötig
/stop_coding   → Session beenden

Lizenz

© 2026 weisser-dev

---

Agentic AI Workshop (English)

An interactive web presentation and self-guided workshop about AI Agents, LLMs and AI-Assisted Coding.

agentic-ai.weisser.dev – start directly in the browser.

---

What is this?

This project is both:

• Live Presentation – Fullscreen slides with scroll-snap, timers, confetti and presenter mode for workshops and talks
• Self-Guided Workshop – Interactive experience with quizzes, copy buttons and step-by-step hands-on tutorials for self-paced learning

The entire presentation was built with OpenCode – it is its own example.

Who is it for?

• Developers who want to understand how AI Agents work
• Tech-interested people with no prior AI knowledge
• Teams looking to run an AI-Assisted Coding workshop
• Anyone who wants to know what's behind LLMs, tokens, context and MCP

What will you learn?

History & Status Quo

• 70 years of AI history: from 1956 to 2026
• What does GPT mean? (Generative Pre-trained Transformer)
• Why doesn't AI learn from my questions? (Training vs. Inference)
• The Big 6 (OpenAI, Anthropic, Google, Meta, xAI, Alibaba/Qwen)
• Benchmarks, pricing, GPU vs token APIs
• AGI and the Intelligence Index

AI – The New Internet

• Creative AI: video, images, dangers
• From chatbot to agent
• MCP (Model Context Protocol) as open standard
• Real examples: automation, no-backend, custom agents
• Risks and costs ($82k story)

The Basics

• How LLMs think: tokenization, embeddings, attention
• How does a neural network learn? (Spam detection example)
• Why AI sometimes gives "dumb" answers (Car wash problem, Common Sense)
• What are tokens and why they matter
• Context window and compression
• AGENTS.md – the rulebook for your agent
• Sub-agents: theory and practice
• Reality check: ROI, fragility, human-in-the-loop

AI Assisted Coding

• Evolution: from Copilot to agentic development
• Tool zoo: 16 current tools compared
• Vibe Coding vs. Spec-Driven Development
• Agent-driven vs. spec-driven comparison

Agentic AI (NEW)

• What is Agentic AI? (Definition, Single vs. Multi-Agent, Backend vs. Frontend Agents)
• Layer models compared (Boomi, Vendia LAMP, Mezmo/AURA, Workshop model)
• Agentic Architecture Deep Dive (2-column: With User Input vs. 100% Automation)
• Interactive Architecture Builder with 11 use-case presets as Mermaid.js diagrams
  • Local: Coding Assistant, Docs Agent
  • Remote: Code Review, Customer Chatbot, Voice Agent, Ticket Automation, Knowledge Agent, Data Pipeline
  • Headless: CVE Auto-Patching, Anomaly Detection, Daily System Health Check
• 3 Paths: Build Yourself / Agent Builds / Agent IS the Backend
• Are Agents Resilient? (Determinism, model updates, functional tests, monitoring)

Hands-On

• Why npm? What is Node.js? (Comparison with Java/Python)
• What is Vite? (Build tool, hot reload, free hosting)
• Terminal, Dev Server & Chrome Dev Tools (Common pitfalls)
• Step-by-step setup: Node.js, OpenCode, VS Code, Bedrock (3 options: Workshop, Enterprise, Private)
• Build games: 2048, Doodle Jump, Space Invaders
• Write and improve AGENTS.md

Deep Dive

• Connect MCP (Playwright MCP tutorial)
• Build sub-agents (OpenCode Agents + OpenAgentsControl)
• OpenCode Web as local ChatGPT
• Custom commands (/review, /test, /docs)
• Agent skills

Features

Presentation

• Fullscreen slides with scroll-snap (desktop)
• Right sidebar navigation with section labels and sub-dots
• Adaptive colors (light/dark based on slide background)
• Keyboard navigation (arrow keys, F for fullscreen)
• URL hash for slide persistence
• Instant jump for far distances, smooth for nearby slides
• Language selector DE/EN with automatic browser detection

Presenter Mode

• Activate: ?presenter URL parameter or P key (hidden feature)
• Welcome slide with logistics
• Check-in round (participants' AI experience)
• 20-minute break timer with confetti overlay
• 15-minute discussion round with extend/continue
• Feedback round at the end
• Quiz slides hidden on desktop

Self-Paced Mode (Default)

• "Start Experience" entry
• Quiz slides visible (knowledge checks after each chapter)
• No timer, no break slides
• Handout as pure reference

Mobile

• App mode with progress bar, burger menu, prev/next buttons
• Touch swipe navigation (ignores swipes inside scrollable elements)
• Horizontal table scrolling (no word-break in table cells)
• Custom onboarding slides (Who? What? Requirements?)
• Quiz slides between chapters
• All layouts stack to single column

Progression

• Current slide saved to localStorage on every change
• On reload without URL hash: "Welcome back" modal with progress bar
• Options: Continue or Start over
• State expires after 7 days

Architecture Builder

• 11 use-case presets as interactive Mermaid.js flowcharts
• Deployment zones (Local, On-Prem, AWS, Azure, SaaS) as colored subgraphs
• User actors in all diagrams (Developer, Customer, Employee, Admin, Cron)
• Bidirectional arrows with descriptive labels
• PNG export with watermark (agentic-ai.weisser.dev)
• Link sharing with URL parameter (?uc=voice#arch-builder)
• Deep-linking: URL parameter auto-loads use case
• Desktop only, mobile shows hint

Keyboard Shortcuts

Key	Function
↓ → Space PageDown	Next slide
↑ ← PageUp	Previous slide
Home	First slide
End	Last slide
F	Toggle fullscreen
P	Toggle presenter mode (hidden feature)

Tech Stack

• Vite 5 – Build tool
• Vanilla JS – No framework
• Mermaid.js – Architecture diagrams (SVG)
• CSS – Custom design system (Teal/Yellow/Navy)
• HTML – Template literals in JS modules
• Playwright – Mobile audit (dev dependency)

Run locally

npm install
npm run dev

Opens http://localhost:5173 in the browser.

Test presenter mode

http://localhost:5173/?presenter

Shorten timers (debug)

http://localhost:5173/?presenter&timer=30

Force language

http://localhost:5173/?lang=en

Deployment

npm run build

Creates dist/ – static files, hostable on any web server.

Currently deployed at: agentic-ai.weisser.dev

Sources & Credits

Resource	Usage	License / Link
OpenCode	AI Coding Agent (built this presentation)	Open Source
Anthropic Claude	LLM (Claude via Amazon Bedrock)	Commercial
Vite	Build tool	MIT
Continue	IDE plugin reference	Apache 2.0
Open WebUI	Self-hosted chat reference	MIT
Playwright MCP	Deep dive tutorial reference	Apache 2.0
OpenAgentsControl	Sub-agent framework reference	Open Source
awesome-claude-code-subagents	Sub-agent examples collection	Open Source
remote-opencode-telegram	Control OpenCode via Telegram (fork, self-built)	MIT
HUK-Coburg GitHub	Real-world AI agents in production	Public
artificialanalysis.ai	Live benchmark iframe	Public
trackingai.org	Historical AI IQ development (GIF)	Public
qrserver.com	QR code generation	Free API
YouTube	Will Smith Spaghetti video embed	YouTube ToS
agents.md	AGENTS.md concept	Open Source
MCP Spec	Model Context Protocol	Open Source
agidefinition.ai	AGI definition reference	Public
GitHub Blog	AI Impact on Developer Experience	Public
a16z	High Cost of AI Compute	Public
Business Insider	Klarna & AI	Public
FAZ	Grok content filter	Public
NDR	Moltbook dangers	Public
GenAI Newsletter	Cursor beats Claude & GPT-5	Public
Reddit/singularity	Cursor = Kimi k2.5 discussion	Public
OpenClaw	AI licensing tool reference	Public
Moltbook	AI agent dangers example	Public
Kiro	AWS Kiro IDE (Spec-Driven Development)	Public
Roo Code	AI coding tool reference	Open Source
Claude Code Docs	Sub-agents documentation	Public
Pragmatic Engineer	Stack Overflow decline	Public
Heise	AI consciousness debate	Public
Tenet Blog	GitHub Copilot usage data	Public
WinFuture	Stack Overflow traffic decline	Public
Futurism	Sam Altman on programmers	Public
Capital	Trump vs. AI giants	Public
Anthropic Blog	Distillation attacks report	Public
CosmicJS	Claude Sonnet vs. Opus comparison	Public
AWS Bedrock Docs	Bedrock vs. SageMaker guide	Public
Dataiku	Understanding AI Agents & Agentic Workflows	Public
Vectorize	Designing Agentic AI Systems	Public
Blog: Cloudflare Pages	Frontend hosting guide	Public
Blog: OpenCode Telegram	OpenCode Remote Telegram	Public
Mermaid.js	Diagram rendering engine	MIT

Meta

This presentation was built entirely with OpenCode – an open-source AI coding agent. It uses Claude via Amazon Bedrock, making it its own best example of AI-assisted development.

License

© 2026 weisser-dev