UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/animation.ts:60-98 (handler)

  The handler function that implements the core logic of the 'animation_preview' tool. It validates the input using AnimationPreviewSchema, simulates generating a preview video/GIF from the animation timeline, computes duration using helper, and returns structured JSON response with preview metadata.

  async preview(args: any) {
    const params = AnimationPreviewSchema.parse(args);
    
    try {
      // Simulate animation preview generation
      const previewData = {
        format: params.format,
        duration: this.getTimelineDuration(params.timeline),
        frames: params.format === 'gif' ? 30 : 60,
        size: {
          width: 800,
          height: 600
        },
        preview: {
          url: `preview_${Date.now()}.${params.format}`,
          message: 'Preview generated successfully (simulated)'
        }
      };
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(previewData, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error generating preview: ${error.message}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/animation.ts:14-17 (schema)

  Zod schema defining the input structure for the animation_preview tool: requires a timeline object and optional format (gif/mp4/webm). Used for validation in the handler.

  const AnimationPreviewSchema = z.object({
    timeline: z.any(),
    format: z.enum(['gif', 'mp4', 'webm']).default('gif')
  });

• src/index.ts:316-317 (registration)

  Switch case in tool execution handler that routes calls to 'animation_preview' to the AnimationTools.preview method.

  case 'animation_preview':
    return await this.animationTools.preview(args);

• src/index.ts:148-163 (registration)

  Static registration of the 'animation_preview' tool in the listTools response, including name, description, and input schema matching the Zod schema.

  {
    name: 'animation_preview',
    description: 'Generate preview of animation sequence',
    inputSchema: {
      type: 'object',
      properties: {
        timeline: { type: 'object' },
        format: { 
          type: 'string',
          enum: ['gif', 'mp4', 'webm'],
          default: 'gif'
        }
      },
      required: ['timeline']
    }
  },

• src/tools/animation.ts:241-248 (helper)

  Helper method used by the preview handler to calculate the total duration of the animation timeline based on library type.

  private getTimelineDuration(timeline: any): number {
    if (timeline?.type === 'framer-motion') {
      return Object.keys(timeline.variants || {}).length * 0.3;
    } else if (timeline?.type === 'gsap') {
      return (timeline.timeline || []).length * 0.3;
    }
    return 1;
  }