Cursor + Cuiar

See localhost the way a visitor does.

  • mcp.json
  • OAuth with PKCE
  • localhost works

Cursor's Agent writes the frontend. Cuiar opens it in a real browser on the same computer, in a workspace with its own cookies and device.

The Agent takes a screenshot, reads the layout with evaluate and fixes what it sees. Test logins come from the vault, so they stay out of the repo and the .env files.

Cursor with a code file, the Agent panel and a Cuiar tab on localhost. The Agent takes a screenshot of the page, one line of CSS changes in the file, and the logo in the tab moves to its correct place.

Setup

One entry in mcp.json.

Cursor and the Cuiar app run on the same computer, so a Cuiar tab reaches localhost directly.

  1. 1

    Add the server

    Put it in ~/.cursor/mcp.json for all projects, or in .cursor/mcp.json to share it with the team.

    ~/.cursor/mcp.json
    {
      "mcpServers": {
        "cuiar": { "url": "https://mcp.cuiar.com/mcp" }
      }
    }
  2. 2

    Sign in

    Cursor starts the OAuth sign-in. Sign in on cuiar.com.

  3. 3

    Check the tools

    Open Customize, MCPs. Cuiar shows its tools.

  4. 4

    Ask the Agent

    Open http://localhost:3000 in Cuiar, take a screenshot and a snapshot of the header, and fix the logo that overlaps the menu.

Other ways to connect

  • An API key

    Set CUIAR_MCP_KEY to a key with the mcp scope in your shell startup file, for example ~/.zshrc.

    ~/.cursor/mcp.json
    {
      "mcpServers": {
        "cuiar": {
          "url": "https://mcp.cuiar.com/mcp",
          "headers": { "Authorization": "Bearer ${env:CUIAR_MCP_KEY}" }
        }
      }
    }
  • Local stdio

    Needs the Cuiar CLI, signed in.

    ~/.cursor/mcp.json
    {
      "mcpServers": {
        "cuiar": { "command": "cuiar", "args": ["mcp"] }
      }
    }
  • Cursor CLI

    The agent command reads the same mcp.json.

    agent mcp login cuiar
    agent -p --trust --approve-mcps "Open localhost:3000/pricing in Cuiar and list the layout errors"

Route

MCP keeps the terminal free.

With MCP, the Agent works the tab step by step and needs no terminal approval. A Cuiar tab reaches localhost directly, also with the remote URL.

Remote MCPmcp.cuiar.com/mcp
Best fit
OAuth with PKCE, or a key in headers.
Local MCPcuiar mcp
Works
cuiar mcp with the CLI signed in.
CLIcuiar exec
Works
The Agent runs cuiar exec in the terminal. The sandbox can block its network calls; approve it outside the sandbox or use MCP.
Routineson a schedule
In part
Cursor Automations run Cloud Agents. Their sign-in to Cuiar is not tested. A Cuiar routine runs in the app.

Example tasks

Frontend checks in a real tab

  • 01

    Find an overflow

    “Open /pricing on localhost in Cuiar. Use evaluate to list the elements wider than the window, take a screenshot and fix the overflow.”

  • 02

    Test form errors

    “On localhost:3000/signup, try an empty email, a@b, a 300-character name and a weak password. Take a snapshot of each error message and compare it with docs/forms.md.”

  • 03

    Sign in with Google on dev

    “In my Dev OAuth workspace, click Continue with Google on localhost, sign in with the saved test account and confirm that the app shows the avatar.”

    The vault signs in. The test password stays out of the repo.

  • 04

    Compare with production

    “Open localhost:3000/pricing and https://example.com/pricing in two tabs. Take a screenshot of both and list each difference in text, prices and plan order.”

  • 05

    Be a new visitor

    “Create a new Cuiar workspace and open localhost:3000. Take a screenshot of the first screen and check that the cookie banner shows.”

    A new workspace has no cookies and its own device.

Good to know

Approvals
The Agent asks before each MCP tool call by default. In Cursor 3.6 and later, Auto-review runs allowlisted tools at once.
Cursor's own browser
Cursor's browser keeps one set of cookies per project. Each Cuiar workspace has its own cookies, device and saved logins.

Templates to run from Cursor

All templates

Each template page shows the run_task or create_routine call to give Cursor.

  • Engineering

    Compare page speed before and after a release

    Lab metrics for your key pages after each production deploy, with each page that got slower.

    On an event: When a new production deploy finishes
    • Netlify
    • PageSpeed Insights
    • Google Sheets
  • EngineeringAsks first

    Label and sort new GitHub issues

    Labels, a priority and a possible duplicate for each new issue, applied after you approve them.

    On an event: When a new issue is opened
    • GitHub
  • Engineering

    Audit your DNS records in Cloudflare

    Records that point to removed services, origins with no proxy and weak mail settings, with a fix for each.

    You start it: When you start it
    • Cloudflare
  • Engineering

    Compare open-source libraries before you pick one

    Downloads, releases, open issues, license and size of each library, with a recommendation.

    You start it: When you start it
    • GitHub
    • npm
    • PyPI
  • Data

    Export your order history

    For stores with no export: each order in a sheet, with totals for each year.

    You start it: When you start it
    • Any online store
    • Google Sheets
  • Data

    Build one table from several public statistics

    Numbers from official sources in one sheet, with the same units, years and country codes.

    You start it: When you start it
    • Our World in Data
    • Any government site
    • Google Sheets