UI/ Frontend Mode

Feature Requests
1

A dedicated UI Mode within Cursor AI that allows for direct development and manipulation of frontend components would be highly valuable. This mode should offer a more visual, interactive interface tailored to building and adjusting user interfaces—ideally integrating live previews, drag-and-drop components, and contextual editing support. The goal is to streamline frontend workflows and enable more intuitive collaboration between developers and designers.

1 Like
2

Hi @KarstenSchnappauf thank you for the great suggestion and welcome to the forum.

Could you elaborate more how this would ideally work?
From screenshots or using frontend UI libraries (Tailwind or similar)?

There are several Browser MCP versions which give AI access to the browser to verify if adjustments made worked well.

3

Hi @T1000 ,

Thanks a lot for your question.

Here’s how I imagine the workflow for integrating UI components with Cursor:

  1. Step 1: Define Prompt or Image Input** The user provides either a textual prompt (e.g. “Create a login form”) or an image as input. This input is parsed and used to generate frontend code using common UI libraries (e.g. React, Tailwind, etc.).

  2. Step 2: Launch Generated Frontend in Isolated View** The generated UI is rendered in a separate panel or “UI Mode” within Cursor — essentially a sandboxed view where the interface is live and interactive.

  3. Step 3: Interactive Editing via Cursor Agent** Within this UI Mode, the user can interact directly with UI components — e.g. click a button, select a container, etc. After selecting a component, the user can prompt the Cursor agent with natural language commands like:

  • “Change the button color to green.”
  • “Move this input field to the top.”
  • “Wrap this section in a new card layout.”The agent then updates the underlying code accordingly.

This is conceptually similar to v0.dev, but in Cursor, it should be possible to go beyond frontend, enabling full-stack development (e.g. backend logic, API handling, DB integration).

1 Like
4

Thanks for the detalied explanation, that is very close to what the Browser MCP provides. It lets you click in browser on an element to select it, and in chat you can describe the change you want.

Naturally a fully integration solution would be best. I will upvote as I would find that also practical.

2 Likes
5

+1 to this.

1 Like
6

Just to flag, we are looking at ways of improving frontend (and similar) development!
Nothing to announce yet, but something that we are experimenting with :raising_hands:

1 Like
7

The Endgame[dot]dev MCP is moving a bit in this direction. They deploy and do back/front tests on each deployment rapidly. Saves you effort. I’m in a beta where they do automated AI tests now that target your front-end changes and it rocks. All bugs/logs go back to Cursor so Cursor can keep iterating.

Not as human-in-the-loop as you might be looking for as they are adamant about AI loops first.