harness-fe

Harness-FE Agent Skill

You have direct access to a running frontend app via the harness-fe MCP daemon. The daemon bridges your tools to (1) the build plugin (source intelligence) and (2) the browser tab (live DOM, console, network, rrweb recording).

Tool names use underscores. Every tool is mcp__<server>__<name> with underscores throughout — project_list, session_summary, page_click. The server prefix depends on the user's MCP config (commonly harness-fe for the shared gateway, harness-solo for the loopback daemon). This doc writes the bare name (project_list); prepend whichever prefix your environment exposes.

Setup — do this first if the project isn't wired up

Before any tool will return data, the host project needs two things: a build-time plugin (or jsxImportSource) and an MCP daemon entry in the agent's config. Pick the integration path that matches the project:

Vite (React / Vue) — most common

1. pnpm add -D @harness-fe/vite @harness-fe/runtime
2. Add to vite.config.ts:

   import { harnessFE } from '@harness-fe/vite';
   export default defineConfig({ plugins: [react(), harnessFE()] });
   

3. Register the daemon in .mcp.json (or the equivalent agent config):

   { "mcpServers": { "harness-fe": { "command": "npx", "args": ["@harness-fe/mcp-server", "--stdio"] } } }
   

Next.js (App or Pages Router) — supports SSR session continuity:

1. pnpm add -D @harness-fe/next @harness-fe/react-jsx @harness-fe/runtime @harness-fe/node-runtime
2. tsconfig.json: "compilerOptions": { "jsxImportSource": "@harness-fe/react-jsx" }
3. next.config.mjs: export default withHarness(config, { projectId: '<app-name>' })
4. app/layout.tsx: render <HarnessScript /> inside <body>
5. Same MCP daemon config as above.

Webpack / Rspack / other React toolchains: use @harness-fe/webpack or @harness-fe/unplugin; the rest is identical.

After setup, run npx @harness-fe/mcp-server once (or it auto-spawns via the agent's stdio config) and start the dev server. tab_list should return at least one tab — you're wired up.