diff --git a/webui/src/web-components/demo/index-generated.html b/webui/src/web-components/demo/index-generated.html
new file mode 100644
index 0000000..7460e78
--- /dev/null
+++ b/webui/src/web-components/demo/index-generated.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Web Components - Demo Index</title>
+    <link rel="stylesheet" href="demo.css" />
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        max-width: 800px;
+        margin: 40px auto;
+        padding: 20px;
+        line-height: 1.6;
+      }
+
+      h1 {
+        color: #24292f;
+        border-bottom: 1px solid #d1d9e0;
+        padding-bottom: 10px;
+      }
+
+      .demo-list {
+        list-style: none;
+        padding: 0;
+      }
+
+      .demo-list li {
+        margin: 15px 0;
+        padding: 15px;
+        border: 1px solid #d1d9e0;
+        border-radius: 6px;
+        background: #f6f8fa;
+        transition: background-color 0.2s;
+      }
+
+      .demo-list li:hover {
+        background: #ffffff;
+      }
+
+      .demo-list a {
+        text-decoration: none;
+        color: #0969da;
+        display: block;
+      }
+
+      .demo-list a:hover {
+        text-decoration: underline;
+      }
+
+      .demo-list strong {
+        font-size: 16px;
+        display: block;
+        margin-bottom: 5px;
+      }
+
+      .stats {
+        background: #fff8dc;
+        padding: 15px;
+        border-radius: 6px;
+        margin: 20px 0;
+        border-left: 4px solid #f9c23c;
+      }
+
+      .runner-link {
+        display: inline-block;
+        padding: 10px 20px;
+        background: #0969da;
+        color: white;
+        text-decoration: none;
+        border-radius: 6px;
+        margin-top: 20px;
+      }
+
+      .runner-link:hover {
+        background: #0860ca;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sketch Web Components Demo Index</h1>
+
+    <div class="stats">
+      <strong>Auto-generated index</strong><br />
+      Found 3 demo components • Last updated: 6/25/2025, 8:50:21 PM
+    </div>
+
+    <p>
+      This page provides an overview of all available component demos. Click on
+      any component below to view its interactive demo.
+    </p>
+
+    <a href="demo-runner.html" class="runner-link">🚀 Launch Demo Runner</a>
+
+    <h2>Available Component Demos</h2>
+
+    <ul class="demo-list">
+      <li>
+        <a href="demo-runner.html#sketch-chat-input">
+          <strong>Chat Input Demo</strong> - Interactive chat input component
+          with send functionality
+        </a>
+      </li>
+      <li>
+        <a href="demo-runner.html#sketch-container-status">
+          <strong>Container Status Demo</strong> - Display container status
+          information with usage statistics
+        </a>
+      </li>
+      <li>
+        <a href="demo-runner.html#sketch-tool-calls">
+          <strong>Tool Calls Demo</strong> - Interactive tool call display with
+          various tool types
+        </a>
+      </li>
+    </ul>
+
+    <hr style="margin: 40px 0; border: none; border-top: 1px solid #d1d9e0" />
+
+    <p>
+      <em
+        >This index is automatically generated from available
+        <code>*.demo.ts</code> files.</em
+      ><br />
+      To add a new demo, create a <code>component-name.demo.ts</code> file in
+      this directory.
+    </p>
+  </body>
+</html>