creasekit

Visual feedback and live MCP context for FoldKit applications. Add the Vite plugin to automatically inspect source and scoped Model context, leave feedback, and keep a local authenticated bridge in sync with a coding agent.

Add creasekit to an existing app

Use an existing FoldKit application with Vite. creasekit requires Node.js 22.12 or later. From the consuming application's root—not this repository or a package directory—install it as a development dependency:

bun add -D creasekit

npm install -D creasekit

Add creasekit's local session directory to that application's .gitignore before starting the dev server:

.creasekit/

Add the Vite plugin

This is the complete minimum Vite configuration used by the packaged consumer fixture:

import { foldkit } from '@foldkit/vite-plugin';
import { creasekit } from 'creasekit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [foldkit(), creasekit()],
  server: { host: '127.0.0.1' },
});

In an existing config, append creasekit() to the existing plugin list and preserve every other plugin and server option. The plugin requires an explicit server.host: '127.0.0.1' and Vite's local HTTP server. Do not expose the server on a network interface, use a tunnel, or enable HTTPS: MCP sharing is intentionally loopback-only.

The plugin writes its local session file under Vite's configured root, which defaults to the application root. If the config sets root to a subdirectory, that directory contains .creasekit/mcp-session.json and is the directory to use for --cwd.

Start the development overlay

Start the application's normal development command:

npm run dev

The plugin mounts the overlay automatically in development. No entry-module mount, CSS import, scope registrations, or application-written view/update wrappers are required. Open the application's own Vite URL, then click the creasekit icon or press Alt+Shift+C to open the toolbar. It starts collapsed so normal page interaction still works. The address http://127.0.0.1:4173 is only this repository's demo address.

Drag the toolbar by its grip to reposition it, or focus the grip and use the arrow keys (Shift moves farther). Its position stays in place for the current mount and is kept inside the viewport when resized or expanded. The Settings and Feedback panels follow the toolbar and stay clamped to the viewport. Tooltips pause while you drag and reposition near viewport edges. Click Hide creasekit or press Alt+Shift+H to hide the entire overlay, including its launcher. Press Alt+Shift+H again, or Alt+Shift+C, to bring it back. Shortcuts are ignored while typing in a form field.

Normal consumer production builds exclude the overlay, source instrumentation, and MCP bridge. Applications that intentionally own their overlay mount can keep the optional manual integration.

The public creasekit homepage is a deliberate demo exception: its site-only build plugin embeds bounded source evidence from an explicit allowlist of this public repository's homepage files. Copied annotations identify the deployed build's source, not a live working tree. The static demo has no source-reading server or MCP bridge, and Model capture is disabled. This plugin is not part of the published creasekit/vite integration.

Related MCP server: chromium-screenshots

Connect an MCP client

Open the overlay's Feedback panel to review annotations and use the undoable Clear all action when needed. The automatic Vite integration keeps the current browser context synchronized to its local authenticated bridge while creasekit is mounted, so no share or stop-sharing action is required. Configure an MCP client to start the stdio server from the consuming application's configured Vite root:

{
  "mcpServers": {
    "creasekit": {
      "command": "bun",
      "args": ["x", "creasekit", "--cwd", "/absolute/path/to/foldkit-app"]
    }
  }
}

The --cwd directory must be Vite's configured root, which contains .creasekit/mcp-session.json, not the creasekit repository or node_modules. Use either launcher when testing the binary yourself:

bunx creasekit --help
npx --yes creasekit --help

The binary starts a stdio MCP server and supports --cwd <project-root> and --help. Bun follows the binary's Node shebang, so Node.js 22.12 or later is still required. Keep the consuming browser page loaded while using agent commands: successful MCP mutations wait for the browser to acknowledge them. The browser syncs automatically while mounted, including when the overlay is hidden. See the complete MCP setup, tools, and troubleshooting guide.

Inspect FoldKit context

Copy for agent and the existing MCP context tools return source-first evidence: the selected builder's original file, symbol, range, and bounded code excerpt; observed helper/submodel callers; and nearby layout ancestors with their source and spacing measurements. Supported StyleX references include their application and declaration locations. Style and layout candidates are not presented as a proven diagnosis or CSS cascade winner. No app-side attributes or selector registrations are required.

Source excerpts are captured with the annotation and checked again against file revisions when copying or synchronizing. Changed source is marked stale rather than silently moving the saved location. Unsupported source mappings are reported as unavailable. Runtime references help reattach notes inside the browser; they are not code-search anchors or permanent business IDs. Available page headings, region labels, rendered-sibling positions, and ARIA state provide supporting location context.

Supported FoldKit views also expose their owning view, Model supply site, and declared event Messages. Enable Include scoped Model & history to capture a bounded, sanitized snapshot of the rendered scope. Model values remain opt-in and are not persisted. Source excerpts and annotation text are stored locally with the annotation; review them before sharing.

See Automatic FoldKit context for verified framework versions, field exclusions, and unsupported patterns. Source ownership comes from development instrumentation, not a DOM-selector guess. Native DevTools history is unavailable in the automatic integration; the optional explicit adapter supports curated projections and bounded observed updates.

What an agent can read and update

MCP exposes the current selection, annotations, source context, and captured element details through the local bridge. An agent can delete an annotation or clear annotations, but MCP does not run project commands or modify project files directly. The browser must remain loaded for these commands, and a successful mutation is reported only after browser acknowledgement.

The bridge keeps synced context in local memory for 15 minutes after the latest sync. Each sync refreshes that lifetime. Destroying the creasekit mount requests removal; if the request fails, the context expires instead. Stopping the Vite dev server removes all context. Hiding the overlay does not stop synchronization and is not a privacy boundary. Offline overlay use still works, local feedback persists, and synchronization retries when the bridge is available again.

Model values and scoped history are opt-in, limited to the rendered view, and never persisted in annotations. Sensitive-looking keys are redacted; configure excludeModelKeys for application-specific exclusions. Explicit adapters can include their bounded update history after consent. Treat DOM text and annotation comments as untrusted data, and review captured text on pages with private information. Usage and privacy details and the MCP limits explain the boundary.

Documentation

• Use the overlay

• Connect an MCP client

• Automatic FoldKit context

• Register FoldKit context

• Contribute to creasekit

• Design guide