Set up your tools

Every prompt works on its own in a fresh chat. Some look even better when your AI app can reach a few tools. Prompts show this as chips such as “Looks best with image generation”. Here is what each one means and how to connect it.

Works in Claude, Cursor, GitHub Copilot, Windsurf and other agents. It checks what you already have and walks you through the rest.

Image generation

Prompts with image slots end with an Image prompts section. With an image tool connected, the AI makes a picture for every slot. Without one, the page still works: it shows drawn placeholders and tells you which file to drop in.

For example Google Flow (Nano Banana) or any image-generation MCP.

Either connect an image-generation MCP, or make the images yourself:

An image-generation MCP. Any MCP server or connector that creates images works, for example a Hugging Face connector pointed at an image model such as FLUX. Add it as shown below, then paste the prompt as usual.
Google Flow (Nano Banana), by hand. Paste each line from the prompt's Image prompts section into Flow, download the results, and save them in the images/ folder next to the page with the file names the prompt gives. Reload the page and they replace the placeholders.

Stock photos

Some prompts, such as menus and product grids, look best with real photos. A stock-photo connector lets the AI search for free-to-use photos and link them directly, instead of guessing links that may not load.

For example the Unsplash MCP.

Add the Unsplash MCP. In Claude, look for Unsplash in the connector directory. In other apps, add an Unsplash MCP server; it needs a free Unsplash access key, which you create in your own Unsplash developer account and enter in your app's MCP settings, never in the prompt.

A browser check

Animated and 3D prompts are easier to get right when the AI can open the page, look at it and fix what is off. A browser tool lets it do that before handing the page back.

For example Claude in Chrome, to look at the result.

Install Claude in Chrome, the Claude browser extension, from the Chrome Web Store and sign in. Other apps have their own browser or preview tools; any tool that lets the AI open the page and see it works.

Adding an MCP server to your app

MCP servers (called connectors in Claude) give the AI new tools. Add one once and every chat can use it.

Claude desktop app and claude.ai

Open Settings, then Connectors. Pick one from the directory, or add a custom connector with the server's URL. Turn it on for the chat from the tools menu under the message box.

Claude Code

Run claude mcp add --transport http <name> <url> for a remote server, or claude mcp add <name> -- <command> for one that runs locally. In the desktop app's Code tab, connectors you added in Settings are available too. For Claude in Chrome, start Claude Code with claude --chrome or run /chrome in a session.

Cursor

Open Cursor Settings, find the MCP section and add a server, or list it under mcpServers in .cursor/mcp.json in your project (or ~/.cursor/mcp.json for every project).

Other apps

Windsurf, VS Code, Zed and most other AI editors have an MCP section in their settings that takes the same kind of entry: a name plus a URL or a command. Check your app's docs for where it lives.

Keep API keys in your app's settings, where the server reads them. Never paste a key into a prompt or a chat, and we will never ask you for one.