diff --git a/webui/src/web-components/demo/chat-input.ts b/webui/src/web-components/demo/chat-input.ts
new file mode 100644
index 0000000..7ddcc7e
--- /dev/null
+++ b/webui/src/web-components/demo/chat-input.ts
@@ -0,0 +1,137 @@
+/**
+ * Demo fixture for sketch-chat-input component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Chat Input Component",
+  description: "Chat input with file upload and drag-and-drop support",
+  imports: ["../sketch-chat-input"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Chat Input",
+      "Type a message and press Enter or click Send. Supports file drag-and-drop.",
+    );
+
+    const messagesSection = demoUtils.createDemoSection(
+      "Chat Messages",
+      "Sent messages will appear here",
+    );
+
+    // Create messages display
+    const messagesDiv = document.createElement("div");
+    messagesDiv.id = "chat-messages";
+    messagesDiv.className =
+      "min-h-[100px] max-h-[200px] overflow-y-auto border border-gray-300 rounded-md p-3 mb-3 bg-gray-50";
+
+    // Create chat input
+    const chatInput = document.createElement("sketch-chat-input") as any;
+
+    // Add message display function
+    const addMessage = (
+      message: string,
+      isUser: boolean = true,
+      timestamp?: Date,
+    ) => {
+      const messageDiv = document.createElement("div");
+      messageDiv.className = `p-2 my-1 rounded max-w-xs ${
+        isUser
+          ? "bg-blue-500 text-white ml-auto"
+          : "bg-gray-200 text-gray-900 mr-auto"
+      }`;
+
+      const timeStr = timestamp
+        ? timestamp.toLocaleTimeString()
+        : new Date().toLocaleTimeString();
+      messageDiv.innerHTML = `
+        <div class="text-sm">${message}</div>
+        <div class="text-xs opacity-70 mt-1">${timeStr}</div>
+      `;
+
+      messagesDiv.appendChild(messageDiv);
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    };
+
+    // Handle send events
+    chatInput.addEventListener("send-chat", (evt: any) => {
+      const message = evt.detail.message;
+      if (message.trim()) {
+        addMessage(message, true);
+
+        // Simulate bot response after a delay
+        setTimeout(() => {
+          const responses = [
+            "Message received!",
+            "Thanks for sharing that.",
+            "I see you uploaded a file.",
+            "Processing your request...",
+            "How can I help you further?",
+          ];
+          const randomResponse =
+            responses[Math.floor(Math.random() * responses.length)];
+          addMessage(randomResponse, false);
+        }, 1500);
+      }
+    });
+
+    // Add initial messages
+    addMessage("Welcome to the chat input demo!", false);
+    addMessage("Try typing a message or dragging files here.", false);
+
+    // Control buttons
+    const controlsDiv = document.createElement("div");
+    controlsDiv.className = "mt-4 space-x-2";
+
+    const clearButton = demoUtils.createButton("Clear Chat", () => {
+      messagesDiv.innerHTML = "";
+      addMessage("Chat cleared!", false);
+    });
+
+    const presetButton = demoUtils.createButton("Load Sample Message", () => {
+      chatInput.content =
+        "I need help with implementing a file upload feature. Can you review the attached screenshot?";
+    });
+
+    const multilineButton = demoUtils.createButton("Multiline Message", () => {
+      chatInput.content =
+        "Here's a multiline message:\n\n1. First point\n2. Second point\n3. Third point\n\nWhat do you think?";
+    });
+
+    controlsDiv.appendChild(clearButton);
+    controlsDiv.appendChild(presetButton);
+    controlsDiv.appendChild(multilineButton);
+
+    // File upload status section
+    const statusSection = demoUtils.createDemoSection(
+      "Upload Status",
+      "Current upload status and file handling",
+    );
+
+    const statusDiv = document.createElement("div");
+    statusDiv.className =
+      "bg-blue-50 border border-blue-200 rounded p-3 text-sm";
+    statusDiv.innerHTML = `
+      <div>✓ Drag and drop files onto the chat input</div>
+      <div>✓ Paste images from clipboard</div>
+      <div>✓ Multiple file uploads supported</div>
+      <div>✓ Upload progress indication</div>
+    `;
+
+    statusSection.appendChild(statusDiv);
+
+    // Assemble the demo
+    messagesSection.appendChild(messagesDiv);
+    basicSection.appendChild(chatInput);
+    basicSection.appendChild(controlsDiv);
+
+    container.appendChild(messagesSection);
+    container.appendChild(basicSection);
+    container.appendChild(statusSection);
+  },
+};
+
+export default demo;
diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index c624cb2..7dc02d4 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -94,6 +94,7 @@
     // For now, we'll maintain a registry of known demo components
     // This could be improved with build-time generation
     const knownComponents = [
+      "chat-input",
       "sketch-call-status",
       "sketch-chat-input",
       "sketch-container-status",