Merge pull request #38 from docker/cm/usage

Basic usage tracking & docs inclusions

Author: ColinMcNeil

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)
 
 

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
 

src/extension/ui/src/Usage.tsx

@@ -0,0 +1,72 @@
+/**
+ * Anonymous tracking event for registry changes
+ */
+
+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;
+
+type Event = (RegistryChangedRecord | ClaudeConfigChangedRecord)['event'];
+type Properties = (RegistryChangedRecord | ClaudeConfigChangedRecord)['properties'];
+
+export const trackEvent = (event: Event, properties: Properties) => {
+    const record: Record = {
+        event,
+        properties,
+        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: Record[]) => {
+    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 })
+    });
+};

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 }

src/extension/ui/src/components/PromptCard.tsx

@@ -1,10 +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 { trackEvent } from "../Usage";
 
 export interface CatalogItem {
     description?: string;
@@ -42,6 +41,7 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                 <Button
                     size="small"
                     onClick={() => {
+                        trackEvent('registry-changed', { name: item.name, ref: item.ref, action: registered ? 'remove' : 'add' });
                         setIsRegistering(true)
                         if (registered) {
                             unregister(item).then(() => {