diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
new file mode 100644
index 0000000..53f9fba
--- /dev/null
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -0,0 +1,219 @@
+/**
+ * Demo runner that dynamically loads and executes demo modules
+ */
+
+import {
+  DemoModule,
+  DemoRegistry,
+  DemoRunnerOptions,
+  DemoNavigationEvent,
+} from "./types";
+
+export class DemoRunner {
+  private container: HTMLElement;
+  private basePath: string;
+  private currentDemo: DemoModule | null = null;
+  private currentComponentName: string | null = null;
+  private onDemoChange?: (componentName: string, demo: DemoModule) => void;
+
+  constructor(options: DemoRunnerOptions) {
+    this.container = options.container;
+    this.basePath = options.basePath || "../";
+    this.onDemoChange = options.onDemoChange;
+  }
+
+  /**
+   * Load and display a demo for the specified component
+   */
+  async loadDemo(componentName: string): Promise<void> {
+    try {
+      // Cleanup current demo if any
+      await this.cleanup();
+
+      // Dynamically import the demo module
+      const demoModule = await import(
+        /* @vite-ignore */ `../${componentName}.demo.ts`
+      );
+      const demo: DemoModule = demoModule.default;
+
+      if (!demo) {
+        throw new Error(
+          `Demo module for ${componentName} does not export a default DemoModule`,
+        );
+      }
+
+      // Clear container
+      this.container.innerHTML = "";
+
+      // Load additional styles if specified
+      if (demo.styles) {
+        for (const styleUrl of demo.styles) {
+          await this.loadStylesheet(styleUrl);
+        }
+      }
+
+      // Add custom styles if specified
+      if (demo.customStyles) {
+        this.addCustomStyles(demo.customStyles, componentName);
+      }
+
+      // Import required component modules
+      if (demo.imports) {
+        for (const importPath of demo.imports) {
+          await import(/* @vite-ignore */ this.basePath + importPath);
+        }
+      }
+
+      // Set up the demo
+      await demo.setup(this.container);
+
+      // Update current state
+      this.currentDemo = demo;
+      this.currentComponentName = componentName;
+
+      // Notify listeners
+      if (this.onDemoChange) {
+        this.onDemoChange(componentName, demo);
+      }
+
+      // Dispatch navigation event
+      const event: DemoNavigationEvent = new CustomEvent("demo-navigation", {
+        detail: { componentName, demo },
+      });
+      document.dispatchEvent(event);
+    } catch (error) {
+      console.error(`Failed to load demo for ${componentName}:`, error);
+      this.showError(`Failed to load demo for ${componentName}`, error);
+    }
+  }
+
+  /**
+   * Get list of available demo components by scanning for .demo.ts files
+   */
+  async getAvailableComponents(): Promise<string[]> {
+    // For now, we'll maintain a registry of known demo components
+    // This could be improved with build-time generation
+    const knownComponents = [
+      "sketch-chat-input",
+      "sketch-container-status",
+      "sketch-tool-calls",
+    ];
+
+    // Filter to only components that actually have demo files
+    const availableComponents: string[] = [];
+    for (const component of knownComponents) {
+      try {
+        // Test if the demo module exists by attempting to import it
+        const demoModule = await import(
+          /* @vite-ignore */ `../${component}.demo.ts`
+        );
+        if (demoModule.default) {
+          availableComponents.push(component);
+        }
+      } catch (error) {
+        console.warn(`Demo not available for ${component}:`, error);
+        // Component demo doesn't exist, skip it
+      }
+    }
+
+    return availableComponents;
+  }
+
+  /**
+   * Cleanup current demo
+   */
+  private async cleanup(): Promise<void> {
+    if (this.currentDemo?.cleanup) {
+      await this.currentDemo.cleanup();
+    }
+
+    // Remove custom styles
+    if (this.currentComponentName) {
+      this.removeCustomStyles(this.currentComponentName);
+    }
+
+    this.currentDemo = null;
+    this.currentComponentName = null;
+  }
+
+  /**
+   * Load a CSS stylesheet dynamically
+   */
+  private async loadStylesheet(url: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = url;
+      link.onload = () => resolve();
+      link.onerror = () =>
+        reject(new Error(`Failed to load stylesheet: ${url}`));
+      document.head.appendChild(link);
+    });
+  }
+
+  /**
+   * Add custom CSS styles for a demo
+   */
+  private addCustomStyles(css: string, componentName: string): void {
+    const styleId = `demo-custom-styles-${componentName}`;
+
+    // Remove existing styles for this component
+    const existing = document.getElementById(styleId);
+    if (existing) {
+      existing.remove();
+    }
+
+    // Add new styles
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Remove custom styles for a component
+   */
+  private removeCustomStyles(componentName: string): void {
+    const styleId = `demo-custom-styles-${componentName}`;
+    const existing = document.getElementById(styleId);
+    if (existing) {
+      existing.remove();
+    }
+  }
+
+  /**
+   * Show error message in the demo container
+   */
+  private showError(message: string, error: any): void {
+    this.container.innerHTML = `
+      <div style="
+        padding: 20px;
+        background: #fee;
+        border: 1px solid #fcc;
+        border-radius: 4px;
+        color: #800;
+        font-family: monospace;
+      ">
+        <h3>Demo Error</h3>
+        <p><strong>${message}</strong></p>
+        <details>
+          <summary>Error Details</summary>
+          <pre>${error.stack || error.message || error}</pre>
+        </details>
+      </div>
+    `;
+  }
+
+  /**
+   * Get current demo info
+   */
+  getCurrentDemo(): { componentName: string; demo: DemoModule } | null {
+    if (this.currentComponentName && this.currentDemo) {
+      return {
+        componentName: this.currentComponentName,
+        demo: this.currentDemo,
+      };
+    }
+    return null;
+  }
+}
diff --git a/webui/src/web-components/demo/demo-framework/types.ts b/webui/src/web-components/demo/demo-framework/types.ts
new file mode 100644
index 0000000..88b1fc5
--- /dev/null
+++ b/webui/src/web-components/demo/demo-framework/types.ts
@@ -0,0 +1,57 @@
+/**
+ * TypeScript interfaces for the demo module system
+ */
+
+export interface DemoModule {
+  /** Display title for the demo */
+  title: string;
+
+  /** Component imports required for this demo */
+  imports: string[];
+
+  /** Additional CSS files to load (optional) */
+  styles?: string[];
+
+  /** Setup function called when demo is loaded */
+  setup: (container: HTMLElement) => void | Promise<void>;
+
+  /** Cleanup function called when demo is unloaded (optional) */
+  cleanup?: () => void | Promise<void>;
+
+  /** Demo-specific CSS styles (optional) */
+  customStyles?: string;
+
+  /** Description of what this demo shows (optional) */
+  description?: string;
+}
+
+/**
+ * Registry of available demo modules
+ */
+export interface DemoRegistry {
+  [componentName: string]: () => Promise<{ default: DemoModule }>;
+}
+
+/**
+ * Options for the demo runner
+ */
+export interface DemoRunnerOptions {
+  /** Container element to render demos in */
+  container: HTMLElement;
+
+  /** Base path for component imports */
+  basePath?: string;
+
+  /** Callback when demo changes */
+  onDemoChange?: (componentName: string, demo: DemoModule) => void;
+}
+
+/**
+ * Event dispatched when demo navigation occurs
+ */
+export interface DemoNavigationEvent extends CustomEvent {
+  detail: {
+    componentName: string;
+    demo: DemoModule;
+  };
+}