export_scene

Instructions

Implementation Reference

• src/mcp/tools/export-scene.ts:4-15 (handler)

  Main handler function exportSceneTool that parses args using ExportSchema and calls client.exportScene with format, elementIds, background, and padding options

  export async function exportSceneTool(
    args: unknown,
    client: CanvasClient
  ) {
    const { format, elementIds, background, padding } = ExportSchema.parse(args);
    const result = await client.exportScene(format, {
      elementIds,
      background: background ?? undefined,
      padding,
    });
    return result;
  }

• src/mcp/index.ts:492-513 (registration)

  MCP tool registration with name 'export_scene', description, zod schema for validation (format, elementIds, background, padding), and handler that calls client.exportScene and formats response based on format type

  // --- Tool: export_scene ---
  server.tool(
    'export_scene',
    'Export the canvas as PNG or SVG',
    {
      format: z.enum(['png', 'svg']),
      elementIds: z.array(IdZ).max(LIMITS.MAX_ELEMENT_IDS).optional(),
      background: z.string().max(LIMITS.MAX_COLOR_LENGTH).optional(),
      padding: z.number().min(0).max(500).finite().optional(),
    },
    async ({ format, elementIds, background, padding }) => {
      try {
        const result = await client.exportScene(format, { elementIds, background, padding });
        if (format === 'svg') {
          return { content: [{ type: 'text', text: result.data as string }] };
        }
        return { content: [{ type: 'text', text: JSON.stringify(result.data, null, 2) }] };
      } catch (err) {
        return { content: [{ type: 'text', text: `Error: ${(err as Error).message}` }], isError: true };
      }
    }
  );

• src/mcp/schemas/element.ts:220-230 (schema)

  ExportSchema zod validation schema defining format (enum png/svg), optional elementIds array, optional background color (ColorSchema), and optional padding number

  export const ExportSchema = z
    .object({
      format: z.enum(['png', 'svg']),
      elementIds: z
        .array(z.string().max(LIMITS.MAX_ID_LENGTH))
        .max(LIMITS.MAX_ELEMENT_IDS)
        .optional(),
      background: ColorSchema,
      padding: z.number().min(0).max(500).finite().optional(),
    })
    .strict();

• src/mcp/canvas-client.ts:164-184 (helper)

  CanvasClient.exportScene method that makes POST request to /api/export endpoint with format and options, handles response for SVG (returns text) and PNG (returns JSON)

  async exportScene(
    format: 'png' | 'svg',
    options?: { elementIds?: string[]; background?: string; padding?: number }
  ): Promise<{ data: string | Record<string, unknown>; contentType: string }> {
    const res = await fetch(`${this.baseUrl}/api/export`, {
      method: 'POST',
      headers: this.headers(),
      body: JSON.stringify({ format, ...options }),
    });
  
    if (!res.ok) {
      const body = await res.json().catch(() => ({})) as ApiResponse;
      throw new Error(body.error ?? `Canvas error: ${res.status}`);
    }
  
    if (format === 'svg') {
      return { data: await res.text(), contentType: 'image/svg+xml' };
    }
  
    return { data: await res.json() as Record<string, unknown>, contentType: 'application/json' };
  }

• src/mcp/apps/canvas-client-adapter.ts:158-173 (helper)

  Standalone mode adapter exportScene implementation that builds basic SVG from stored elements or returns message for PNG export when canvas server is unavailable

  async exportScene(
    format: 'png' | 'svg',
    _options?: { elementIds?: string[]; background?: string; padding?: number }
  ): Promise<{ data: string | Record<string, unknown>; contentType: string }> {
    // Full export requires the canvas server's rendering pipeline.
    // In standalone mode, return a basic SVG representation or a note.
    const elements = await this.store.getAll();
    if (format === 'svg') {
      const svg = buildBasicSvg(elements);
      return { data: svg, contentType: 'image/svg+xml' };
    }
    return {
      data: { message: 'PNG export requires the canvas server. Use SVG or connect to canvas server.' },
      contentType: 'application/json',
    };
  }