@mediagraph/mcp 1.0.11 → 1.0.13

package/dist/index.js

@@ -12,6 +12,9 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { exec } from "child_process";
 import { platform } from "os";
+import { readFileSync as readFileSync2, existsSync as existsSync2 } from "fs";
+import { fileURLToPath } from "url";
+import { dirname as dirname2, join as join2 } from "path";
 
 // src/auth/oauth.ts
 import { createHash, randomBytes } from "crypto";
@@ -660,13 +663,32 @@ var MediagraphClient = class {
     return this.request("GET", `/api/assets/${id}/face_taggings`);
   }
   async getAssetDownload(id, options) {
-    const params = {};
-    if (options?.size) params.size = options.size;
-    if (options?.watermarked) params.watermarked = true;
-    if (options?.version_number) params.version_number = options.version_number;
-    if (options?.via) params.via = options.via;
-    if (options?.skip_meta) params.skip_meta = true;
-    return this.request("GET", `/api/assets/${id}/download`, { params });
+    const prepareResponse = await this.createDownload({
+      asset_ids: [typeof id === "string" ? parseInt(id, 10) : id],
+      size: options?.size || "original",
+      watermarked: options?.watermarked,
+      via: options?.via,
+      skip_meta: options?.skip_meta
+    });
+    const downloadUrl = `${this.apiUrl}/api/downloads/${prepareResponse.token}`;
+    return {
+      url: downloadUrl,
+      filename: prepareResponse.filename || `asset-${id}`
+    };
+  }
+  async getBulkDownload(options) {
+    const prepareResponse = await this.createDownload({
+      asset_ids: options.asset_ids,
+      size: options.size || "original",
+      watermarked: options.watermarked,
+      via: options.via,
+      skip_meta: options.skip_meta
+    });
+    const downloadUrl = `${this.apiUrl}/api/downloads/${prepareResponse.token}`;
+    return {
+      url: downloadUrl,
+      filename: prepareResponse.filename || `mediagraph-download-${options.asset_ids.length}-assets.zip`
+    };
   }
   async addAssetVersion(id, data) {
     return this.request("POST", `/api/assets/${id}/add_version`, { body: data });
@@ -1247,7 +1269,20 @@ var MediagraphClient = class {
     return this.request("GET", `/api/downloads/${token}`);
   }
   async createDownload(data) {
-    return this.request("POST", "/api/downloads", { body: { download: data } });
+    const download = {
+      asset_ids: data.asset_ids,
+      size: data.size
+    };
+    if (data.watermarked === true) {
+      download.watermarked = true;
+    }
+    if (data.via) {
+      download.via = data.via;
+    }
+    if (data.skip_meta === true) {
+      download.skip_meta = true;
+    }
+    return this.request("POST", "/api/downloads", { body: { download } });
   }
   // ============================================================================
   // Webhooks
@@ -1649,6 +1684,29 @@ COMMON SEARCH FIELDS:
         required: ["id"]
       }
     },
+    {
+      name: "bulk_download_assets",
+      description: "Get a download URL for multiple assets (returns a ZIP file)",
+      inputSchema: {
+        type: "object",
+        properties: {
+          asset_ids: {
+            type: "array",
+            items: { type: "number" },
+            description: "Array of asset IDs to download"
+          },
+          size: {
+            type: "string",
+            enum: ["small", "permalink", "full", "original"],
+            description: "Maximum size for all assets in the download (default: original)"
+          },
+          watermarked: { type: "boolean", description: "Request watermarked versions" },
+          via: { type: "string", description: "Description of the app or integration making the call" },
+          skip_meta: { type: "boolean", description: "Do not write metadata to files" }
+        },
+        required: ["asset_ids"]
+      }
+    },
     {
       name: "get_asset_auto_tags",
       description: "Get AI-generated auto tags for an asset",
@@ -1728,6 +1786,15 @@ COMMON SEARCH FIELDS:
         version_number: args.version_number
       }));
     },
+    async bulk_download_assets(args, { client: client2 }) {
+      return successResult(await client2.getBulkDownload({
+        asset_ids: args.asset_ids,
+        size: args.size,
+        watermarked: args.watermarked,
+        via: args.via,
+        skip_meta: args.skip_meta
+      }));
+    },
     async get_asset_auto_tags(args, { client: client2 }) {
       return successResult(await client2.getAssetAutoTags(args.id));
     },
@@ -2647,8 +2714,8 @@ var downloadTools = {
           asset_ids: { type: "array", items: { type: "number" } },
           size: {
             type: "string",
-            enum: ["small", "small-watermark", "permalink", "permalink-watermark", "full", "full-watermark", "original"],
-            description: "Maximum size requested for assets in the download"
+            enum: ["small", "medium", "full", "original"],
+            description: "Maximum size requested for assets in the download (default: original)"
           }
         },
         required: ["asset_ids"]
@@ -2662,7 +2729,8 @@ var downloadTools = {
   ],
   handlers: {
     async create_download(args, { client: client2 }) {
-      return successResult(await client2.createDownload(args));
+      const { asset_ids, size = "original" } = args;
+      return successResult(await client2.createDownload({ asset_ids, size }));
     },
     async get_download(args, { client: client2 }) {
       return successResult(await client2.getDownload(args.token));
@@ -3281,6 +3349,100 @@ var adminTools = {
   }
 };
 
+// src/tools/app.ts
+var appTools = {
+  definitions: [
+    {
+      name: "search_assets_visual",
+      description: `Search for assets and display results in an interactive visual gallery.
+
+This tool provides a rich visual interface for browsing search results with:
+- Thumbnail grid with hover previews
+- Click to view full asset details
+- Inline editing of metadata
+- Rating, tagging, and download options
+- Pagination controls
+
+Use this when the user wants to visually browse or explore assets.`,
+      inputSchema: {
+        type: "object",
+        properties: {
+          q: { type: "string", description: "Search query with optional advanced operators (AND, OR, NOT, field:value, wildcards)" },
+          ...paginationParams,
+          ids: { type: "array", items: { type: "number" }, description: "Filter by specific asset IDs" },
+          guids: { type: "array", items: { type: "string" }, description: "Filter by specific asset GUIDs" },
+          tags: { type: "array", items: { type: "string" }, description: "Filter by tags" },
+          collection_id: { type: "number", description: "Filter by collection ID" },
+          storage_folder_id: { type: "number", description: "Filter by storage folder ID" },
+          lightbox_id: { type: "number", description: "Filter by lightbox ID" },
+          exts: { type: "array", items: { type: "string" }, description: "Filter by file extensions" },
+          rating: { type: "array", items: { type: "number" }, description: "Filter by rating range [min, max]" },
+          aspect: { type: "string", enum: ["square", "portrait", "landscape", "panorama"] },
+          has_people: { type: "string", enum: ["yes", "no", "untagged"] },
+          has_alt_text: { type: "string", enum: ["yes", "no"] },
+          gps: { type: "boolean", description: "Filter for assets with GPS data" },
+          captured_at: { type: "array", items: { type: "string" }, description: "Date range [start, end] in ISO 8601" },
+          created_at: { type: "array", items: { type: "string" }, description: "Date range [start, end] in ISO 8601" }
+        },
+        required: []
+      },
+      // MCP Apps metadata - tells the host to display the UI
+      // Include both formats for compatibility with different host versions
+      _meta: {
+        ui: {
+          resourceUri: "ui://mediagraph/gallery"
+        },
+        "ui/resourceUri": "ui://mediagraph/gallery"
+        // Legacy format for older hosts
+      }
+    }
+  ],
+  handlers: {
+    async search_assets_visual(args, { client: client2, organizationSlug }) {
+      const params = {
+        ...args,
+        include_renditions: false,
+        // Don't include all renditions to reduce size
+        include_totals: true,
+        per_page: args.per_page || 24
+        // Reasonable default
+      };
+      const response = await client2.searchAssets(params);
+      const lightAssets = response.assets.map((asset) => ({
+        id: asset.id,
+        guid: asset.guid,
+        filename: asset.filename,
+        title: asset.title,
+        description: asset.description,
+        alt_text: asset.alt_text,
+        type: asset.type || asset.file_type,
+        ext: asset.ext,
+        width: asset.width,
+        height: asset.height,
+        duration: asset.duration,
+        rating: asset.rating,
+        // Tags come as objects from API, extract just the names
+        tags: asset.tags?.map((tag) => typeof tag === "string" ? tag : tag.name).filter(Boolean),
+        thumb_url: asset.thumb_url,
+        grid_url: asset.grid_url,
+        small_url: asset.small_url,
+        preview_url: asset.preview_url,
+        created_at: asset.created_at,
+        updated_at: asset.updated_at,
+        captured_at: asset.captured_at
+      }));
+      return successResult({
+        assets: lightAssets,
+        total: response.total,
+        page: response.page,
+        per_page: response.per_page,
+        total_pages: response.total_pages,
+        organization_slug: organizationSlug
+      });
+    }
+  }
+};
+
 // src/tools/index.ts
 var allToolModules = [
   userTools,
@@ -3296,7 +3458,8 @@ var allToolModules = [
   downloadTools,
   uploadTools,
   webhookTools,
-  adminTools
+  adminTools,
+  appTools
 ];
 var toolDefinitions = allToolModules.flatMap((m) => m.definitions);
 var allHandlers = {};
@@ -3495,31 +3658,56 @@ function openBrowser(url) {
 }
 async function runAutoAuth() {
   if (isAuthInProgress) {
-    while (isAuthInProgress) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
+    console.error("[MCP] OAuth already in progress, waiting for completion...");
+    const waitStart = Date.now();
+    const maxWait = 12e4;
+    while (isAuthInProgress && Date.now() - waitStart < maxWait) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+    if (isAuthInProgress) {
+      console.error("[MCP] Timed out waiting for existing OAuth flow");
+      return false;
     }
     return currentTokens !== null;
   }
   isAuthInProgress = true;
+  console.error("[MCP] Starting OAuth flow...");
   try {
     const authUrl = oauthHandler.getAuthorizationUrl();
     await oauthHandler.startCallbackServer();
+    console.error("[MCP] Callback server ready, opening browser...");
     openBrowser(authUrl);
+    console.error("[MCP] Waiting for OAuth callback...");
     const { code } = await oauthHandler.waitForCallback();
+    console.error("[MCP] OAuth callback received, exchanging code...");
     const tokens = await oauthHandler.exchangeCode(code);
     currentTokens = tokens;
-    const whoami = await client.whoami();
-    const storedData = {
-      tokens,
-      organizationId: whoami.organization.id,
-      organizationName: whoami.organization.name,
-      userId: whoami.user.id,
-      userEmail: whoami.user.email
-    };
+    console.error("[MCP] Token exchange successful");
+    let storedData = { tokens };
     tokenStore.save(storedData);
+    try {
+      const whoami = await client.whoami();
+      if (whoami?.organization?.id) {
+        const org = whoami.organization;
+        storedData = {
+          tokens,
+          organizationId: org.id,
+          organizationName: org.title || org.name,
+          organizationSlug: org.slug,
+          userId: whoami.user?.id,
+          userEmail: whoami.user?.email
+        };
+        tokenStore.save(storedData);
+        console.error(`[MCP] Authenticated as ${whoami.user?.email} in ${org.title || org.name}`);
+      } else {
+        console.error("[MCP] Authenticated (whoami returned incomplete data)");
+      }
+    } catch (whoamiError) {
+      console.error("[MCP] Authenticated (whoami failed, tokens saved):", whoamiError);
+    }
     return true;
   } catch (error) {
-    console.error("Auto-auth failed:", error);
+    console.error("[MCP] Auto-auth failed:", error);
     oauthHandler.stopCallbackServer();
     return false;
   } finally {
@@ -3558,6 +3746,10 @@ var client = new MediagraphClient({
 });
 var toolContext = { client };
 var resourceContext = { client };
+function getOrganizationSlug() {
+  const stored = tokenStore.load();
+  return stored?.organizationSlug;
+}
 var server = new Server(
   {
     name: "mediagraph-mcp",
@@ -3579,33 +3771,48 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
   const { name, arguments: args } = request.params;
   let token = await getAccessToken();
   if (!token) {
-    const authSuccess = await runAutoAuth();
-    if (!authSuccess) {
-      return {
-        content: [
-          {
-            type: "text",
-            text: "Failed to authenticate with Mediagraph. Please try again or check your browser for the authorization window."
-          }
-        ],
-        isError: true
-      };
+    if (isAuthInProgress) {
+      console.error("[MCP] OAuth in progress, waiting...");
+      const waitStart = Date.now();
+      const maxWait = 12e4;
+      while (isAuthInProgress && Date.now() - waitStart < maxWait) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      }
+      token = await getAccessToken();
+      if (token) {
+        console.error("[MCP] OAuth completed, proceeding with request");
+      }
     }
-    token = await getAccessToken();
     if (!token) {
-      return {
-        content: [
-          {
-            type: "text",
-            text: "Authentication completed but failed to retrieve access token. Please try again."
-          }
-        ],
-        isError: true
-      };
+      const authSuccess = await runAutoAuth();
+      if (!authSuccess) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "Authorization is in progress. Please complete the login in your browser, then try this request again."
+            }
+          ],
+          isError: true
+        };
+      }
+      token = await getAccessToken();
+      if (!token) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "Authentication completed but failed to retrieve access token. Please try again."
+            }
+          ],
+          isError: true
+        };
+      }
     }
   }
   console.error(`[MCP] Tool call: ${name}`);
   console.error(`[MCP] Arguments: ${JSON.stringify(args, null, 2)}`);
+  toolContext.organizationSlug = getOrganizationSlug();
   const result = await handleTool(name, args || {}, toolContext);
   if (result.isError) {
     console.error(`[MCP] Tool error: ${result.content[0]?.text}`);
@@ -3632,6 +3839,9 @@ server.setRequestHandler(ListResourcesRequestSchema, async () => {
 });
 server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
   const { uri } = request.params;
+  if (uri.startsWith("ui://mediagraph/")) {
+    return handleAppResource(uri);
+  }
   let token = await getAccessToken();
   if (!token) {
     const authSuccess = await runAutoAuth();
@@ -3664,6 +3874,57 @@ server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
     contents: [content]
   };
 });
+function handleAppResource(uri) {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname2(__filename);
+  const appPath = join2(__dirname, "app", "index.html");
+  if (!existsSync2(appPath)) {
+    console.error(`[MCP] App resource not found at: ${appPath}`);
+    return {
+      contents: [
+        {
+          uri,
+          mimeType: "text/plain",
+          text: "MCP App UI not found. Please rebuild the project with npm run build."
+        }
+      ]
+    };
+  }
+  try {
+    const html = readFileSync2(appPath, "utf-8");
+    return {
+      contents: [
+        {
+          uri,
+          mimeType: "text/html;profile=mcp-app",
+          text: html,
+          // CSP configuration to allow loading images from Mediagraph CDN
+          _meta: {
+            ui: {
+              csp: {
+                // Allow images from CloudFront CDN
+                resourceDomains: ["https://*.cloudfront.net"],
+                // Allow API calls to Mediagraph (for future use)
+                connectDomains: ["https://api.mediagraph.io"]
+              }
+            }
+          }
+        }
+      ]
+    };
+  } catch (error) {
+    console.error("[MCP] Failed to read app resource:", error);
+    return {
+      contents: [
+        {
+          uri,
+          mimeType: "text/plain",
+          text: "Failed to load MCP App UI."
+        }
+      ]
+    };
+  }
+}
 async function runAuthorize() {
   if (!config.clientId) {
     console.error("Error: MEDIAGRAPH_CLIENT_ID environment variable is required");
@@ -3690,18 +3951,25 @@ async function runAuthorize() {
     console.log("Tokens received successfully.");
     currentTokens = tokens;
     const whoami = await client.whoami();
+    console.log("Whoami response:", JSON.stringify(whoami, null, 2));
+    const org = whoami.organization;
     const storedData = {
       tokens,
-      organizationId: whoami.organization.id,
-      organizationName: whoami.organization.name,
-      userId: whoami.user.id,
-      userEmail: whoami.user.email
+      organizationId: org?.id,
+      organizationName: org?.title || org?.name,
+      organizationSlug: org?.slug,
+      userId: whoami.user?.id,
+      userEmail: whoami.user?.email
     };
     tokenStore.save(storedData);
     console.log("");
     console.log("Successfully authorized!");
-    console.log(`Organization: ${whoami.organization.name}`);
-    console.log(`User: ${whoami.user.full_name} (${whoami.user.email})`);
+    if (org) {
+      console.log(`Organization: ${org.title || org.name} (${org.slug})`);
+    }
+    if (whoami.user) {
+      console.log(`User: ${whoami.user.full_name || whoami.user.email} (${whoami.user.email})`);
+    }
     console.log("");
     console.log("You can now use the Mediagraph MCP server.");
   } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediagraph/mcp",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "MCP server for Mediagraph - Media Asset Management Platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,10 +8,15 @@
     "mediagraph-mcp": "./dist/index.js"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean",
+    "build": "NODE_ENV=production tsup src/index.ts --format esm --dts --clean && npm run build:app:prod",
+    "build:dev": "tsup src/index.ts --format esm --dts --clean && npm run build:app:dev",
+    "build:app:prod": "NODE_ENV=production vite build --config vite.config.ts",
+    "build:app:dev": "NODE_ENV=development vite build --config vite.config.ts",
+    "build:app": "vite build --config vite.config.ts",
     "dev": "tsup src/index.ts --format esm --watch",
+    "dev:app": "vite --config vite.config.ts",
     "start": "node dist/index.js",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --project tsconfig.app.json --noEmit",
     "lint": "eslint src/**/*.ts",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -46,13 +51,21 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@modelcontextprotocol/ext-apps": "^1.0.1",
     "@modelcontextprotocol/sdk": "^1.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
     "eslint": "^8.56.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
+    "vite": "^5.4.0",
+    "vite-plugin-singlefile": "^2.0.0",
     "vitest": "^1.1.0"
   }
 }