Situ - Design → MCP

Note: Situ is currently in open beta, you can sign up for free and start using Situ. We're actively working on improvements and stability and would love to hear your feedback. We don't recommend using the beta for any mission-critical projects.

Describing design changes to agents isn't fun. Situ let's you tweak your design the same way you would in Figma, but without leaving your dev environment. Local MCP handles passing the changes to your agent to be implemented in your codebase. It's simple but powerful.

Why Situ?

Design tools sit outside your workflow. Situ lives inside it.

Inspect, measure, and edit React components live in your browser with real-time feedback.

Alt+hover to inspect. Alt-click to select. Edit styles, gaps, padding, and colors in real-time — served through your local MCP server to your agent of choice (Cursor, Claude, etc.) for safe, context-aware implementation directly in code.

Core Capabilities

🔍 Visual Element Inspection

See your React structure come to life. Hover to highlight any element, view outlines, dimensions, and layout properties. Click to lock focus and explore nested layers.

Master Flexbox

Adjust spacing and padding like you would in Figma. Measure spatial relationships between elements and visualise layout structure edits directly on the page.

Live Style Editing

Edit visual properties through an integrated sidebar with flexbox, fill, border, gradient, and typography controls.

Dev-Native

Every inspection and edit links to real source context. Jump instantly from element to JSX in VS Code or Cursor. Situ recognises Vite, Webpack, and CRA setups automatically, configuring itself with minimal effort.

Project-Aware Setup

Situ copies all required bundles to your project on install and provides tailored setup instructions for your AI agent for the rest. Your agent applies the modifications (e.g., updating index.html or vite.config.ts/js) to complete integration safely and accurately.

Getting Started

1. Install from the VS Code Marketplace

   • Search for "Situ" in Extensions
   • Click Install

2. Login with your Situ account

   • If using email/password instead of Google, sign up first at situ.design/register
   • Open Command Palette: Ctrl+Shift+P (or Cmd+Shift+P on Mac)
   • Run: Situ: Login to Situ
   • Complete browser authentication

3. Setup your project

   • Situ automatically copies required bundles to your project
   • Run Situ: Setup Situ to generate setup instructions
   • Provide the generated markdown file to your agent (Cursor or Claude)
   • Your agent will implement the required edits (usually to index.html and vite.config.ts/js)

4. Start your dev server

   • Run your usual dev command (npm run dev, etc.)
   • Situ activates automatically in development mode

5. Begin inspecting

   • Hold Alt in your browser to inspect, measure, and edit elements live
   • Alt+Click to select elements
   • Use the sidebar to view and adjust styles

Commands

Requirements

• VS Code 1.74+ (or Cursor)
• React 16.8+
• Active development server
• Free Situ Design account (situ.design)

Setup Process

Situ uses a hybrid setup designed for modern, complex React projects:

1. Automatic file injection: The inspector bundle, MCP plugin, and Babel plugin are copied to public/plugins/situ-design/ upon login.
2. AI-assisted configuration: Running Setup Situ creates a markdown file with detailed, version-specific setup steps for your agent.
3. Agent-safe edits: The file instructs your AI agent how to patch configuration files securely without manual edits.

This ensures compatibility with custom Vite setups, monorepos, and non-standard build structures.

Security & Privacy

• Works only in development mode — disabled automatically in production builds.
• OAuth credentials stored securely via VS Code Secret Storage.
• All communication between your editor, local MCP server, and Situ servers is fully encrypted.

Support

• Website: situ.design
• Docs: Included in generated setup files
• GitHub: Report issues and feature requests

Free Open Beta — Access all inspector features during open beta.

Version: 1.0.18 • Publisher: SituDesign