AI agent mockup

A workflow canvas with a trigger, an AI step and actions — plus a mobile “agent run” with approval.

Drop your screenshot here

Size

Format

Your image stays in your browser — nothing is uploaded.

Agents and automation are everywhere. This template draws a visual agent builder: a dotted canvas, a trigger node, a highlighted AI step connected to Slack, CRM and reply actions, and a side panel with instructions, outputs, creativity and human-approval toggles.

The iPhone version shows an agent run as a step-by-step timeline with a suggested reply waiting for approval — perfect for explaining human-in-the-loop AI.

Examples

AI Agent Builder mockup on Browser Window, left angleAI Agent Builder on Browser Window Mockup — Left AngleAI Agent Builder mockup on MacBook Pro 14-inchAI Agent Builder on MacBook Pro 14-inch MockupAI Agent Builder mockup on iPhone 17 Pro, right angleAI Agent Builder on iPhone 17 Pro Mockup — Right AngleAI Agent Builder UI screenshot, isometric, dark modeAI Agent Builder UI Screenshot (Desktop) — Isometric, Dark Mode

How it works

  1. Choose a screen

    Pick one of 18 interface types (5 layouts each) or upload your own screenshot. Press “New variant” until you like it.

  2. Choose a device

    Put it on an iPhone 17 Pro, iPhone Air, MacBook Pro or MacBook Air — or show it in a browser window.

  3. Download

    Pick an angle and background, then download a high-resolution PNG, JPG or WebP. Transparent background works too.

Questions

What kind of agent is shown?

A support-triage agent: it reads a new email, classifies and summarizes it with AI, then posts to Slack, updates a ticket and drafts a reply.

Can I show it in dark mode?

Yes, switch Colors to Dark — the canvas, nodes and panel all adapt.

Is there a mobile screen?

Yes, the iPhone version shows the agent run and an approval step.

Is UI Generator free?

Yes. Every interface, device, angle and export size is free, and you don’t need an account. You can use the images in commercial projects.

Can I put my own screenshot on an iPhone or MacBook?

Yes. Click “Your screenshot”, drag an image onto the preview or paste it with Ctrl/Cmd+V. Your image is processed in your browser and is never uploaded.

More mockups