Designer Tools

Assets

The Assets tools enable you to organize, retrieve, and manage image and media assets within your Webflow site’s Designer interface.

Designer tools require the MCP Bridge App to be open in the Webflow Designer. Ensure it’s connected before using these tools.

When to use

Use Assets tools to:

  • Organize assets: Create folders to structure your media library
  • Retrieve assets: Get lists of images and files
  • Update metadata: Modify asset names, alt text, and folder locations
  • Preview images: View image data before using in elements

Tool details

Tool name: asset_tool, get_image_preview

Available actions

Create folder

Create a folder to organize assets.

Action: create_folder

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
namestringYesFolder name
parentFolderIdstringNoParent folder for nesting

Example usage:

Create a "Product Images" folder

Use nested folders to organize large asset libraries: Photos/Products/Electronics

Get all assets and folders

Retrieve assets and folders with filtering options.

Action: get_all_assets_and_folders

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
query_typestringYes”all”, “folders”, or “assets”
filter_idsarrayNoSpecific IDs to retrieve

Example usage:

Get all image assets in the site

Use specific queries (“folders” or “assets”) to limit data and improve performance.

Update asset

Modify an asset’s properties.

Action: update_asset

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
assetIdstringYesAsset to update
namestringNoNew name
altTextstringNoAlt text for accessibility
parentFolderIdstringNoMove to different folder

Example usage:

Update asset [asset-id] to add alt text "Product hero image"

Get image preview

Retrieve image data in base64 format for preview.

Tool: get_image_preview

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
urlstringYesImage URL

Supported formats: JPG, PNG, WEBP and AVIF.

Returns: Base64 image data with MIME type

Example usage:

Get preview of image at [url]

Best practices

Name assets clearly:

  • ✅ hero-homepage-2024.jpg, product-laptop-front.png
  • ❌ IMG_1234.jpg, image.png

Good names help you find assets quickly.

Provide descriptive alt text for all images:

  • Describe what’s in the image
  • Keep it concise (under 125 characters)
  • Don’t start with “Image of…” or “Picture of…”
  • Be specific and relevant

Alt text improves accessibility and SEO.

Create a logical folder structure:

/Images
  /Headers
  /Products
    /Electronics
    /Apparel
  /Team
  /Blog

Good organization scales as your library grows.

Choose appropriate formats:

  • JPEG: Photos and complex images
  • PNG: Graphics with transparency
  • WebP: Modern format, best compression
  • SVG: Icons and logos (scalable)

Optimize file sizes before uploading.

Elements

Apply assets to Image elements