---
slug: framer-site-visuals
title: Framer site visuals
outcome: "An agent generates on-brand Framer heroes, section stills, and CMS images with Brandiseer; a person (or a Framer External Agent / plugin) then places those image URLs in Framer Assets, on the canvas, or on a CMS image field. Brandiseer does not publish the Framer site."
category: creative-mcp
featured: true
time: "~25 to 40 min setup"
methods:
  - MCP
  - REST
hosts:
  - Cursor
  - Cowork
stack:
  - name: Brandiseer
    role: Brand memory and on-brand stills via MCP or REST
    logo: /logo-b.png
    href: https://brandiseer.com
  - name: Framer
    role: Assets library, canvas placement, and CMS image fields
    href: https://www.framer.com
  - name: Cursor
    role: Agent host for Brandiseer MCP or REST
  - name: Claude Cowork
    role: Agent host for Brandiseer MCP or REST
developerDocs: https://brandiseer.com/developers
updated: "2026-09-27"
draft: false
status: ready-to-publish
---

# Framer site visuals

**Brandiseer + Framer (+ Cursor or Claude Cowork)**

![Cover: an on-brand homepage hero ready to place on a Framer site](https://blog.brandiseer.com/use-case-assets/framer-site-visuals/cover-framer-site-visuals.png)

By the end of this guide you will have a repeatable way to make on-brand stills for a Framer site. An agent in Cursor or Claude Cowork calls Brandiseer, gets an `imageUrl` for a homepage hero, a section still, a CMS card, or an OG image, and you place that file in Framer.

Brandiseer owns the brand memory and the still. Framer owns the site. Brandiseer does not open the Framer canvas, does not assign an image to a static frame by itself, and does not publish the site. A person downloads the file, uploads it in Framer Assets, and places it on the canvas. Optionally, a Framer plugin can call `framer.uploadImage` or `framer.addImage` with a public URL, or a Framer External Agent can upload images and attach them to CMS items when the project is connected. A person still decides when the site publishes.

> People who brief stills inside Slack should use [Slack creative desk](/use-cases/slack-creative-desk). Recurring captions and Buffer scheduling should use [Social media automation](/use-cases/social-media-automation). Schedules and webhooks in Zapier, Make, or n8n should use [Always-on creative automation](/use-cases/always-on-creative-automation). Webflow site stills should use [Webflow site visuals](/use-cases/webflow-site-visuals). WordPress Media Library stills should use [WordPress site visuals](/use-cases/wordpress-site-visuals). This guide does not recreate any of those.

## Who it's for

- Marketing and web teams who ship on Framer and need a homepage hero, section backgrounds, CMS cards, and OG images without opening a separate design tool for every page
- Agencies that keep one Brandiseer Brand ID per client and one Framer project per client
- Operators who can copy an `imageUrl` into Framer Assets and place it on the canvas, or who already use a Framer plugin or External Agent and want CMS image fields filled from that URL

**Ideal customer profile:** a team whose pages already live in Framer, whose brand already lives in Brandiseer, and whose missing piece is a brand-safe still plus a clear handoff into Assets, the canvas, or a CMS image field.

## Why Brandiseer in this stack

Framer is where the page is built. Cursor or Cowork is the agent that turns a page brief into a layout. Brandiseer stores the logo and visual identity once, then applies that memory on every still. The prompt carries subject, layout, composition, and on-image text. It does not restate colours, fonts, mood, or visual style.

A Framer site drifts when every hero is a one-off export from a general image tool. Brandiseer keeps the still on the same brand as the rest of the campaign. Framer still decides where the file sits and when the site publishes.

This is a different job from the sibling guides:

- [Slack creative desk](/use-cases/slack-creative-desk) is a request-and-return desk. A person writes a brief in Slack and an agent posts a still back in the thread.
- [Social media automation](/use-cases/social-media-automation) writes captions and schedules posts with Buffer.
- [Always-on creative automation](/use-cases/always-on-creative-automation) is the HTTP step in Zapier, Make, or n8n.
- [Webflow site visuals](/use-cases/webflow-site-visuals) hands `imageUrl` into Webflow Assets or CMS image fields.
- [WordPress site visuals](/use-cases/wordpress-site-visuals) hands `imageUrl` into the WordPress Media Library.
- This guide generates site stills and hands `imageUrl` to Framer. Brandiseer does not push into the Framer canvas by itself.

![Example strip: homepage hero, section still, CMS card, and OG image](https://blog.brandiseer.com/use-case-assets/framer-site-visuals/example-strip.png)

## Stack

| Layer | Tool | Role |
| --- | --- | --- |
| Brand visuals | Brandiseer MCP and/or REST v2 | Generate on-brand stills. MCP uses `Authorization: Bearer`. REST uses `X-API-Key: bds_...` |
| Agent host (pick one) | Cursor | Read the page brief, call Brandiseer, return `imageUrl` and placement notes |
| Agent host (pick one) | Claude Cowork | Same contract as Cursor for interactive site stills |
| Site | Framer | Assets library and canvas for static heroes and sections. CMS image fields for collection items. Optional plugin or External Agent placement |

![Stack diagram: Cursor or Cowork, Brandiseer, and Framer](https://blog.brandiseer.com/use-case-assets/framer-site-visuals/stack-diagram.png)

You only need one agent host. The Brandiseer contract is the same on both. There is no Brandiseer Framer app that drops a still onto the canvas. The handoff is an image URL, a download, a plugin Assets call, or an External Agent CMS attach that you perform with Framer's own tools.

**Brandiseer docs:** [Developers](https://brandiseer.com/developers) · [guide/docs](https://brandiseer.com/guide/docs) · [guide/image](https://brandiseer.com/guide/image) · [Settings → API](https://brandiseer.com/settings/api)

**Framer docs:** [Developers](https://www.framer.com/developers/) · [Working with Images (Assets API)](https://www.framer.com/developers/assets) · [Use external agents with Framer](https://www.framer.com/help/articles/use-external-agents-with-framer/) · [What you can do with local agents](https://www.framer.com/help/articles/what-you-can-do-with-local-agents/)

Endpoint tables and HTTP contracts are in API reference at the end of this guide.

### Framer (placement, not generation)

Three practical paths. Use the first one until a plugin or External Agent path is actually needed.

1. **Assets and canvas (default).** Download the file or copy `imageUrl`. In Framer, upload it in Assets and place it on the homepage hero, section, or page image. This is how static heroes and section backgrounds get onto the canvas. Brandiseer stops at the URL.
2. **Plugin Assets API (optional).** Inside a Framer plugin, `framer.uploadImage` can upload from a public URL without assigning a node, and `framer.addImage` can add the image to the canvas. `framer.setImage` applies an image to the current selection when that node supports it. See [Working with Images](https://www.framer.com/developers/assets). This runs in plugin context. It is not a Brandiseer push.
3. **External Agent (optional).** Run `npx @framer/agent setup`, connect the project, and let the External Agent upload images and attach them to CMS items. Framer documents that External Agents can read and write CMS collections and that you stay in control of what gets published. Framer does not require a separate Framer MCP server for this path. See [Use external agents with Framer](https://www.framer.com/help/articles/use-external-agents-with-framer/) and [What you can do with local agents](https://www.framer.com/help/articles/what-you-can-do-with-local-agents/).

## How it works

Architecture, from page brief to a still sitting in Framer:

1. You store the brand once in Brandiseer (logo and reference visuals teach the look).
2. The agent host (Cursor or Cowork) has Brandiseer MCP or REST, the Brand ID (`bds_c_...`), and the standing instructions in this guide.
3. You name the slot: homepage hero, section background, CMS card, or OG image. The agent rewrites that brief into subject, layout, and on-image text, then sets `aspectRatio`, `resolution`, `mode`, and `useLogo` as fields.
4. Brandiseer returns `imageUrl`. The agent reports the URL, the crop, the mode, and a one-line placement note (which Framer Assets slot, canvas frame, or CMS field it is for). It does not claim the canvas changed unless a Framer write you actually performed returned success.
5. A person uploads the file in Framer Assets and places it on the canvas, or a plugin / External Agent places the public URL. A person publishes the site when the page is ready.

![Workflow infographic: brief, Brandiseer still, imageUrl, Framer Assets or canvas](https://blog.brandiseer.com/use-case-assets/framer-site-visuals/workflow-infographic.png)

## What you need

- Company website URL, if the brand is not in Brandiseer yet
- Brandiseer account with at least one finished brand profile
- API key (`bds_...`) from [Settings → API](https://brandiseer.com/settings/api) or [Developers](https://brandiseer.com/developers)
- Brand ID (`bds_c_...`) for every brand the agent may call
- Credits for the stills you actually generate (see the table in Limits & FAQ)
- Cursor or Claude Cowork, with Brandiseer MCP or a way to call REST
- A Framer project you can edit
- Access to Framer Assets and the canvas for static heroes and sections
- Optional, only for plugin placement: a Framer plugin that can call `framer.uploadImage` or `framer.addImage` with a public URL
- Optional, only for External Agent CMS attaches: Framer External Agent setup (`npx @framer/agent setup`) with the project connected. Store any Framer connection secrets in the agent secret store. See [Use external agents with Framer](https://www.framer.com/help/articles/use-external-agents-with-framer/)
- Optional: the CMS collection, item, and image field the External Agent should update. Read them from Framer. Do not guess field names

## Setup

### Stage 1: Add your brand on Brandiseer

1. Go to [brandiseer.com](https://brandiseer.com). In the homepage input, enter your company website URL and click **Try My Brand**.
2. Wait about one minute while Brandiseer analyses the site and picks a logo and visuals.
3. Review those visuals carefully. They teach Brandiseer your look. Every later Framer still is influenced by what you leave here.
4. Remove anything off-brand (partner logos, stock, irrelevant screenshots). Add campaign creatives or product photography that match the look you want.
5. Click **Add Brand**, sign up if prompted, then wait about 30 seconds for the brand profile to finish.

Agencies repeat this once per client. Do not point two client sites at one Brand ID.

### Stage 2: API key and Brand ID

1. Open [brandiseer.com/developers](https://brandiseer.com/developers) or [Settings → API](https://brandiseer.com/settings/api).
2. Create an API key (`bds_...`). Put it in the agent host's secret store. Do not paste it into a Framer CMS text field, a page, Slack, or a git repo.
3. Copy the Brand ID (`bds_c_...`).
4. Confirm the key with `GET https://brandiseer.com/api/v1/credits` and `GET https://brandiseer.com/api/v1/brands`, header `X-API-Key`. The credits JSON includes `credits`. The brands list includes each brand `id`.
5. Optional reachability check, no key required: `GET https://brandiseer.com/api/v1/health` returns `{ "status": "ok" }`.

Read [guide/docs](https://brandiseer.com/guide/docs) and [guide/image](https://brandiseer.com/guide/image) once while you write the standing instructions. Those pages are the live contract if a field name ever moves.

### Stage 3: Connect Brandiseer to the agent host

Use Cursor or Cowork. One host is enough.

**A. MCP**

1. Add the Brandiseer MCP server at `https://brandiseer.com/api/mcp`.
2. Authenticate with `Authorization: Bearer` and the API key, in the secret field your host provides.
3. Confirm the tool list shows `brandiseer_list_brands`, `brandiseer_check_credits`, and `brandiseer_generate_image`. If a fourth Brandiseer tool appears, ignore it until [guide/docs](https://brandiseer.com/guide/docs) documents it.

**B. REST**

1. On [Developers](https://brandiseer.com/developers), open **View Docs** and use **Copy for LLM** if you want the reference inside the session.
2. Tell the agent to prefer `POST https://brandiseer.com/api/v2/generate` or `POST https://brandiseer.com/api/v2/generate/async` with `X-API-Key`.
3. If Design mode times out, switch that call to async and poll `GET https://brandiseer.com/api/v2/jobs/:jobId` every 3 to 5 seconds.

### Stage 4: Save the standing instructions

1. Paste the **System prompt** from this guide into the Cursor rule or Cowork instructions that will run site stills.
2. Fill the defaults the prompt asks for: Brand ID, default crops per slot, resolution, mode, and whether `useLogo` is on when the brief is silent.
3. Ask the agent to call `brandiseer_list_brands` (or `GET /api/v1/brands`) and confirm the Brand ID exists before the first paid still.

### Stage 5: Smoke test a hero in Assets and on the canvas

1. Ask for one homepage hero with a layout-only brief (the Spring hero in Example flows).
2. Confirm the agent checked the brand, avoided colour and mood words, and returned `imageUrl` plus crop and mode.
3. Open the Framer project, upload that file in Assets, and place it on the hero frame on the canvas.
4. Leave the site unpublished if you are only proving the handoff.
5. Send a second brief that only says "make the hero premium and moody". The agent should ask what is physically in the frame instead of generating.

### Stage 6: Optional plugin or External Agent placement

Skip this stage if people will place stills by hand. Use it only when a plugin or an External Agent is already in play.

1. **Plugin path.** Follow [Working with Images](https://www.framer.com/developers/assets). From a public Brandiseer `imageUrl`, a plugin can call `framer.uploadImage({ image: imageUrl, name, altText })` to land the file in Assets without assigning a node, or `framer.addImage({ image: imageUrl, name, altText })` to add it to the canvas. Use `framer.setImage` only when a supporting node is selected. Brandiseer does not host or run the plugin.
2. **External Agent path.** Run `npx @framer/agent setup` and connect the Framer project. Framer documents that External Agents can upload images, attach them to CMS items, and leave publish under your control. Ask the agent to inspect the collection and image field first, then attach only the fields you named. Do not invent a Framer MCP server. Framer's External Agent connection replaces a separate MCP for this workflow.
3. Confirm the image appears in Assets or on the CMS item as a draft or staged change. Then stop. A person publishes later.

## Prompting rules for Brandiseer images

When the agent builds `prompt`:

- Keep subject, layout, composition, and on-image text (what the words say and where they sit).
- Never send brand colours, fonts, mood, or visual style. Brand memory already applies those. Style words fight the brand and produce off-brand stills.
- Put crop in `aspectRatio`, quality in `mode`, pixel size in `resolution`, and logo on/off in `useLogo`. Those are body fields, not prompt prose.
- Map the Framer slot to a documented ratio. Homepage hero and full-bleed section: `16:9`. CMS or card: `16:9`, `4:3`, or `1:1`, matching the component. Portrait site slots: `9:16`. OG and link-preview images: `16:9`. Brandiseer does not offer a 1.91:1 OG ratio. Crop in Framer if the slot is tighter than 16:9.
- Prefer `design` for finished site stills. `fast` is the API default if you omit `mode`, and it is the right fallback if a design job fails once.
- Prefer `1K` or `2K` for site stills unless the brief asks for `4K`.
- Set `useLogo` true only when the brief asked for a logo (or your default says so). Page headings that Framer text styles will render should stay off the image. Say "empty region" for that area instead of describing a font.
- Full rules: [Prompt compatibility](https://brandiseer.com/guide/image).

## System prompt

Paste this into Cursor or Cowork as the standing instructions for site stills. Replace the placeholders before the first generate.

```text
You generate on-brand stills for a Framer site. Brandiseer returns an image
URL. You do not push pixels into the Framer canvas by yourself, and you do
not publish the Framer site.

Brandiseer:
- MCP: https://brandiseer.com/api/mcp with Authorization: Bearer.
  Tools you may call: brandiseer_list_brands, brandiseer_check_credits,
  brandiseer_generate_image. Do not invent tool names.
- REST: X-API-Key: bds_... (secret store only).
  Prefer POST https://brandiseer.com/api/v2/generate
  or POST https://brandiseer.com/api/v2/generate/async
  then poll GET https://brandiseer.com/api/v2/jobs/:jobId every 3 to 5 seconds
  until data.status is done or failed, or about 10 minutes have passed.
- Live contract: https://brandiseer.com/guide/docs and
  https://brandiseer.com/guide/image

Defaults for this site (fill in once):
- Brand ID: bds_c_...
- Hero and section aspectRatio: 16:9
- CMS card aspectRatio: ask if the component is not known (16:9, 4:3, or 1:1)
- OG aspectRatio: 16:9 (there is no 1.91:1 Brandiseer ratio)
- mode: design
- resolution: 2K (use 1K if file size or speed matters)
- useLogo when the brief is silent: false
- Multi-brand map, if any: brand name to bds_c_...

On every request:
1. Resolve brandId from the brief or the default. If more than one brand
   exists and the brief does not name one, ask. Never fall through to
   another client's Brand ID.
2. Check credits before a batch (brandiseer_check_credits or
   GET https://brandiseer.com/api/v1/credits). A single still can proceed
   if the last known balance covers the mode and resolution in the table
   you were given. On 402, stop.
3. Rewrite the brief into subject, layout, composition, and on-image text.
   Strip colours, fonts, mood, and visual style. If stripping leaves no
   physical subject, ask what is in the frame. Do not generate.
4. Choose aspectRatio from the slot. Put resolution, mode, and useLogo in
   API fields, not in the prompt.
5. Generate one still. Return imageUrl, aspectRatio, mode, resolution,
   useLogo, and a placement note: Assets/canvas (hero, section, or OG)
   or the CMS collection and field the human named.
6. Do not tell the user the Framer canvas changed unless a Framer write
   you actually performed (plugin or External Agent) returned success.

Framer placement, only when the human already asked for it:
- Default path: the human downloads imageUrl, uploads it in Framer Assets,
  and places it on the canvas. You do not claim that happened.
- Plugin path (optional): framer.uploadImage / framer.addImage /
  framer.setImage from a public URL, only inside a Framer plugin context.
  Docs: https://www.framer.com/developers/assets
- External Agent path (optional): npx @framer/agent setup, project
  connected. Upload images and attach to CMS items the human named.
  Docs: https://www.framer.com/help/articles/use-external-agents-with-framer/
  and https://www.framer.com/help/articles/what-you-can-do-with-local-agents/
- Do not invent a Framer MCP server. Framer External Agents replace a
  separate MCP for this workflow.
- Do not publish the Framer site unless the human explicitly asks after
  they have reviewed the change.

Out of scope:
- Slack replies, Buffer scheduling, and Zapier, Make, or n8n scenarios.
- Webflow Designer or WordPress Media Library handoffs (use those guides).
- Legal approval of claims, prices, or offers printed on the image.
- GET https://brandiseer.com/api/v1/usage (browser session only).
```

### Prompt rewriter

Use this when a brief arrives as messy notes. It does not call Brandiseer. It only cleans text before you put it in `prompt`. The word list is a starting filter, not an official dictionary. If a phrase still describes colour, type, mood, or look, delete it by hand.

```javascript
// Local rewriter for a Cursor or Cowork helper script.
// Keeps subject, layout, composition, and on-image text.
// Strips colour, type, mood, and visual-style language.

const STYLE_WORDS =
  /\b(colou?rs?|palette|hex|fonts?|typefaces?|typography|serif|sans-serif|moods?|vibes?|aesthetics?|minimalist|luxury|playful|cinematic|pastel|neon|gradients?|moody|elegant|premium|on-brand)\b/gi;

const SLOT_TO_RATIO = {
  hero: "16:9",
  homepage: "16:9",
  banner: "16:9",
  section: "16:9",
  background: "16:9",
  "16:9": "16:9",
  card: "4:3",
  blog: "4:3",
  cms: "4:3",
  "4:3": "4:3",
  square: "1:1",
  "1:1": "1:1",
  og: "16:9",
  "open graph": "16:9",
  portrait: "9:16",
  "9:16": "9:16",
};

function rewriteBrandiseerPrompt(input) {
  const headline = String(input.headline || "").trim();
  const subject = String(input.subject || input.brief || "").trim();
  const slotKey = String(input.slot || input.crop || "").trim().toLowerCase();
  const aspectRatio = SLOT_TO_RATIO[slotKey] || "";

  let prompt = [subject, headline ? `On-image text: "${headline}".` : ""]
    .filter(Boolean)
    .join(" ");

  prompt = prompt
    .replace(/#[0-9a-f]{3,8}\b/gi, " ")
    .replace(STYLE_WORDS, " ")
    .replace(/\s+/g, " ")
    .trim();

  return {
    prompt,
    aspectRatio,
    needsSubject: prompt.length < 12 || !aspectRatio,
  };
}
```

If `needsSubject` is true, ask the human for a subject and a slot. Do not POST.

## Example flows

### Flow A: Homepage hero, placed on the canvas

The brief: "Homepage hero. Product on the left. Leave the right half empty. The Framer hero heading will sit there. No logo on the image."

The agent selects the default `brandId`, sets `aspectRatio` to `16:9`, `mode` to `design`, `resolution` to `2K`, and `useLogo` to false, and returns `imageUrl`. You upload the file in Framer Assets and place it on the hero frame. You publish later, after the heading and spacing look right on the canvas.

### Flow B: Section backgrounds for one landing page

The brief lists three sections: product row, quote band, and closing band. Each one says what is in the frame and which region must stay empty for Framer text. The agent generates three stills, all `16:9`, and labels them with the section name. You upload three assets and bind each one to its section. Three Design 2K stills cost 18 credits if all succeed. Failures refund.

### Flow C: CMS card image via External Agent, unpublished

The collection already has an image field. You have External Agent connected (`npx @framer/agent setup`). The agent generates a `4:3` card, then asks the External Agent to attach that public `imageUrl` to the named CMS item. You open the CMS item, confirm the image, and leave publish for a separate step.

### Flow D: OG image

The brief: "Share image for the spring launch page. Product left of centre. On-image text Spring launch on the right."

The agent uses `16:9`, not a 1.91:1 crop, and says so in the placement note. You set that asset as the page's Open Graph image in Framer page settings, and crop there if the preview needs a tighter frame.

### Flow E: Credit check before a page set

Before Flow B, the agent calls `brandiseer_check_credits` or `GET https://brandiseer.com/api/v1/credits` and reads `credits`. Three Design 2K stills need 18 credits. If the balance is lower, it stops or switches the batch to `fast` at `1K` (4 credits each) only if you asked for that fallback. `GET /api/v1/usage` is a browser session endpoint. Do not call it from the agent.

### Flow F: Style-only brief

The brief: "Make the hero feel premium and moody."

The agent does not generate. It asks which page, what is physically in the frame, whether any words must appear on the image, and whether the logo is on. Colour, font, and mood stay out of the prompt.

## Add-ons

Add these after the hero smoke test passes. They do not change Brandiseer's image contract, and they do not give Brandiseer a canvas push.

### Approval before publish

After `imageUrl` is in Assets, on the canvas, or on the staged CMS item, a named reviewer checks the still in Framer. Only then publish the site. Until that happens, leave the site on its current live version. Brandiseer does not approve legal claims, prices, or offers.

### One brand per Framer project

Keep a table: Framer project name, optional External Agent connection secret name, and `bds_c_...`. Require a named project on every CMS attach when more than one project exists. If the name misses, stop and list the projects you configured. Confirm Brand IDs with `GET /api/v1/brands`. Never fall through to another client's Brand ID or another project's connection.

### Credit soft-limit

When `credits` is under a threshold you choose (for example 40), switch new site stills to `mode: fast` and `resolution: 1K`, or skip them. Fast at 1K costs 4 credits. An explicit "run anyway" from the human can override the skip. The threshold is yours, not a Brandiseer default.

### Placement log

Keep a short note next to the work: page or CMS item, slot, `brandId`, `mode`, `aspectRatio`, `resolution`, `imageUrl`, and whether it was uploaded in Assets, added by a plugin, or attached by an External Agent. Brandiseer does not write this log. Framer does not send it back to Brandiseer.

### Handoff to the sibling guides

- Stills requested in Slack, returned in a thread: [Slack creative desk](/use-cases/slack-creative-desk).
- Captions and a Buffer schedule: [Social media automation](/use-cases/social-media-automation).
- A Zapier, Make, or n8n trigger that should deliver `imageUrl` on a schedule: [Always-on creative automation](/use-cases/always-on-creative-automation).
- Webflow Assets or CMS: [Webflow site visuals](/use-cases/webflow-site-visuals).
- WordPress Media Library: [WordPress site visuals](/use-cases/wordpress-site-visuals).

Do not embed Buffer, a Slack desk, an always-on HTTP scenario, Webflow, or WordPress inside this Framer guide.

### Optional motion (not the site MVP)

Video is image-to-video only. Generate the still first, then send its public `imageUrl` to `POST https://brandiseer.com/api/v2.1/video/generate`. Poll `GET https://brandiseer.com/api/v2.1/video/jobs/:jobId`. Video jobs use `status` `completed` and a `videoUrl`, which is a different contract from image jobs (`done` and `imageUrl`). Read [guide/video](https://brandiseer.com/guide/video) for tier, duration, and resolution before you enable this. Video credits are per second and are not the still table below. A video failure does not undo the still. Framer background video is a separate canvas decision. Leave this off unless the brief explicitly asks to animate.

## Limits & FAQ

### Does Brandiseer update the Framer canvas?

No. Brandiseer returns `imageUrl`. Static heroes, section backgrounds, and page-level OG images are placed in Assets and on the canvas by a person. A Framer plugin can call `framer.uploadImage` or `framer.addImage` with a public URL. An External Agent can upload images and attach them to CMS items when the project is connected. None of those paths publish the site by themselves.

### Is there a Brandiseer app inside Framer?

No. There is no Brandiseer Framer plugin in this guide. Do not look for a native "send to Framer" button on the Brandiseer side.

### Do I need a Framer MCP?

No. Framer documents that External Agents replace a separate Framer MCP for Claude Code, Cursor, Codex, Gemini CLI, and similar tools. Connect with `npx @framer/agent setup` when you want that path. Brandiseer still only returns the still.

### Which Framer calls are in this guide?

Only calls confirmed on Framer's developer and help docs, and only at the level those pages describe:

- Plugin image helpers: `framer.uploadImage`, `framer.addImage`, `framer.setImage` on [Working with Images](https://www.framer.com/developers/assets)
- External Agent setup: `npx @framer/agent setup` on [Use external agents with Framer](https://www.framer.com/help/articles/use-external-agents-with-framer/)
- External Agent CMS and asset work: [What you can do with local agents](https://www.framer.com/help/articles/what-you-can-do-with-local-agents/)

Field names, collection ids, and publish rules come from your project and from those pages. This guide does not invent a "set hero background" Brandiseer endpoint.

### Where do the keys live?

The Brandiseer key (`bds_...`) and any Framer External Agent connection secrets live in the agent host's secret store. Never in a CMS text field, a Slack message, a prompt you commit, or a workflow export in git. Rotate either secret if it leaks. Poll a Brandiseer job with the same Brandiseer key that submitted it.

### What do stills cost?

Credits per still. Failures refund. Async submits deduct immediately and refund if the job fails.

| Mode | 1K | 2K | 4K |
| --- | --- | --- | --- |
| Fast | 4 | 6 | 8 |
| Design | 5 | 6 | 8 |
| Pro | 6 | 8 | 10 |

`402` means not enough credits. Pricing context: [brandiseer.com/pricing](https://brandiseer.com/pricing).

### Why is the still off-brand?

Almost always because the prompt contained colours, fonts, mood, or visual style. Strip them and generate again. See [guide/image](https://brandiseer.com/guide/image).

### Why does the crop look wrong in the OG preview?

Brandiseer aspect ratios are `1:1`, `16:9`, `9:16`, and `4:3`. Generate the share image at `16:9`, then crop in Framer if that page slot is a different frame.

### How long can I poll?

About 10 minutes, then the job expires. Poll every 3 to 5 seconds. Stop on `done` or `failed` as well. Do not start a second job for the same slot while the first is still open, or you will pay twice.

### Which generate URL should new site work use?

`POST /api/v2/generate` when the agent host waits long enough. `POST /api/v2/generate/async` when it does not. Legacy `POST /api/v1/generate` remains for older callers and only supports Fast and Pro via `proMode` boolean.

### Does the agent approve claims on the image?

No. If the still has a price, a discount, or a legal line, a person reads it before publish. Brandiseer does not review the claim.

## Demo / motion

**Motion brief only. This is not an embed, and there is no walkthrough URL yet.**

**Working title:** Framer site visuals
**Length:** 45 to 75 seconds

**Story beats:**

1. A person asks Cursor or Cowork for a homepage hero with a layout-only brief
2. The agent calls Brandiseer (MCP or REST v2) and shows an on-brand still
3. `imageUrl` is uploaded in Framer Assets and placed on the hero on the canvas
4. Optional cut: a CMS card image is attached through a Framer External Agent, still unpublished
5. A human publishes only after the page looks right

**On screen:** the agent transcript with the prompt (no colour or mood words), one finished still, and the Framer Assets panel. Blur the Brandiseer API key and any Framer connection secrets. Do not show a fake video player in the guide.

## Related use cases

- [Always-on creative automation](/use-cases/always-on-creative-automation): Zapier, Make, or n8n calls Brandiseer REST and delivers `imageUrl` downstream
- [Slack creative desk](/use-cases/slack-creative-desk): people request stills in Slack and get them back in-thread
- [Social media automation](/use-cases/social-media-automation): on-brand images, captions, and Buffer scheduling
- [Webflow site visuals](/use-cases/webflow-site-visuals): Brandiseer stills placed in Webflow Assets or CMS
- [WordPress site visuals](/use-cases/wordpress-site-visuals): Brandiseer stills placed in the WordPress Media Library

## Links

| Resource | URL |
| --- | --- |
| Brandiseer | https://brandiseer.com |
| Developers | https://brandiseer.com/developers |
| API reference (guide/docs) | https://brandiseer.com/guide/docs |
| Image prompt compatibility | https://brandiseer.com/guide/image |
| Video prompting (optional motion) | https://brandiseer.com/guide/video |
| MCP endpoint (agent hosts) | https://brandiseer.com/api/mcp |
| API keys | https://brandiseer.com/settings/api |
| Pricing / credits | https://brandiseer.com/pricing |
| Framer | https://www.framer.com |
| Framer Developers | https://www.framer.com/developers/ |
| Framer Working with Images | https://www.framer.com/developers/assets |
| Framer External Agents | https://www.framer.com/help/articles/use-external-agents-with-framer/ |
| Framer local agents guide | https://www.framer.com/help/articles/what-you-can-do-with-local-agents/ |
| Visual pack manifest | `assets/MANIFEST.md` |
| Sibling: Always-on creative automation | https://blog.brandiseer.com/use-cases/always-on-creative-automation |
| Sibling: Slack creative desk | https://blog.brandiseer.com/use-cases/slack-creative-desk |
| Sibling: Social media automation | https://blog.brandiseer.com/use-cases/social-media-automation |
| Sibling: Webflow site visuals | https://blog.brandiseer.com/use-cases/webflow-site-visuals |
| Sibling: WordPress site visuals | https://blog.brandiseer.com/use-cases/wordpress-site-visuals |

## Source

Public Use case README for Framer site visuals. Brandiseer MCP and REST v2 image generation from Cursor or Claude Cowork, then a human (or a Framer plugin / External Agent) places `imageUrl` in Framer Assets, on the canvas, or on a CMS image field. Aligned with [guide/docs](https://brandiseer.com/guide/docs) and [guide/image](https://brandiseer.com/guide/image) (27 September 2026). Brandiseer does not push into the Framer canvas by itself. Distinct from Slack creative desk, Buffer social scheduling, Zapier/Make/n8n always-on HTTP, Webflow site visuals, and WordPress site visuals.

## API reference

Wiring reference for agents and HTTP modules. The sections above are the human path.

### MCP (interactive stills in Cursor or Cowork)

Connect `https://brandiseer.com/api/mcp` with `Authorization: Bearer` and the API key. The only tools this guide uses are:

- `brandiseer_list_brands`
- `brandiseer_check_credits`
- `brandiseer_generate_image`

Do not invent extra Brandiseer tool names. If the host needs explicit `mode`, `aspectRatio`, or async polling, use REST v2 below. MCP does not edit Framer.

### REST (prefer v2 images)

Send `X-API-Key: bds_...` on every authenticated Brandiseer call. There is no official SDK. Any HTTP client the agent host can run is enough.

| Call | What you get |
| --- | --- |
| `POST https://brandiseer.com/api/v2/generate` | Sync still. `200` body `{ "imageUrl", "creditsUsed" }`. Design mode often takes 40 to 70 seconds. |
| `POST https://brandiseer.com/api/v2/generate/async` | `202` body `{ "data": { "jobId" } }` (ids look like `bds_job_...`). Credits are deducted when you submit. |
| `GET https://brandiseer.com/api/v2/jobs/:jobId` | Poll every 3 to 5 seconds with the same API key. `data.status` becomes `done` or `failed`. Jobs expire after about 10 minutes. Failures refund credits. |
| `POST https://brandiseer.com/api/v1/generate` | Legacy only. `proMode` boolean. Fast and Pro only. Prefer v2. |
| `GET https://brandiseer.com/api/v1/credits` | JSON includes `credits`, the current balance for that key. |
| `GET https://brandiseer.com/api/v1/brands` | Brands for the key. Each brand `id` looks like `bds_c_...`. |
| `GET https://brandiseer.com/api/v1/health` | `{ "status": "ok" }`. No API key. |

Image body fields: `brandId`, `prompt`, optional `aspectRatio` (`1:1`, `16:9`, `9:16`, `4:3`), `resolution` (`1K`, `2K`, `4K`), `mode` (`fast`, `design`, or `pro`; default `fast` if you omit it), `useLogo`.

Sync status codes you should branch on: `200` success, `400` bad body, `401` bad key, `402` not enough credits, `404` brand not found, `500` server error.

Done job body: `{ "data": { "status": "done", "imageUrl", "creditsUsed", "referenceImage" } }`. Hand `data.imageUrl` to Framer. Failed job body: `{ "data": { "status": "failed", "error": { "code", "message" } } }`.

Cursor and Cowork can wait on a sync Design call when the session allows it. If the HTTP client times out under about 60 seconds, use async and poll. Do not point Framer at the Brandiseer MCP URL.

### Field mapping

| Incoming field | API | Rule |
| --- | --- | --- |
| Slot (hero, section, card, OG) | `aspectRatio` | Hero and section: `16:9`. Card: `16:9`, `4:3`, or `1:1`. OG: `16:9`. Portrait: `9:16`. |
| headline | inside `prompt` only | On-image text and placement. Not a separate body field. Leave it out when Framer will set the headline. |
| brandId | `brandId` | `bds_c_...`. Required. |
| mode | `mode` | `fast`, `design`, or `pro`. Omit and the API uses `fast`. Prefer `design` for site stills. |
| useLogo | `useLogo` | `true` or `false`. |
| subject or brief | `prompt` | After the rewriter. If the cleaned text has no subject, do not call Brandiseer. |
| resolution | `resolution` | `1K`, `2K`, or `4K`. Prefer `2K` or `1K` for site stills. |

### Example JSON

Use this body for both sync and async. Only the URL and the response change.

```json
{
  "brandId": "bds_c_...",
  "prompt": "Wide homepage hero. Product centred on the left third. Empty right half for a headline the page will set in Framer. No on-image text.",
  "aspectRatio": "16:9",
  "resolution": "2K",
  "mode": "design",
  "useLogo": false
}
```

Sync: `POST https://brandiseer.com/api/v2/generate`. A Design 2K still costs 6 credits, so a success body looks like:

```json
{
  "imageUrl": "https://...",
  "creditsUsed": 6
}
```

Async: `POST https://brandiseer.com/api/v2/generate/async`. HTTP `202`:

```json
{
  "data": {
    "jobId": "bds_job_..."
  }
}
```

Poll `GET https://brandiseer.com/api/v2/jobs/bds_job_...` with the same `X-API-Key`. When it finishes:

```json
{
  "data": {
    "status": "done",
    "imageUrl": "https://...",
    "creditsUsed": 6,
    "referenceImage": null
  }
}
```

When it fails (credits are refunded):

```json
{
  "data": {
    "status": "failed",
    "error": {
      "code": "...",
      "message": "..."
    }
  }
}
```

Ignore `referenceImage` for delivery. Framer gets `imageUrl` (or a file you downloaded from it).

Slot prompts that stay layout-only:

| Slot | aspectRatio | Prompt |
| --- | --- | --- |
| Homepage hero | `16:9` | Wide homepage hero. Product centred on the left third. Empty right half for a headline the page will set in Framer. No on-image text. |
| Section background | `16:9` | Full-bleed section background. Product cluster along the bottom edge. Upper two thirds empty for a Framer heading. No on-image text. |
| CMS or card | `4:3` | Card image. Single product in the centre. On-image text: "Field notes" along the bottom edge. Open space above the product. |
| OG image | `16:9` | Landscape share image. Product left of centre. On-image text: "Spring launch" in the right third. |