Skip to main content
The Image component automatically handles image sources, supporting both data URLs and public file paths. It automatically prefixes relative paths with the MCP public URL, making it easy to use images from your public/ folder.

​
Import

import { Image } from 'mcp-use/react';

​
Props

The Image component accepts all standard img HTML attributes, plus:
PropTypeDefaultDescription
srcstringrequiredImage source URL or path

​
Source Resolution

The component handles different source formats:
  1. Absolute URLs (http://, https://): Used as-is
  2. Data URLs (data:): Used as-is
  3. Relative paths (/fruits/apple.png): Prefixed with MCP public URL

​
Basic Usage

import { Image } from 'mcp-use/react';

function MyWidget() {
  return (
    <div>
      {/* Public folder image */}
      <Image src="/fruits/apple.png" alt="Apple" />
      
      {/* Absolute URL */}
      <Image src="https://example.com/image.jpg" alt="Example" />
      
      {/* Data URL */}
      <Image src="data:image/png;base64,..." alt="Inline" />
    </div>
  );
}

​
Public Folder Images

When using images from your public/ folder, use paths relative to the public root: 
// public/fruits/apple.png
<Image src="/fruits/apple.png" alt="Apple" />

// public/logo.svg
<Image src="/logo.svg" alt="Logo" />
The component automatically resolves these to the correct URL using window.__mcpPublicUrl. The component uses these window globals (injected by the MCP server or at build time):
  • window.__mcpPublicAssetsUrl: Base URL for public assets in static deployments (e.g., Supabase storage bucket)
  • window.__mcpPublicUrl: Base URL for public assets (e.g., http://localhost:3000/mcp-use/public) - used as fallback
  • window.__getFile: Helper function to get file URLs
The Image component prefers __mcpPublicAssetsUrl when available (static deployments), falling back to __mcpPublicUrl for dynamic serving.