From 28a4bbd35d36949352b78c527c03d43d2eba357a Mon Sep 17 00:00:00 2001
From: colinmcneil <colin.mcneil@docker.com>
Date: Wed, 29 Jan 2025 10:35:15 -0500
Subject: [PATCH 1/3] Add simple anon usage tracking to DD extension for
 registry changes

---
 src/extension/ui/src/Usage.tsx                | 53 +++++++++++++++++++
 .../ui/src/components/PromptCard.tsx          |  2 +
 2 files changed, 55 insertions(+)
 create mode 100644 src/extension/ui/src/Usage.tsx

diff --git a/src/extension/ui/src/Usage.tsx b/src/extension/ui/src/Usage.tsx
new file mode 100644
index 0000000..21596e3
--- /dev/null
+++ b/src/extension/ui/src/Usage.tsx
@@ -0,0 +1,53 @@
+/**
+ * Anonymous tracking event for registry changes
+ */
+
+type Record = {
+    event: string;
+    properties: object;
+    event_timestamp: number;
+    source: string;
+};
+
+const eventsQueue: Record[] = [];
+
+let processInterval: NodeJS.Timeout;
+
+export const registryChanged = (name: string, ref: string, action: 'remove' | 'add') => {
+    const record: Record = {
+        event: 'registry-changed',
+        properties: { name, ref, action },
+        event_timestamp: Date.now(),
+        source: 'labs-ai-tools-for-devs-dd'
+    };
+
+    eventsQueue.push(record);
+
+    if (processInterval) clearInterval(processInterval);
+
+    processInterval = setInterval(() => {
+        processEventsQueue();
+    }, 1000);
+};
+
+const processEventsQueue = () => {
+    if (eventsQueue.length === 0) return clearInterval(processInterval);
+
+    const events = eventsQueue.splice(0, eventsQueue.length);
+
+    sendRecords(events);
+};
+
+const sendRecords = (records: any[]) => {
+    const url = 'https://nd14xwptgj.execute-api.us-east-1.amazonaws.com/stage/v1/track';
+    const apiKey = '1234567890';
+
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': apiKey
+        },
+        body: JSON.stringify({ records })
+    });
+};
diff --git a/src/extension/ui/src/components/PromptCard.tsx b/src/extension/ui/src/components/PromptCard.tsx
index 9cf6b6f..42ccfa8 100644
--- a/src/extension/ui/src/components/PromptCard.tsx
+++ b/src/extension/ui/src/components/PromptCard.tsx
@@ -5,6 +5,7 @@ import Button from '@mui/material/Button';
 import { Card, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
 import { Ref } from "../Refs";
 import { useState } from "react";
+import { registryChanged } from "../Usage";
 
 export interface CatalogItem {
     description?: string;
@@ -42,6 +43,7 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                 <Button
                     size="small"
                     onClick={() => {
+                        registryChanged(item.name, item.ref, registered ? 'remove' : 'add');
                         setIsRegistering(true)
                         if (registered) {
                             unregister(item).then(() => {

From a74cd5dfe622eaac5544bba553b5d76b908af525 Mon Sep 17 00:00:00 2001
From: colinmcneil <colin.mcneil@docker.com>
Date: Wed, 29 Jan 2025 10:39:44 -0500
Subject: [PATCH 2/3] Docs changes for desktop catalog

---
 docs/content/tools/docs/_index.md |  1 +
 docs/content/tools/quickstart.md  | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/content/tools/docs/_index.md b/docs/content/tools/docs/_index.md
index bd7a109..78839a8 100644
--- a/docs/content/tools/docs/_index.md
+++ b/docs/content/tools/docs/_index.md
@@ -6,5 +6,6 @@ title: Documentation
 
 * [How to author prompts](prompts)
 * [Updating Claude Desktop](claude-desktop)
+* [Adding to the catalog](adding-to-catalog)
 
 
diff --git a/docs/content/tools/quickstart.md b/docs/content/tools/quickstart.md
index 1247663..af50707 100644
--- a/docs/content/tools/quickstart.md
+++ b/docs/content/tools/quickstart.md
@@ -7,13 +7,19 @@ weight: 1
 
 ### Install
 
-[Configure Docker Desktop](../docs/claude-desktop) to use the `mcp/run` Docker container.
+## Quick Start w/ Docker Desktop Extension
+
+1. Install [Docker Labs AI Tools for Devs](https://hub.docker.com/extensions/docker/labs-ai-tools-for-devs)
+2. Click on the Claude button to add `mcp_docker` toolbox to your Claude Desktop.
+3. Select any prompts you would like to add from the catalog to your toolbox.
+
+or manually [configure claude desktop](../docs/claude-desktop) to use the `mcp/run` Docker container.
 
 ### Restart Claude Desktop
 
 Restarting desktop should be a one-time activity. However, Claude
 Desktop does not support the `tools/list_changed` notification so we
-currently have to restart desktop more less continuously. :)
+currently have to restart desktop more less continuously. Fire up those keybinds :)
 
 ### Try a prompt
 

From a07a8828ca5f2cc65c33b92f834d650948ad304c Mon Sep 17 00:00:00 2001
From: colinmcneil <colin.mcneil@docker.com>
Date: Wed, 29 Jan 2025 10:47:09 -0500
Subject: [PATCH 3/3] Add claude config change event

---
 src/extension/ui/src/Usage.tsx                | 29 +++++++++++++++----
 .../src/components/ClaudeConfigSyncStatus.tsx |  3 ++
 .../ui/src/components/PromptCard.tsx          |  6 ++--
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/extension/ui/src/Usage.tsx b/src/extension/ui/src/Usage.tsx
index 21596e3..c4f1e95 100644
--- a/src/extension/ui/src/Usage.tsx
+++ b/src/extension/ui/src/Usage.tsx
@@ -2,21 +2,40 @@
  * Anonymous tracking event for registry changes
  */
 
-type Record = {
+interface Record {
     event: string;
     properties: object;
     event_timestamp: number;
     source: string;
 };
 
+export interface RegistryChangedRecord extends Record {
+    event: 'registry-changed';
+    properties: {
+        name: string;
+        ref: string;
+        action: 'remove' | 'add';
+    };
+};
+
+export interface ClaudeConfigChangedRecord extends Record {
+    event: 'claude-config-changed';
+    properties: {
+        action: 'add' | 'remove';
+    };
+};
+
 const eventsQueue: Record[] = [];
 
 let processInterval: NodeJS.Timeout;
 
-export const registryChanged = (name: string, ref: string, action: 'remove' | 'add') => {
+type Event = (RegistryChangedRecord | ClaudeConfigChangedRecord)['event'];
+type Properties = (RegistryChangedRecord | ClaudeConfigChangedRecord)['properties'];
+
+export const trackEvent = (event: Event, properties: Properties) => {
     const record: Record = {
-        event: 'registry-changed',
-        properties: { name, ref, action },
+        event,
+        properties,
         event_timestamp: Date.now(),
         source: 'labs-ai-tools-for-devs-dd'
     };
@@ -38,7 +57,7 @@ const processEventsQueue = () => {
     sendRecords(events);
 };
 
-const sendRecords = (records: any[]) => {
+const sendRecords = (records: Record[]) => {
     const url = 'https://nd14xwptgj.execute-api.us-east-1.amazonaws.com/stage/v1/track';
     const apiKey = '1234567890';
 
diff --git a/src/extension/ui/src/components/ClaudeConfigSyncStatus.tsx b/src/extension/ui/src/components/ClaudeConfigSyncStatus.tsx
index c7fe8b4..cd1280f 100644
--- a/src/extension/ui/src/components/ClaudeConfigSyncStatus.tsx
+++ b/src/extension/ui/src/components/ClaudeConfigSyncStatus.tsx
@@ -2,6 +2,7 @@ import { v1 } from "@docker/extension-api-client-types";
 import { Badge, Button, Dialog, DialogContent, DialogContentText, DialogTitle, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { writeFilesToHost } from "../FileWatcher";
+import { trackEvent } from "../Usage";
 
 const DOCKER_MCP_CONFIG = {
     "command": "docker",
@@ -94,6 +95,7 @@ export const ClaudeConfigSyncStatus = ({ client }: { client: v1.DockerDesktopCli
         return <Dialog open={showConfigModal} onClose={() => setShowConfigModal(false)} maxWidth="lg">
             <DialogTitle>Current Claude Desktop Config</DialogTitle>
             {status.state === 'has docker_mcp' && <Button onClick={async () => {
+                trackEvent('claude-config-changed', { action: 'remove' })
                 // Remove docker_mcp from config
                 if (claudeConfig && claudeConfig.mcpServers) {
                     const newConfig = { ...claudeConfig }
@@ -104,6 +106,7 @@ export const ClaudeConfigSyncStatus = ({ client }: { client: v1.DockerDesktopCli
                 }
             }}>Remove Docker MCP</Button>}
             {status.state === 'missing docker_mcp' && <Button onClick={() => {
+                trackEvent('claude-config-changed', { action: 'add' })
                 // Add docker_mcp to config
                 if (claudeConfig && claudeConfig.mcpServers) {
                     const newConfig = { ...claudeConfig }
diff --git a/src/extension/ui/src/components/PromptCard.tsx b/src/extension/ui/src/components/PromptCard.tsx
index 42ccfa8..01ef2da 100644
--- a/src/extension/ui/src/components/PromptCard.tsx
+++ b/src/extension/ui/src/components/PromptCard.tsx
@@ -1,11 +1,9 @@
 import { CircularProgress, Stack } from "@mui/material";
 import Button from '@mui/material/Button';
-
-
 import { Card, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
 import { Ref } from "../Refs";
 import { useState } from "react";
-import { registryChanged } from "../Usage";
+import { trackEvent } from "../Usage";
 
 export interface CatalogItem {
     description?: string;
@@ -43,7 +41,7 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                 <Button
                     size="small"
                     onClick={() => {
-                        registryChanged(item.name, item.ref, registered ? 'remove' : 'add');
+                        trackEvent('registry-changed', { name: item.name, ref: item.ref, action: registered ? 'remove' : 'add' });
                         setIsRegistering(true)
                         if (registered) {
                             unregister(item).then(() => {