• ASSETS
  • VARIETY
  • CONTEXT
  • HUMAN

How to populate UI layouts with placeholder images with your AI

Connect Unsplash to your AI client to pull real imagery into your prototypes. Stop using gray boxes or broken links.

Ask AI about this page

Short answer

How can I use my AI to add placeholder images to my UI?

Your AI uses Unsplash to find specific or random high-resolution photos and provides the direct URLs for your code. You get production-ready assets instead of generic placeholders. This breakdown shows how to automate your asset gathering.

The results.

Where your assets land.

What happens when you run these commands.

ASSETS

Direct image links

The AI finds specific photos and returns the URLs. You can drop these straight into your img tags or CSS.

VARIETY

Randomized placeholders

If you just need generic filler, the AI pulls high-quality shots. This keeps your mockups looking realistic.

CONTEXT

Thematic matching

The AI searches for images that actually match your UI description. You get visuals that fit the mood of your app.

HUMAN

Manual selection

The AI provides the links, but you decide which specific images best suit your design. You maintain final creative control.

The workflow

What your AI does when the request arrives.

The AI handles the search and retrieval so you don't have to browse a website.

  1. Analyze requirements

    Your AI looks at your UI description to see if you need a specific subject or just general filler.

    search_photos

  2. Find specific visuals

    The AI looks for images that match your keywords, like 'minimalist architecture' or 'coffee shop interior'.

    search_photos

  3. Grab generic filler

    If no specific subject is requested, the AI pulls a high-quality image to fill the space.

    get_random_photo

  4. Deliver URLs

    The AI provides the direct image links that you can use immediately in your project files.

    search_photosget_random_photo

Try it

Copy these to start.

Use these prompts to trigger the Unsplash tools.

Starting points

These are starting points. Swap the bracketed text for your actual design needs.

Unsplash Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Unsplash capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "unsplash-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp"
    }
  }
}
Copy into chat04

  • Find me a high-resolution photo of a modern workspace for my dashboard mockup.

  • Get a random photo to use as a background for my landing page.

  • Search for images of 'mountain landscapes' to populate my travel app UI.

  • I need a placeholder image for a user profile avatar; get a random one.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Start here

Connect Unsplash once, then ask.

One connection links Unsplash to your AI client. Your credentials stay encrypted and secure on our side.

Connect Unsplash to your AI

FAQ

How this task behaves.

  • 01

    Can the AI download the images directly to my computer?

    No. The AI provides the image URLs. You must copy those links into your code or save the files yourself.

  • 02

    Will the AI change the image resolution?

    No. The AI retrieves the high-resolution assets available through the Unsplash tools.

  • 03

    Can the AI edit or crop the photos?

    No. The AI only finds and provides links to existing photos. It cannot perform image manipulation.

  • 04

    Does the AI know which images I've already used?

    No. The AI treats every request as a new search unless you provide the context of your previous work.

  • 05

    Can I use these images in a commercial project?

    The AI provides the links, but you are responsible for following the Unsplash license terms for your specific use case.

  • More questions about Unsplash? See everything the Unsplash Connector can do

Connect Unsplash to Claude, Cursor, ChatGPT & more