How to Generate Images in Cursor AI: Built-in Features and MCP Setup Guide

Quick Overview

Cursor AI allows developers to create images directly from its coding environment. Starting with Cursor 2.4, released in January 2026, its agent includes an image generation feature powered by Google’s Nano Banana Pro model.

You can use this feature to make website banners, interface designs, product visuals, and other graphics without leaving your project. Generated images appear in the chat for review and are saved in the project’s assets/ folder by default.

If you prefer a different image generation service, you can also connect compatible tools through the Model Context Protocol (MCP).

In this guide, you will learn how both options work, how to write useful prompts, where generated files are stored, and what to check if image generation fails.

Also read: Samsung Galaxy F70 5G Goes on Sale in India: Price, Offers, Features and Specifications

Can You Create Images Directly in Cursor AI?

Yes. Cursor 2.4 introduced an image generation tool that lets you describe the image you need in a text prompt or provide a reference image to guide the result.

The built-in feature uses Google’s Nano Banana Pro model. You can ask it to create graphics for a website, prepare a visual concept for an application, or develop artwork for a project.

After generation, the image appears in the agent conversation. Cursor also saves the output to your project so you can review it and use it in your code.

The feature is designed to work within your existing development workflow, which means you do not need to install a separate image generation plugin for the built-in option.

Method 1: Generate Images With Cursor’s Built-in Tool

This is a straightforward option if you want to create images without configuring an external service.

Step 1: Update Cursor

Install Cursor version 2.4 or a later compatible release. If you are using an older version, the image generation feature might not be available.

Step 2: Open Your Project

Load the website or application folder you want to work on. Opening a project gives Cursor a location where it can save generated files.

Step 3: Open the Agent Panel

Use Ctrl + I on Windows or Cmd + I on macOS to open the agent interface, depending on your Cursor setup.

Step 4: Describe the Image

Write a prompt that explains what you want to create. Include details such as the image’s purpose, dimensions, visual style, colours, and intended location in the project.

For example, you could request a wide banner for a technology blog or a clean illustration for a product landing page.

Step 5: Add a Reference Image if Needed

If you already have a design you want to follow, attach it to your prompt. A reference can help communicate the preferred composition, colour palette, or overall visual direction.

Step 6: Review the Result

Cursor displays the generated image in the conversation. Examine it carefully and request specific changes if the result does not match your requirements.

For example, you can ask for more empty space around the subject, a different background, or a revised colour scheme.

Do you need to select an image model manually?

The built-in tool is designed to be called by the agent when appropriate. You generally do not need to configure a separate image model in the Models settings to use this feature.

Method 2: Connect an External Image Generator Through MCP

The built-in image tool may be enough for everyday website graphics. However, some developers prefer an external provider because they need a particular model, additional tools, or a service they already use.

Cursor supports the Model Context Protocol, commonly known as MCP. It allows the agent to interact with compatible tools provided by external services.

Where Does Cursor Store MCP Configuration?

Cursor supports two common configuration locations:

• User-level configuration: ~/.cursor/mcp.json — for servers intended to be available across projects.
• Project-level configuration: .cursor/mcp.json — for servers configured for a particular project.

The exact setup depends on the MCP server and the authentication method supported by its provider.

Example MCP Configuration

A remote MCP service may use a configuration similar to the following:

{
  "mcpServers": {
    "image-server": {
      "url": "https://api.example.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:IMAGE_API_KEY}"
      }
    }
  }
}

This is an illustrative example, not a working connection to a real image service. Replace the example URL with the endpoint supplied by your provider.

The IMAGE_API_KEY variable must also be configured in the environment accessible to Cursor. Check the provider’s instructions for the supported authentication format and variable setup.

Using an environment variable helps avoid placing the API key directly in the configuration file. Do not publish credentials in a public repository or share them in screenshots.

Enable and Test the MCP Server

After saving the configuration:

1. Open Cursor and find the MCP or tool configuration controls in the interface.
2. Confirm that the server is enabled.
3. Check whether its tools are available to the agent.
4. If the connection fails, inspect the MCP logs or Output panel for error messages.
5. Follow the service provider’s troubleshooting instructions.

Menu names and configuration details can vary between Cursor releases and MCP providers.

Check Pricing Before Using an External Service

Third-party image services may charge for each generation, use prepaid credits, or apply subscription limits. Some may also have separate costs for API access.

Before connecting a paid service, review its pricing, usage limits, data handling practices, and privacy terms. An MCP connection does not automatically mean that image generation is free.

Built-in Image Generation vs. MCP

Both methods can be useful, but they serve slightly different needs.

Feature	Cursor’s built-in tool	External MCP service
Initial setup	Usually minimal	Requires server configuration
Image model	Google Nano Banana Pro, according to Cursor’s feature announcement	Depends on the connected provider
API key	No separate provider key is generally needed for the built-in tool	Often required
File location	Project’s assets/ folder by default	Depends on the service and workflow
Additional costs	Subject to Cursor’s applicable plan and usage terms	Depends on provider pricing
Suitable for	Website graphics, mockups, and general project assets	Access to specific external tools or models

For routine development tasks, the built-in feature is a convenient starting point. MCP is worth considering when you need capabilities that are not available through Cursor’s native tool.

How to Write Better Image Generation Prompts

A useful prompt gives the agent enough information to create an image that fits your project. Instead of writing only a few words, explain the image’s purpose and describe the visual result you expect.

Consider including these details:

• Purpose: Explain where the image will appear.
• Dimensions: Specify the required width, height, or aspect ratio.
• Style: Describe the desired look, such as realistic photography, flat illustration, or minimal design.
• Colours: Mention the colours used by your website or application.
• Composition: Explain where the main subject should appear and where empty space is needed.
• Restrictions: State whether you want text, logos, borders, or other elements included.
• File destination: Tell Cursor where to save the output.

Here are some example prompts you can adapt.

1. Create an Open Graph Image

An Open Graph image is the visual preview that may appear when someone shares a webpage on a social platform or messaging service.

Example prompt:

“Review the content and visual style of this website. Create a 1200 × 630 pixel social sharing image that matches its colour palette and subject. Keep the design clear and readable at smaller sizes. Save the file in public/images/ and use a descriptive filename.”

2. Design a Website Hero Image

A hero image is a prominent visual near the top of a webpage.

Example prompt:

“Create a wide 16:9 image showing a peaceful mountain landscape at sunrise. Use natural lighting and a clean, modern photographic style. Leave the left third relatively uncluttered so the website can display a headline there. Do not include text, logos, or borders.”

3. Generate a Mobile App Mockup

Example prompt:

“Create a visual mockup of a mobile login screen for this application. Follow the existing interface style and use the colours defined in the project’s Tailwind configuration. Include email and password fields, a login button, and a password recovery link. Keep the layout simple and suitable for a modern mobile app.”

Review the result before using it as a reference for actual application code. A generated mockup is a visual concept, not a functioning interface.

4. Make a README Banner

Example prompt:

“Create a wide banner for this project’s README file. Use the repository description to understand the main purpose of the application. Make the design professional, with a clear visual hierarchy and enough space for a short project title. Save the image beside README.md.”

A Tip for Consistent Results

If you need several images for the same website, start by generating one image that establishes the visual direction. Once you are happy with its appearance, use it as a reference for subsequent generations.

This can help maintain a consistent style across banners, illustrations, and other project graphics, although identical results are not guaranteed.

Recommended Image Sizes for Websites

Choosing suitable dimensions before generation can reduce unnecessary resizing and help your images fit their intended layouts.

Image type	Common dimensions or ratio
Social sharing preview	1200 × 630 pixels
Website hero image	16:9 or 21:9
Square social media graphic	1:1
Reels or Shorts cover	9:16

These are common starting points rather than strict requirements. Check the specifications of the website, platform, or component where the image will be displayed.

For responsive websites, you should also consider how the image will look on smaller screens.

Where Are Generated Images Saved?

By default, Cursor saves generated images in the project’s assets/ directory. However, your project may use a different location for images served by the website.

For example, a web application might keep publicly accessible graphics in public/images/.

If you need a specific destination, include it in your prompt. You can also request a descriptive filename, such as hero-mountain-sunrise.png, to make the file easier to identify later.

When Cursor adds an image to a website component, ask it to provide suitable alternative text, commonly called alt text. Alt text should describe the meaningful content of the image for people using screen readers. Decorative images may need different treatment depending on how they are implemented.

Before publishing, check the image path, file format, visual quality, and alt text. Also make sure the image is appropriately licensed for your intended use and does not contain unwanted text or visual elements.

Troubleshooting: Why Is Image Generation Not Working?

If Cursor cannot generate an image, the cause may be related to the application version, project setup, selected model, or external service configuration.

Problem 1: The Agent Cannot Generate Images

What to check:

• Confirm that you are running Cursor 2.4 or a later release.
• Open a project folder.
• Start a fresh agent conversation if the current one is behaving unexpectedly.
• Clearly describe the image you want and ask the agent to use its image generation tool.

If the feature remains unavailable, check Cursor’s current documentation for any plan, model, or feature restrictions.

Problem 2: Image Generation Fails in a Quick Chat

Some workflows depend on having an active project context. Open the relevant project and try the request again.

If the problem continues, check the error message and confirm that your current Cursor version supports the workflow you are using.

Problem 3: The Image Tool Is Missing for the Selected Model

Tool availability may differ between models and agent configurations. If image generation is not available, try a supported agent or model configuration, such as Composer where applicable.

Check the current Cursor documentation rather than assuming every model supports the same tools.

Problem 4: MCP Tools Are Not Appearing

Check the following:

1. Confirm that your mcp.json file contains valid JSON.
2. Verify that the server URL is correct.
3. Make sure the required API key or environment variable is available.
4. Confirm that the MCP server is enabled.
5. Review the logs for authentication, connection, or configuration errors.

A server can be configured correctly on paper and still fail if the provider is unavailable or its authentication requirements have changed.

Problem 5: The Generated Image Looks Different From Your Idea

Image generation often requires a little refinement. Instead of repeating the original prompt without changes, explain exactly what needs to improve.

For example, specify that the subject should move to the right, the background should be lighter, or more empty space is needed for text.

Clear revision instructions can make the next result more useful and help avoid unnecessary generations, particularly when an external provider charges per request.

Also read: WhatsApp Tests Instagram Reels Sharing Shortcut and Scheduled Messages on Android

Final Thoughts

Cursor AI brings image creation closer to the coding process by allowing developers to generate visual assets within their projects. Its built-in tool is a practical option for creating website banners, interface concepts, and other graphics without configuring a separate service.

For developers who need additional image models or external tools, MCP provides another route, although it requires configuration and may involve extra costs.

Whichever approach you choose, write specific prompts, check the generated files, protect API credentials, and review each image before publishing it. These steps can help you integrate generated visuals into a project more reliably.

Frequently Asked Questions