Skip to main content
Glama

get_image_preview

Retrieve image previews from URLs within Webflow sites to verify content before publishing.

Instructions

Designer Tool - Get image preview from url. this is helpful to get image preview from url.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlYesThe URL of the image to get the preview from
siteIdYesThe ID of the site. DO NOT ASSUME site id. ALWAYS ask user for site id if not already provided or known. use sites_list tool to fetch all sites and then ask user to select one of them.

Implementation Reference

  • The main handler function for the 'get_image_preview' tool. It invokes the helper to fetch and process the image, then returns it formatted as MCP content with base64 data.
    async ({ url, siteId }) => { try { const { data, mimeType } = await getImagePreviewFromURL(url, siteId); return { content: [ { type: "image", data, mimeType, }, ], }; } catch (error) { return formatErrorResponse(error); } }
  • The schema definition for the 'get_image_preview' tool, including title, description, and Zod input schema requiring 'url' and 'siteId'.
    { title: "Get Image Preview", description: "Designer Tool - Get image preview from url. this is helpful to get image preview from url.", inputSchema: z.object({ url: z .string() .describe("The URL of the image to get the preview from"), ...SiteIdSchema, }), },
  • The server.registerTool call that registers the 'get_image_preview' tool with its schema and handler.
    server.registerTool( "get_image_preview", { title: "Get Image Preview", description: "Designer Tool - Get image preview from url. this is helpful to get image preview from url.", inputSchema: z.object({ url: z .string() .describe("The URL of the image to get the preview from"), ...SiteIdSchema, }), }, async ({ url, siteId }) => { try { const { data, mimeType } = await getImagePreviewFromURL(url, siteId); return { content: [ { type: "image", data, mimeType, }, ], }; } catch (error) { return formatErrorResponse(error); } } );
  • Helper function that fetches the image from the given URL, validates it's an image MIME type, converts it to base64, and returns the data with mimeType.
    const getImagePreviewFromURL = async (url: string, siteId: string) => { const response = await fetch(url); const contentType = response.headers.get("content-type"); if (!contentType || !contentType.startsWith("image/")) { throw new Error( `Expected an image but received MIME type: ${contentType || "unknown"}` ); } const arrayBuffer = await response.arrayBuffer(); const binary = String.fromCharCode(...new Uint8Array(arrayBuffer)); const base64 = btoa(binary); return { data: base64, mimeType: contentType, siteId }; };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/webflow/mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server