get_context_diff

Instructions

Implementation Reference

• src/tools/get-context-diff.ts:26-75 (handler)

  Main handler function that compares marketing vs product design systems across colors, typography, and components. Takes a DesignSystemIndex and GetContextDiffArgs, returning a JSON diff.

  export function handler(index: DesignSystemIndex, args: GetContextDiffArgs) {
    const category = args.category ?? 'all';
    const mkt = index.resolved.marketing;
    const prod = index.resolved.product;
    const diff: Record<string, unknown> = {};
  
    if (category === 'colors' || category === 'all') {
      const mktTokens = new Set(mkt.colors.map((c) => c.token));
      const prodTokens = new Set(prod.colors.map((c) => c.token));
  
      diff.colors = {
        marketingOnly: mkt.colors.filter((c) => !prodTokens.has(c.token)).map((c) => ({ name: c.name, token: c.token, value: c.value })),
        productOnly: prod.colors.filter((c) => !mktTokens.has(c.token)).map((c) => ({ name: c.name, token: c.token, value: c.value })),
        shared: mkt.colors
          .filter((c) => prodTokens.has(c.token))
          .map((mc) => {
            const pc = prod.colors.find((c) => c.token === mc.token);
            return {
              token: mc.token,
              marketing: mc.value,
              product: pc?.value,
              differs: mc.value !== pc?.value,
            };
          }),
      };
    }
  
    if (category === 'typography' || category === 'all') {
      const mktNames = new Set(mkt.typography.map((t) => t.token ?? t.name));
      const prodNames = new Set(prod.typography.map((t) => t.token ?? t.name));
  
      diff.typography = {
        marketingOnly: mkt.typography.filter((t) => !prodNames.has(t.token ?? t.name)).map((t) => ({ name: t.name, fontSize: t.fontSize })),
        productOnly: prod.typography.filter((t) => !mktNames.has(t.token ?? t.name)).map((t) => ({ name: t.name, fontSize: t.fontSize })),
      };
    }
  
    if (category === 'components' || category === 'all') {
      const mktNames = new Set(mkt.components.map((c) => c.name));
      const prodNames = new Set(prod.components.map((c) => c.name));
  
      diff.components = {
        marketingOnly: mkt.components.filter((c) => !prodNames.has(c.name)).map((c) => ({ name: c.name, category: c.category })),
        productOnly: prod.components.filter((c) => !mktNames.has(c.name)).map((c) => ({ name: c.name, category: c.category })),
        both: mkt.components.filter((c) => prodNames.has(c.name)).map((c) => c.name),
      };
    }
  
    return [{ type: 'text' as const, text: JSON.stringify(diff, null, 2) }];
  }

• src/tools/get-context-diff.ts:16-21 (schema)

  Input schema defining the 'category' parameter with options: colors, typography, components, or all (default).

  export const INPUT_SCHEMA = {
    type: 'object' as const,
    properties: {
      category: { type: 'string', enum: ['colors', 'typography', 'components', 'all'], default: 'all', description: 'Category to compare' },
    },
  };

• src/types/mcp.ts:152-158 (schema)

  TypeScript interface GetContextDiffArgs with optional category property ('colors' | 'typography' | 'components' | 'all').

  export interface GetContextDiffArgs {
    /**
     * Which category to diff between marketing and product contexts.
     * "all" returns diffs for every category.
     */
    category?: 'colors' | 'typography' | 'components' | 'all';
  }

• src/tools/index.ts:98-99 (registration)

  Registration of the get_context_diff tool in the CallToolRequestSchema switch-case, dispatching to contextDiff.handler.

  case contextDiff.TOOL_NAME:
    return { content: contextDiff.handler(index, args as never) };

• src/tools/index.ts:29-49 (registration)

  Import of the contextDiff module from get-context-diff.js and inclusion in ALL_TOOLS registration array.

  import * as contextDiff from './get-context-diff.js';
  import * as validateUsage from './validate-usage.js';
  
  import { listResources, readResource } from '../resources/index.js';
  import { listPrompts, getPrompt } from '../prompts/index.js';
  
  /** All tool modules in registration order. */
  const ALL_TOOLS = [
    brandOverview,
    colors,
    typography,
    logos,
    components,
    guidelines,
    tokens,
    textures,
    css,
    searchBrand,
    contextDiff,
    validateUsage,
  ] as const;