DeMystify: AI Agents in the Real World — Session Summary (April 2026)

demystify-session-summary.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeMystify: AI Agents in the Real World — Session Summary</title>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0e17;--surface:#111827;--card:#151a27;--border:#1e293b;--text:#f1f5f9;--dim:#94a3b8;--muted:#64748b;--cyan:#00c2aa;--red:#e84033;--orange:#ff6b2b;--blue:#0078d4;--green:#34d399;--mono:'SF Mono','Fira Code','Consolas',monospace;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;min-height:100vh}
.page{max-width:900px;margin:0 auto;padding:40px 24px 80px}
.hero{text-align:center;padding:60px 0 40px}
.hero-lobster{font-size:4rem;margin-bottom:12px}
.hero h1{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--red));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .sub{color:var(--dim);margin-top:8px;font-size:1rem}
.hero .date{color:var(--muted);font-size:.85rem;margin-top:4px}
.badge-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;font-size:.82rem;color:var(--dim);text-decoration:none;transition:border-color .2s}
.badge:hover{border-color:var(--cyan);color:var(--text)}
.no-rec{display:inline-block;margin-top:16px;background:rgba(232,64,51,0.12);border:1px solid rgba(232,64,51,0.3);border-radius:6px;padding:5px 16px;font-size:.78rem;color:var(--red);font-weight:600}
hr{border:none;border-top:1px solid var(--border);margin:40px 0}
h2{font-size:1.4rem;font-weight:700;margin-bottom:16px;color:var(--text)}
h2 .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:4px;font-weight:500}
.section{margin-bottom:40px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;transition:border-color .2s}
.card:hover{border-color:rgba(0,194,170,0.3)}
.card h3{font-size:1rem;margin-bottom:6px}
.card p{font-size:.85rem;color:var(--dim);line-height:1.5}
.card a{color:var(--cyan);text-decoration:none}
.card a:hover{text-decoration:underline}
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.link-card{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);transition:border-color .2s}
.link-card:hover{border-color:var(--cyan)}
.link-card .icon{font-size:1.3rem}
.link-card .info{flex:1}
.link-card .info .name{font-size:.9rem;font-weight:600}
.link-card .info .desc{font-size:.75rem;color:var(--muted)}
.faq{list-style:none}
.faq li{padding:16px 0;border-bottom:1px solid var(--border)}
.faq li:last-child{border-bottom:none}
.faq .q{font-weight:700;color:var(--cyan);margin-bottom:6px;font-size:.95rem}
.faq .a{color:var(--dim);font-size:.88rem;line-height:1.6}
.highlight-box{background:rgba(0,194,170,0.06);border:1px solid rgba(0,194,170,0.2);border-radius:12px;padding:20px;margin:20px 0}
.highlight-box h3{color:var(--cyan);margin-bottom:8px;font-size:1rem}
.stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.stat{text-align:center}
.stat .val{font-size:2rem;font-weight:800;color:var(--cyan)}
.stat .lbl{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.footer{text-align:center;padding:40px 0 20px;color:var(--muted);font-size:.8rem}
.footer a{color:var(--cyan)}
.live-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);border-radius:6px;padding:4px 12px;font-size:.75rem;color:var(--green);font-weight:600;margin-top:12px}
.live-badge::before{content:'';width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:600px){.hero h1{font-size:1.6rem}.stats{gap:12px}.stat .val{font-size:1.5rem}.page{padding:24px 16px 60px}}
</style>
</head>
<body>
<div class="page">

  <div class="hero">
    <div class="hero-lobster">🦞</div>
    <h1>DeMystify: AI Agents in the Real World</h1>
    <div class="sub">Microsoft DeMystify Series · Jens Schneider</div>
    <div class="date">April 21, 2026 · Internal Session</div>
    <div class="no-rec">⚠️ NO RECORDING — This page is the shareable takeaway</div>
    <div class="live-badge">Updated live during the session</div>
  </div>

  <div class="stats">
    <div class="stat"><div class="val">360K</div><div class="lbl">GitHub Stars</div></div>
    <div class="stat"><div class="val">73K</div><div class="lbl">Forks</div></div>
    <div class="stat"><div class="val">2K+</div><div class="lbl">Contributors</div></div>
    <div class="stat"><div class="val">5 mo</div><div class="lbl">To #1 on GitHub</div></div>
  </div>

  <hr>

  <!-- ABOUT -->
  <div class="section">
    <h2><span class="label">About</span>What is OpenClaw?</h2>
    <p style="color:var(--dim);font-size:.95rem;line-height:1.7;margin-bottom:16px">
      OpenClaw is an open-source personal AI agent that runs on your own hardware. Unlike chatbots that answer questions, OpenClaw <strong style="color:var(--cyan)">acts</strong> — it reads your email, manages your calendar, writes code, controls your browser, and runs automated tasks 24/7. It communicates via your existing chat apps (Teams, Telegram, WhatsApp) and works with any LLM provider.
    </p>
    <p style="color:var(--dim);font-size:.95rem;line-height:1.7">
      Created by Peter Steinberger (now at OpenAI), it went from a weekend WhatsApp hack to the #1 most-starred project on GitHub in 5 months. NVIDIA's Jensen Huang called it "the operating system for personal AI."
    </p>
  </div>

  <hr>

  <!-- KEY LINKS -->
  <div class="section">
    <h2><span class="label">Resources</span>Explore OpenClaw</h2>
    <div class="link-grid">
      <a href="https://openclaw.ai" target="_blank" class="link-card">
        <div class="icon">🌐</div>
        <div class="info"><div class="name">openclaw.ai</div><div class="desc">Official website & quickstart</div></div>
      </a>
      <a href="https://github.com/openclaw/openclaw" target="_blank" class="link-card">
        <div class="icon">📦</div>
        <div class="info"><div class="name">GitHub</div><div class="desc">Source code — 360K ⭐</div></div>
      </a>
      <a href="https://docs.openclaw.ai" target="_blank" class="link-card">
        <div class="icon">📚</div>
        <div class="info"><div class="name">Documentation</div><div class="desc">Full docs & guides</div></div>
      </a>
      <a href="https://clawhub.com" target="_blank" class="link-card">
        <div class="icon">🧩</div>
        <div class="info"><div class="name">ClawHub</div><div class="desc">Community skills directory</div></div>
      </a>
      <a href="https://www.ted.com/talks/peter_steinberger_how_i_created_openclaw_the_breakthrough_ai_agent" target="_blank" class="link-card">
        <div class="icon">🎤</div>
        <div class="info"><div class="name">TED Talk</div><div class="desc">Peter's TED 2026 talk</div></div>
      </a>
      <a href="https://steipete.me/posts/2026/openclaw" target="_blank" class="link-card">
        <div class="icon">✍️</div>
        <div class="info"><div class="name">Peter's Blog</div><div class="desc">"OpenClaw, OpenAI and the future"</div></div>
      </a>
      <a href="https://blog.jensme5.com/2026/03/01/bring-your-own-agent-to-microsoft-365-copilot-chat/" target="_blank" class="link-card">
        <div class="icon">📝</div>
        <div class="info"><div class="name">Jens' Blog</div><div class="desc">Bring Your Own Agent to M365</div></div>
      </a>
      <a href="https://www.linkedin.com/in/js-germany/" target="_blank" class="link-card">
        <div class="icon">💼</div>
        <div class="info"><div class="name">Jens on LinkedIn</div><div class="desc">Connect & discuss</div></div>
      </a>
    </div>
  </div>

  <hr>

  <!-- SESSION HIGHLIGHTS -->
  <div class="section">
    <h2><span class="label">Session</span>What We Showed Today</h2>
    <div class="card-grid">
      <div class="card">
        <h3>🦞 Meet Data</h3>
        <p>An autonomous AI agent running 24/7 on a home server in Siegburg. 5 AI models, 15+ skills, 14 cron jobs. Built entirely via Telegram chat.</p>
      </div>
      <div class="card">
        <h3>🎬 Built on the Way to the Cinema</h3>
        <p>The entire presentation was created by the agent while Jens walked to a movie theater — then iterated via chat messages. No IDE, no code editor.</p>
      </div>
      <div class="card">
        <h3>📊 Live SharePoint Excel</h3>
        <p>During the session, Data built a formatted AI cost calculator spreadsheet directly in SharePoint via Graph API — in seconds.</p>
      </div>
      <div class="card">
        <h3>🔧 Self-Writing Integrations</h3>
        <p>"Connect my Hue lights" — the agent reads the API docs, writes TypeScript, installs the skill, and it's ready. No connector marketplace needed.</p>
      </div>
    </div>
  </div>

  <hr>

  <!-- FAQ -->
  <div class="section">
    <h2><span class="label">FAQ</span>Questions from the Session</h2>
    <div class="highlight-box">
      <h3>💡 This section is updated live</h3>
      <p style="color:var(--dim);font-size:.85rem">Questions asked during the DeMystify session are captured and answered here in real-time by Data.</p>
    </div>
    <ul class="faq" id="faq-list">
      <li>
        <div class="q">Is OpenClaw free?</div>
        <div class="a">Yes — OpenClaw itself is open-source and free. You pay only for LLM API tokens (typically $5–30/month depending on usage). You can also use free tiers like OpenAI Codex OAuth or GitHub Copilot.</div>
      </li>
      <li>
        <div class="q">Is it safe? Can it access my files?</div>
        <div class="a">It runs on YOUR machine — your data never leaves unless you explicitly send it to an LLM. Pairing policy ensures strangers can't connect. Docker sandboxes isolate group sessions. Security guide: docs.openclaw.ai/security</div>
      </li>
      <li>
        <div class="q">How does this relate to Copilot Studio?</div>
        <div class="a">Different categories. Copilot Studio = enterprise automation (IT-governed, multi-user, compliance). OpenClaw = personal productivity (your machine, your rules, your data). They complement each other — Omar Shahine at Microsoft is building the bridge between both.</div>
      </li>
      <!-- More FAQ items will be added live during the session -->
    </ul>
  </div>

  <hr>

  <!-- GETTING STARTED -->
  <div class="section">
    <h2><span class="label">Try It</span>Get Started in 5 Minutes</h2>
    <div class="highlight-box">
      <h3>One command. That's it.</h3>
      <pre style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:16px;margin-top:12px;font-family:var(--mono);font-size:.85rem;color:var(--cyan);overflow-x:auto"><code>npx openclaw@latest</code></pre>
      <p style="color:var(--dim);font-size:.85rem;margin-top:12px">Works on macOS, Windows (WSL2), and Linux. The setup wizard walks you through LLM provider, chat channel, and persona configuration.</p>
    </div>
  </div>

  <div class="footer">
    <p>Built live during the DeMystify session by <strong>Data</strong> 🤖 — an OpenClaw agent</p>
    <p style="margin-top:4px"><a href="https://openclaw.ai">openclaw.ai</a> · <a href="https://github.com/openclaw/openclaw">GitHub</a> · <a href="https://clawhub.com">ClawHub</a></p>
    <p style="margin-top:12px;font-size:.7rem;color:var(--muted)">April 21, 2026 · Microsoft Internal · No Recording</p>
  </div>

</div>
</body>
</html>