adobe-xd-mcp/src/handlers/resources.js

Model Context Protocol server for Adobe XD that enables AI-powered design capabilities

/**
 * Resources handler for Adobe XD MCP Server
 * Manages design resources that can be used within Adobe XD
 */

// Sample design resources
const designResources = [
  {
    uri: 'xd-design-assets://templates/website-templates',
    name: 'Website Templates',
    description: 'Collection of ready-to-use website templates in various styles',
    resourceType: 'collection',
    metadata: {
      count: 25,
      categories: ['Landing Page', 'E-Commerce', 'Portfolio', 'Blog', 'Dashboard']
    }
  },
  {
    uri: 'xd-design-assets://templates/logo-templates',
    name: 'Logo Templates',
    description: 'Collection of customizable logo templates',
    resourceType: 'collection',
    metadata: {
      count: 15,
      categories: ['Minimalist', 'Creative', 'Corporate', 'Abstract', 'Lettermark']
    }
  },
  {
    uri: 'xd-design-assets://components/ui-kits',
    name: 'UI Component Libraries',
    description: 'Reusable UI components organized into design systems',
    resourceType: 'collection',
    metadata: {
      count: 10,
      categories: ['Material Design', 'iOS', 'Web', 'Custom']
    }
  },
  {
    uri: 'xd-design-assets://assets/color-palettes',
    name: 'Color Palettes',
    description: 'Curated color palettes for various design styles',
    resourceType: 'collection',
    metadata: {
      count: 30,
      categories: ['Vibrant', 'Pastel', 'Monochrome', 'Corporate', 'Creative']
    }
  },
  {
    uri: 'xd-design-assets://assets/typography-sets',
    name: 'Typography Sets',
    description: 'Font combinations and typography styles',
    resourceType: 'collection',
    metadata: {
      count: 20,
      categories: ['Serif', 'Sans-serif', 'Display', 'Monospace']
    }
  }
];

// Collection contents mapping
const resourceContents = {
  'xd-design-assets://templates/website-templates': [
    {
      uri: 'xd-design-assets://templates/website-templates/landing-page-1',
      name: 'Modern SaaS Landing Page',
      description: 'Clean, modern landing page template for SaaS products',
      resourceType: 'template',
      metadata: {
        category: 'Landing Page',
        style: 'Modern',
        components: ['Header', 'Hero', 'Features', 'Pricing', 'Testimonials', 'CTA', 'Footer']
      }
    },
    {
      uri: 'xd-design-assets://templates/website-templates/e-commerce-1',
      name: 'Minimalist E-Commerce Template',
      description: 'Clean e-commerce template with product focus',
      resourceType: 'template',
      metadata: {
        category: 'E-Commerce',
        style: 'Minimalist',
        components: ['Header', 'Product Gallery', 'Product Detail', 'Cart', 'Checkout']
      }
    },
    {
      uri: 'xd-design-assets://templates/website-templates/portfolio-1',
      name: 'Creative Portfolio Template',
      description: 'Showcase your work with this creative portfolio template',
      resourceType: 'template',
      metadata: {
        category: 'Portfolio',
        style: 'Creative',
        components: ['Header', 'Project Showcase', 'About', 'Contact']
      }
    }
  ],
  'xd-design-assets://templates/logo-templates': [
    {
      uri: 'xd-design-assets://templates/logo-templates/minimalist-1',
      name: 'Minimalist Wordmark Logo',
      description: 'Clean wordmark logo template with modern typography',
      resourceType: 'template',
      metadata: {
        category: 'Minimalist',
        style: 'Wordmark',
        customizable: ['Text', 'Color', 'Spacing']
      }
    },
    {
      uri: 'xd-design-assets://templates/logo-templates/abstract-1',
      name: 'Abstract Symbol Logo',
      description: 'Abstract geometric symbol logo template',
      resourceType: 'template',
      metadata: {
        category: 'Abstract',
        style: 'Symbol',
        customizable: ['Shape', 'Color', 'Size']
      }
    }
  ],
  'xd-design-assets://components/ui-kits': [
    {
      uri: 'xd-design-assets://components/ui-kits/material-design',
      name: 'Material Design UI Kit',
      description: 'Complete UI kit based on Material Design guidelines',
      resourceType: 'ui-kit',
      metadata: {
        style: 'Material Design',
        components: ['Buttons', 'Forms', 'Cards', 'Navigation', 'Dialogs']
      }
    },
    {
      uri: 'xd-design-assets://components/ui-kits/ios-design',
      name: 'iOS UI Kit',
      description: 'UI components following iOS design guidelines',
      resourceType: 'ui-kit',
      metadata: {
        style: 'iOS',
        components: ['Buttons', 'Forms', 'Cards', 'Navigation', 'System Components']
      }
    }
  ]
};

/**
 * List available design resources
 * @param {Object} params - Optional filtering parameters
 * @returns {Array} Array of resource objects
 */
async function listResources(params = {}) {
  // If a parent URI is provided, return its children
  if (params.parentUri && resourceContents[params.parentUri]) {
    return resourceContents[params.parentUri];
  }
  
  // Otherwise return top-level resources
  return designResources;
}

/**
 * Read a specific resource content
 * @param {string} uri - Resource URI
 * @returns {Object} Resource content
 */
async function readResource(uri) {
  // Find the resource in our collections
  for (const collection in resourceContents) {
    const resource = resourceContents[collection].find(r => r.uri === uri);
    if (resource) {
      // In a real implementation, this would return actual design content
      // For now, return a placeholder
      return {
        type: 'text/json',
        data: JSON.stringify({
          resource: resource,
          content: {
            description: `This is the content for ${resource.name}`,
            implementation: 'In a real implementation, this would contain Adobe XD design data'
          }
        })
      };
    }
  }
  
  // Check if it's a top-level resource
  const topResource = designResources.find(r => r.uri === uri);
  if (topResource) {
    return {
      type: 'text/json',
      data: JSON.stringify({
        resource: topResource,
        children: resourceContents[uri] || []
      })
    };
  }
  
  throw new Error(`Resource not found: ${uri}`);
}

module.exports = {
  listResources,
  readResource
};