live-studio

v0.1.6

Published

3 months ago

Open-source visual CSS editor with MCP for AI agents

Downloads

0High
0Medium
0Low

drozh.dev

css editor mcp visual design live studio

Live Studio

Visual CSS editor with MCP integration for AI agents. Edit styles, HTML attributes, text content, and CSS variables on a live page — changes are sent to your AI coding agent for implementation.

Install

npm install live-studio

Run the installer to set up MCP config and skill files:

npx live-studio install

This creates .mcp.json and skill files for Claude Code, Cursor, and other supported agents.

Setup

Add startStudio() to your app's entry point so it runs in the browser. It should only run in development.

React + Vite

// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

if (import.meta.env.DEV) {
  import("live-studio").then(({ startStudio }) => startStudio());
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

For source file tracking (so the AI agent knows which file to edit), add the Vite plugin:

// vite.config.ts
import react from "@vitejs/plugin-react";
import { reactTracer } from "live-studio/vite";

export default defineConfig({
  plugins: [react(), reactTracer()],
});

The plugin injects source location attributes in dev mode only — no impact on production builds. Without it, the agent can still edit styles but won't know the exact source file and line number for each component.

Next.js (App Router)

Create a client component that loads the editor:

// src/components/LiveStudio.tsx
"use client";

import { useEffect } from "react";

export function LiveStudio() {
  useEffect(() => {
    if (process.env.NODE_ENV !== "development") return;

    let cleanup: (() => void) | undefined;
    import("live-studio").then(({ startStudio }) => {
      cleanup = startStudio();
    });
    return () => cleanup?.();
  }, []);

  return null;
}

Add it to your root layout:

// src/app/layout.tsx
import { LiveStudio } from "@/components/LiveStudio";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NODE_ENV === "development" && <LiveStudio />}
      </body>
    </html>
  );
}

Next.js (Pages Router)

// src/pages/_app.tsx
import type { AppProps } from "next/app";
import { useEffect } from "react";

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    if (process.env.NODE_ENV !== "development") return;

    let cleanup: (() => void) | undefined;
    import("live-studio").then(({ startStudio }) => {
      cleanup = startStudio();
    });
    return () => cleanup?.();
  }, []);

  return <Component {...pageProps} />;
}

Vue (Vite)

// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";

if (import.meta.env.DEV) {
  import("live-studio").then(({ startStudio }) => startStudio());
}

createApp(App).mount("#app");

Nuxt

Create a client-only plugin:

// plugins/live-studio.client.ts
export default defineNuxtPlugin(() => {
  if (import.meta.dev) {
    import("live-studio").then(({ startStudio }) => startStudio());
  }
});

Usage

Start your dev server as usual
Run /studio in your AI agent (Claude Code, Cursor, etc.)
Edit styles visually in the panel that appears in your browser
The agent receives your changes and applies them to source code

Options

startStudio({
  port: 9877, // WebSocket port (default: 9877)
});

The port can also be set via the LIVE_STUDIO_PORT environment variable.

License

MIT