Get Image Preview
get_image_previewRetrieve 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
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The URL of the image to get the preview from | |
| siteId | Yes | The 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
- src/tools/deAsset.ts:109-124 (handler)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); } } - src/tools/deAsset.ts:98-108 (schema)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, }), }, - src/tools/deAsset.ts:96-125 (registration)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); } } ); - src/tools/deAsset.ts:15-27 (helper)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 }; };