diff --git a/webui/src/web-components/demo/sketch-tool-calls.demo.ts b/webui/src/web-components/demo/sketch-tool-calls.demo.ts
new file mode 100644
index 0000000..f279657
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-tool-calls.demo.ts
@@ -0,0 +1,138 @@
+/**
+ * Demo module for sketch-tool-calls component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import {
+  demoUtils,
+  sampleToolCalls,
+  multipleToolCallGroups,
+  longBashCommand,
+} from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Tool Calls Demo",
+  description: "Interactive tool call display with various tool types",
+  imports: ["../sketch-tool-calls"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Tool Calls",
+      "Various types of tool calls with results",
+    );
+
+    const interactiveSection = demoUtils.createDemoSection(
+      "Interactive Examples",
+      "Tool calls that can be modified and updated",
+    );
+
+    const groupsSection = demoUtils.createDemoSection(
+      "Tool Call Groups",
+      "Multiple tool calls grouped together",
+    );
+
+    // Basic tool calls component
+    const basicToolCalls = document.createElement("sketch-tool-calls") as any;
+    basicToolCalls.toolCalls = sampleToolCalls.slice(0, 3);
+
+    // Interactive tool calls component
+    const interactiveToolCalls = document.createElement(
+      "sketch-tool-calls",
+    ) as any;
+    interactiveToolCalls.toolCalls = [sampleToolCalls[0]];
+
+    // Control buttons for interaction
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText = "margin-top: 15px;";
+
+    const addBashButton = demoUtils.createButton("Add Bash Command", () => {
+      const currentCalls = interactiveToolCalls.toolCalls || [];
+      interactiveToolCalls.toolCalls = [...currentCalls, sampleToolCalls[2]];
+    });
+
+    const addLongCommandButton = demoUtils.createButton(
+      "Add Long Command",
+      () => {
+        const currentCalls = interactiveToolCalls.toolCalls || [];
+        interactiveToolCalls.toolCalls = [...currentCalls, longBashCommand];
+      },
+    );
+
+    const clearButton = demoUtils.createButton("Clear Tool Calls", () => {
+      interactiveToolCalls.toolCalls = [];
+    });
+
+    const resetButton = demoUtils.createButton("Reset to Default", () => {
+      interactiveToolCalls.toolCalls = [sampleToolCalls[0]];
+    });
+
+    controlsDiv.appendChild(addBashButton);
+    controlsDiv.appendChild(addLongCommandButton);
+    controlsDiv.appendChild(clearButton);
+    controlsDiv.appendChild(resetButton);
+
+    // Tool call groups
+    const groupsContainer = document.createElement("div");
+    multipleToolCallGroups.forEach((group, index) => {
+      const groupHeader = document.createElement("h4");
+      groupHeader.textContent = `Group ${index + 1}`;
+      groupHeader.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+
+      const groupToolCalls = document.createElement("sketch-tool-calls") as any;
+      groupToolCalls.toolCalls = group;
+
+      groupsContainer.appendChild(groupHeader);
+      groupsContainer.appendChild(groupToolCalls);
+    });
+
+    // Progressive loading demo
+    const progressiveSection = demoUtils.createDemoSection(
+      "Progressive Loading Demo",
+      "Tool calls that appear one by one",
+    );
+
+    const progressiveToolCalls = document.createElement(
+      "sketch-tool-calls",
+    ) as any;
+    progressiveToolCalls.toolCalls = [];
+
+    const startProgressiveButton = demoUtils.createButton(
+      "Start Progressive Load",
+      async () => {
+        progressiveToolCalls.toolCalls = [];
+
+        for (let i = 0; i < sampleToolCalls.length; i++) {
+          await demoUtils.delay(1000);
+          const currentCalls = progressiveToolCalls.toolCalls || [];
+          progressiveToolCalls.toolCalls = [
+            ...currentCalls,
+            sampleToolCalls[i],
+          ];
+        }
+      },
+    );
+
+    const progressiveControls = document.createElement("div");
+    progressiveControls.style.cssText = "margin-top: 15px;";
+    progressiveControls.appendChild(startProgressiveButton);
+
+    // Assemble the demo
+    basicSection.appendChild(basicToolCalls);
+
+    interactiveSection.appendChild(interactiveToolCalls);
+    interactiveSection.appendChild(controlsDiv);
+
+    groupsSection.appendChild(groupsContainer);
+
+    progressiveSection.appendChild(progressiveToolCalls);
+    progressiveSection.appendChild(progressiveControls);
+
+    container.appendChild(basicSection);
+    container.appendChild(interactiveSection);
+    container.appendChild(groupsSection);
+    container.appendChild(progressiveSection);
+  },
+};
+
+export default demo;