npm - @swatcha/mcp-server - Versions diffs - 0.1.0 - Mend

@swatcha/mcp-server 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/apps/image-picker-spike.d.ts +2 -0
package/dist/apps/image-picker-spike.d.ts.map +1 -0
package/dist/apps/image-picker-spike.js +100 -0
package/dist/apps/image-picker-spike.js.map +1 -0
package/dist/apps/src/apps/image-picker-spike.html +156 -0
package/dist/apps/src/apps/image-picker.html +130 -0
package/dist/client.d.ts +87 -0
package/dist/client.d.ts.map +1 -0
package/dist/client.js +105 -0
package/dist/client.js.map +1 -0
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +590 -0
package/dist/index.js.map +1 -0
package/package.json +38 -0
package/src/apps/image-picker.html +16 -0
package/src/apps/image-picker.tsx +423 -0
package/src/client.ts +187 -0
package/src/index.ts +772 -0
package/tsconfig.app.json +16 -0
package/tsconfig.json +18 -0
package/vite.config.ts +16 -0

package/src/apps/image-picker.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Select Product Images</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { background: var(--color-background-primary, #1a1a2e); }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./image-picker.tsx"></script>
+</body>
+</html>

package/src/apps/image-picker.tsx ADDED Viewed

@@ -0,0 +1,423 @@
+import { createRoot } from 'react-dom/client';
+import { useState, useCallback } from 'react';
+import { useApp, useHostStyles } from '@modelcontextprotocol/ext-apps/react';
+import type { CallToolResult } from '@modelcontextprotocol/ext-apps';
+// ============================================================================
+// Types
+// ============================================================================
+interface ImageCandidate {
+  imageUrl: string;
+  thumbnailUrl: string;
+  title: string;
+  sourceDomain: string;
+  sourceUrl?: string;
+}
+interface ProductEntry {
+  productId: string;
+  productName: string;
+  supplier?: string;
+  candidates: ImageCandidate[];
+}
+interface PickerData {
+  products: ProductEntry[];
+  batchLabel?: string;
+}
+// ============================================================================
+// Styles
+// ============================================================================
+const styles = {
+  body: {
+    fontFamily: 'var(--font-sans, system-ui, sans-serif)',
+    background: 'var(--color-background-primary, #1a1a2e)',
+    color: 'var(--color-text-primary, #e2e8f0)',
+    padding: 16,
+  },
+  header: {
+    display: 'flex' as const,
+    justifyContent: 'space-between' as const,
+    alignItems: 'baseline' as const,
+    marginBottom: 16,
+  },
+  title: { fontSize: 16, fontWeight: 600 },
+  batchInfo: {
+    fontSize: 12,
+    color: 'var(--color-text-secondary, #94a3b8)',
+  },
+  productSection: (isLast: boolean) => ({
+    marginBottom: 20,
+    paddingBottom: 16,
+    borderBottom: isLast ? 'none' : '1px solid var(--color-border, #334155)',
+  }),
+  productHeader: {
+    display: 'flex' as const,
+    justifyContent: 'space-between' as const,
+    alignItems: 'baseline' as const,
+    marginBottom: 8,
+  },
+  productName: { fontSize: 14, fontWeight: 500 },
+  productSupplier: {
+    fontSize: 12,
+    color: 'var(--color-text-secondary, #94a3b8)',
+  },
+  statusBadge: (state: 'selected' | 'skipped') => ({
+    fontSize: 11,
+    padding: '2px 8px',
+    borderRadius: 10,
+    background:
+      state === 'selected'
+        ? 'rgba(124, 58, 237, 0.15)'
+        : 'rgba(148, 163, 184, 0.1)',
+    color: state === 'selected' ? '#7c3aed' : 'var(--color-text-secondary, #94a3b8)',
+  }),
+  imagesRow: {
+    display: 'flex' as const,
+    gap: 8,
+    overflowX: 'auto' as const,
+    padding: '6px 2px',
+  },
+  imageCard: (isSelected: boolean) => ({
+    flex: '0 0 auto',
+    width: 130,
+    border: `2px solid ${isSelected ? '#7c3aed' : 'transparent'}`,
+    borderRadius: 8,
+    overflow: 'hidden' as const,
+    cursor: 'pointer' as const,
+    background: 'var(--color-background-secondary, #2a2a4a)',
+    transition: 'border-color 0.15s, transform 0.15s, opacity 0.15s',
+    transform: isSelected ? 'scale(1.05)' : 'scale(1)',
+    opacity: isSelected ? 1 : 0.6,
+    position: 'relative' as const,
+  }),
+  checkmark: {
+    position: 'absolute' as const,
+    top: 4,
+    right: 4,
+    width: 22,
+    height: 22,
+    borderRadius: '50%',
+    background: '#7c3aed',
+    display: 'flex' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    zIndex: 1,
+  },
+  img: {
+    width: '100%',
+    height: 90,
+    objectFit: 'cover' as const,
+    display: 'block' as const,
+  },
+  meta: {
+    padding: '4px 6px',
+    fontSize: 10,
+    whiteSpace: 'nowrap' as const,
+    overflow: 'hidden' as const,
+    textOverflow: 'ellipsis' as const,
+  },
+  metaLink: {
+    color: 'var(--color-text-secondary, #94a3b8)',
+    textDecoration: 'none' as const,
+  },
+  metaText: {
+    color: 'var(--color-text-secondary, #94a3b8)',
+  },
+  skipLink: {
+    display: 'inline-block' as const,
+    marginTop: 6,
+    fontSize: 11,
+    color: 'var(--color-text-secondary, #94a3b8)',
+    cursor: 'pointer' as const,
+    textDecoration: 'underline' as const,
+    textUnderlineOffset: 2,
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    fontFamily: 'inherit',
+  },
+  footer: {
+    marginTop: 16,
+    display: 'flex' as const,
+    gap: 8,
+    alignItems: 'center' as const,
+  },
+  btnPrimary: {
+    padding: '8px 16px',
+    border: 'none' as const,
+    borderRadius: 6,
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: 'pointer' as const,
+    background: '#7c3aed',
+    color: 'white',
+    fontFamily: 'inherit',
+  },
+  status: {
+    fontSize: 12,
+    color: 'var(--color-text-secondary, #94a3b8)',
+  },
+  error: {
+    fontSize: 12,
+    color: '#ef4444',
+    marginTop: 8,
+  },
+  imgError: {
+    width: '100%',
+    height: 90,
+    display: 'flex' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    fontSize: 11,
+    color: 'var(--color-text-secondary, #94a3b8)',
+    background: 'var(--color-background-secondary, #2a2a4a)',
+  },
+} as const;
+// ============================================================================
+// Components
+// ============================================================================
+function CheckmarkIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+function ImageCard({
+  candidate,
+  isSelected,
+  onClick,
+}: {
+  candidate: ImageCandidate;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  const [imgError, setImgError] = useState(false);
+  return (
+    <div style={styles.imageCard(isSelected)} onClick={onClick}>
+      {isSelected && (
+        <div style={styles.checkmark}>
+          <CheckmarkIcon />
+        </div>
+      )}
+      {imgError ? (
+        <div style={styles.imgError}>Failed to load</div>
+      ) : (
+        <img
+          src={candidate.thumbnailUrl || candidate.imageUrl}
+          alt={candidate.title}
+          loading="lazy"
+          style={styles.img}
+          onError={() => setImgError(true)}
+        />
+      )}
+      <div style={styles.meta}>
+        {candidate.sourceUrl ? (
+          <a
+            href={candidate.sourceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            style={styles.metaLink}
+          >
+            {candidate.sourceDomain}
+          </a>
+        ) : (
+          <span style={styles.metaText}>{candidate.sourceDomain}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+function ProductSection({
+  product,
+  isLast,
+  selection,
+  onSelect,
+  onSkip,
+}: {
+  product: ProductEntry;
+  isLast: boolean;
+  selection: string | null;
+  onSelect: (imageUrl: string) => void;
+  onSkip: () => void;
+}) {
+  const isSkipped = selection === null;
+  const selectedIdx = product.candidates.findIndex((c) => c.imageUrl === selection);
+  const statusText =
+    product.candidates.length === 0
+      ? 'No candidates'
+      : isSkipped
+        ? 'Skipped'
+        : `Image ${selectedIdx + 1} selected`;
+  const statusState: 'selected' | 'skipped' =
+    product.candidates.length === 0 || isSkipped ? 'skipped' : 'selected';
+  return (
+    <div style={styles.productSection(isLast)}>
+      <div style={styles.productHeader}>
+        <div>
+          <span style={styles.productName}>{product.productName}</span>
+          {product.supplier && (
+            <span style={styles.productSupplier}> from {product.supplier}</span>
+          )}
+        </div>
+        <span style={styles.statusBadge(statusState)}>{statusText}</span>
+      </div>
+      {product.candidates.length > 0 && (
+        <>
+          <div style={styles.imagesRow}>
+            {product.candidates.map((candidate, idx) => (
+              <ImageCard
+                key={idx}
+                candidate={candidate}
+                isSelected={selection === candidate.imageUrl}
+                onClick={() => onSelect(candidate.imageUrl)}
+              />
+            ))}
+          </div>
+          <button style={styles.skipLink} onClick={onSkip}>
+            Skip this product
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+function ImagePickerApp() {
+  const [pickerData, setPickerData] = useState<PickerData | null>(null);
+  const [selections, setSelections] = useState<Record<string, string | null>>({});
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { app, isConnected, error: connError } = useApp({
+    appInfo: { name: 'ImagePicker', version: '0.1.0' },
+    capabilities: {},
+    onAppCreated: (createdApp) => {
+      createdApp.ontoolresult = (params: CallToolResult) => {
+        const data = params.structuredContent as PickerData | undefined;
+        if (!data?.products?.length) return;
+        setPickerData(data);
+        const initial: Record<string, string | null> = {};
+        data.products.forEach((p) => {
+          initial[p.productId] = p.candidates.length > 0 ? p.candidates[0].imageUrl : null;
+        });
+        setSelections(initial);
+      };
+      createdApp.onteardown = async () => ({});
+    },
+  });
+  useHostStyles(app);
+  const handleSelect = useCallback((productId: string, imageUrl: string) => {
+    setSelections((prev) => ({ ...prev, [productId]: imageUrl }));
+  }, []);
+  const handleSkip = useCallback((productId: string) => {
+    setSelections((prev) => ({ ...prev, [productId]: null }));
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (!app || !pickerData) return;
+    const lines = pickerData.products.map((product) => {
+      const imageUrl = selections[product.productId];
+      return imageUrl
+        ? `- "${product.productName}" (${product.productId}): ${imageUrl}`
+        : `- "${product.productName}" (${product.productId}): SKIP`;
+    });
+    const message = `Image selections:\n${lines.join('\n')}\n\nPlease update each product with its selected image URL. Skip products marked SKIP.`;
+    try {
+      await app.sendMessage({
+        role: 'user',
+        content: [{ type: 'text', text: message }],
+      });
+      setSubmitted(true);
+    } catch (err) {
+      setError(`Failed to send: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }, [app, pickerData, selections]);
+  if (connError) {
+    return (
+      <div style={styles.body}>
+        <div style={styles.error}>Connection failed: {connError.message}</div>
+      </div>
+    );
+  }
+  if (!isConnected) {
+    return (
+      <div style={styles.body}>
+        <span style={styles.status}>Connecting...</span>
+      </div>
+    );
+  }
+  if (!pickerData) {
+    return (
+      <div style={styles.body}>
+        <span style={styles.status}>Waiting for image candidates...</span>
+      </div>
+    );
+  }
+  const selectedCount = Object.values(selections).filter((v) => v !== null).length;
+  const total = pickerData.products.length;
+  return (
+    <div style={styles.body}>
+      <div style={styles.header}>
+        <h2 style={styles.title}>Select Product Images</h2>
+        {pickerData.batchLabel && (
+          <span style={styles.batchInfo}>{pickerData.batchLabel}</span>
+        )}
+      </div>
+      {pickerData.products.map((product, idx) => (
+        <ProductSection
+          key={product.productId}
+          product={product}
+          isLast={idx === pickerData.products.length - 1}
+          selection={selections[product.productId]}
+          onSelect={(imageUrl) => handleSelect(product.productId, imageUrl)}
+          onSkip={() => handleSkip(product.productId)}
+        />
+      ))}
+      <div style={styles.footer}>
+        {!submitted ? (
+          <button style={styles.btnPrimary} onClick={handleSave}>
+            Save Selections ({selectedCount}/{total})
+          </button>
+        ) : (
+          <span style={styles.status}>
+            Selections sent — click send in the chat to confirm.
+          </span>
+        )}
+      </div>
+      {error && <div style={styles.error}>{error}</div>}
+    </div>
+  );
+}
+// ============================================================================
+// Mount
+// ============================================================================
+createRoot(document.getElementById('root')!).render(<ImagePickerApp />);

package/src/client.ts ADDED Viewed

@@ -0,0 +1,187 @@
+interface ApiResponse<T = unknown> {
+  data?: T;
+  error?: { code: string; message: string; details?: unknown };
+  pagination?: { cursor: string | null; hasMore: boolean };
+}
+export class SwatchaClient {
+  private baseUrl: string;
+  private apiKey: string;
+  constructor(baseUrl: string, apiKey: string) {
+    this.baseUrl = baseUrl.replace(/\/$/, '');
+    this.apiKey = apiKey;
+  }
+  private async request<T>(
+    method: string,
+    path: string,
+    body?: unknown
+  ): Promise<ApiResponse<T>> {
+    const url = `${this.baseUrl}/api/v1${path}`;
+    const headers: Record<string, string> = {
+      Authorization: `Bearer ${this.apiKey}`,
+      'Content-Type': 'application/json',
+    };
+    const response = await fetch(url, {
+      method,
+      headers,
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    const json = (await response.json()) as ApiResponse<T>;
+    if (!response.ok) {
+      throw new Error(json.error?.message || `API error: ${response.status}`);
+    }
+    return json;
+  }
+  // Selections
+  async listSelections() {
+    return this.request('GET', '/selections');
+  }
+  async getSelection(id: string) {
+    return this.request('GET', `/selections/${id}`);
+  }
+  async createSelection(data: {
+    name: string;
+    clientId: string;
+    status?: string;
+    notes?: string;
+    siteAddress?: string;
+  }) {
+    return this.request('POST', '/selections', data);
+  }
+  async updateSelection(
+    id: string,
+    data: { name?: string; status?: string; notes?: string; siteAddress?: string }
+  ) {
+    return this.request('PATCH', `/selections/${id}`, data);
+  }
+  async deleteSelection(id: string) {
+    return this.request('DELETE', `/selections/${id}`);
+  }
+  // Selection Products
+  async listSelectionProducts(selectionId: string) {
+    return this.request('GET', `/selections/${selectionId}/products`);
+  }
+  async addProductToSelection(
+    selectionId: string,
+    data: {
+      productId: string;
+      quantity?: string;
+      location?: string;
+      locationId?: string;
+      notes?: string;
+    }
+  ) {
+    return this.request('POST', `/selections/${selectionId}/products`, data);
+  }
+  async updateSelectionProduct(
+    selectionId: string,
+    productId: string,
+    data: { quantity?: string; location?: string; locationId?: string; notes?: string }
+  ) {
+    return this.request(
+      'PATCH',
+      `/selections/${selectionId}/products/${productId}`,
+      data
+    );
+  }
+  async removeProductFromSelection(selectionId: string, productId: string) {
+    return this.request(
+      'DELETE',
+      `/selections/${selectionId}/products/${productId}`
+    );
+  }
+  // Products (Catalog)
+  async listProducts(query?: string) {
+    const qs = query ? `?q=${encodeURIComponent(query)}` : '';
+    return this.request('GET', `/products${qs}`);
+  }
+  async getProduct(id: string) {
+    return this.request('GET', `/products/${id}`);
+  }
+  async createProduct(data: {
+    name: string;
+    sku?: string;
+    price?: number;
+    supplierId?: string;
+    imageUrl?: string;
+    description?: string;
+  }) {
+    return this.request('POST', '/products', data);
+  }
+  async updateProduct(
+    id: string,
+    data: {
+      name?: string;
+      sku?: string;
+      price?: number;
+      supplierId?: string;
+      imageUrl?: string;
+    }
+  ) {
+    return this.request('PATCH', `/products/${id}`, data);
+  }
+  // Clients
+  async listClients() {
+    return this.request('GET', '/clients');
+  }
+  async createClient(data: { name: string }) {
+    return this.request('POST', '/clients', data);
+  }
+  // Suppliers
+  async listSuppliers() {
+    return this.request('GET', '/suppliers');
+  }
+  async createSupplier(data: { name: string; websiteUrl?: string }) {
+    return this.request('POST', '/suppliers', data);
+  }
+  // Locations
+  async listLocations() {
+    return this.request('GET', '/locations');
+  }
+  async createLocation(data: { name: string }) {
+    return this.request('POST', '/locations', data);
+  }
+  // Quota
+  async getQuota() {
+    return this.request('GET', '/quota');
+  }
+  // Image Search
+  async searchProductImages(productName: string, options?: {
+    supplier?: string;
+    supplierUrl?: string;
+    limit?: number;
+  }) {
+    const params = new URLSearchParams({ product: productName });
+    if (options?.supplier) params.append('supplier', options.supplier);
+    if (options?.supplierUrl) params.append('supplierUrl', options.supplierUrl);
+    if (options?.limit) params.append('limit', String(options.limit));
+    return this.request('GET', `/images/search?${params}`);
+  }
+}