agentpulse-setup

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

AgentPulse Setup

AgentPulse 设置

Set up AgentPulse to make your React app controllable by AI agents via MCP.

设置AgentPulse，让你的React应用可通过MCP被AI Agent控制。

Prerequisites

前提条件

Node.js project with React
Know if it's a web app (Next.js, Vite, CRA) or Electron app

基于React的Node.js项目
明确项目是Web应用（Next.js、Vite、CRA）还是Electron应用

Step 1: Install

步骤1：安装

bash

npm install agentpulse

bash

npm install agentpulse

Step 2: Add Provider

步骤2：添加Provider

Find the app's root component and wrap it with

AgentPulseProvider

Vite / CRA (

App.tsx

main.tsx

tsx

import { AgentPulseProvider } from 'agentpulse';

function App() {
  return (
    <AgentPulseProvider endpoint="ws://localhost:3100/ws">
      <YourApp />
    </AgentPulseProvider>
  );
}

Next.js App Router (

app/layout.tsx

tsx

'use client';
import { AgentPulseProvider } from 'agentpulse';

export default function RootLayout({ children }) {
  return (
    <html><body>
      <AgentPulseProvider endpoint="ws://localhost:3100/ws">
        {children}
      </AgentPulseProvider>
    </body></html>
  );
}

Next.js Pages Router (

pages/_app.tsx

tsx

import { AgentPulseProvider } from 'agentpulse';

export default function App({ Component, pageProps }) {
  return (
    <AgentPulseProvider endpoint="ws://localhost:3100/ws">
      <Component {...pageProps} />
    </AgentPulseProvider>
  );
}

Electron apps: See

references/ELECTRON_SETUP.md

找到应用的根组件，用

AgentPulseProvider

包裹它。

Vite / CRA (

App.tsx

或

main.tsx

tsx

import { AgentPulseProvider } from 'agentpulse';

function App() {
  return (
    <AgentPulseProvider endpoint="ws://localhost:3100/ws">
      <YourApp />
    </AgentPulseProvider>
  );
}

Next.js App Router (

app/layout.tsx

tsx

'use client';
import { AgentPulseProvider } from 'agentpulse';

export default function RootLayout({ children }) {
  return (
    <html><body>
      <AgentPulseProvider endpoint="ws://localhost:3100/ws">
        {children}
      </AgentPulseProvider>
    </body></html>
  );
}

Next.js Pages Router (

pages/_app.tsx

tsx

import { AgentPulseProvider } from 'agentpulse';

export default function App({ Component, pageProps }) {
  return (
    <AgentPulseProvider endpoint="ws://localhost:3100/ws">
      <Component {...pageProps} />
    </AgentPulseProvider>
  );
}

Electron应用：请参考

references/ELECTRON_SETUP.md

。

Step 3: Add a Sample useExpose

步骤3：添加示例useExpose钩子

Add one

useExpose

call to verify setup works. Find an interactive component:

tsx

import { useExpose } from 'agentpulse';

function SomeInput() {
  const [value, setValue] = useState('');

  useExpose('test-input', { value, setValue }, {
    description: 'Test input for verifying AgentPulse setup.',
  });

  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

添加一个

useExpose

调用以验证设置是否生效。找到一个交互式组件：

tsx

import { useExpose } from 'agentpulse';

function SomeInput() {
  const [value, setValue] = useState('');

  useExpose('test-input', { value, setValue }, {
    description: 'Test input for verifying AgentPulse setup.',
  });

  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Step 4: Add npm Scripts

步骤4：添加npm脚本

Add to

package.json

json

{
  "scripts": {
    "agentpulse": "agentpulse"
  }
}

Optional: run app and server together (requires

concurrently

json

{
  "scripts": {
    "dev:agent": "concurrently \"npm run dev\" \"npm run agentpulse\""
  }
}

添加到

package.json

中：

json

{
  "scripts": {
    "agentpulse": "agentpulse"
  }
}

可选：同时运行应用和服务端（需要

concurrently

）：

json

{
  "scripts": {
    "dev:agent": "concurrently \"npm run dev\" \"npm run agentpulse\""
  }
}

Step 5: Configure MCP Client

步骤5：配置MCP客户端

Claude Desktop

macOS:

~/Library/Application Support/Claude/claude_desktop_config.json

Windows:

%APPDATA%\Claude\claude_desktop_config.json

json

{
  "mcpServers": {
    "agentpulse": {
      "url": "http://localhost:3100/mcp"
    }
  }
}

Restart Claude Desktop after editing.

Claude Code

Add to MCP settings (same JSON format as above).

Claude Desktop

macOS：

~/Library/Application Support/Claude/claude_desktop_config.json

Windows：

%APPDATA%\Claude\claude_desktop_config.json

json

{
  "mcpServers": {
    "agentpulse": {
      "url": "http://localhost:3100/mcp"
    }
  }
}

编辑后重启Claude Desktop。

Claude Code

添加到MCP设置中（格式与上述JSON相同）。

Step 6: Verify Setup

步骤6：验证设置

Start your app:
```
npm run dev
```
Start AgentPulse:
```
npx agentpulse
```
In MCP client, run:
```
discover()
```

You should see your

test-input

component listed.

启动应用：
```
npm run dev
```
启动AgentPulse：
```
npx agentpulse
```
在MCP客户端中运行：
```
discover()
```

你应该会看到

test-input

组件被列出。

Troubleshooting

故障排查

Issue	Solution
"WebSocket connection failed"	Is `npx agentpulse` running?
Components not in `discover()`	Is `AgentPulseProvider` at root? Refresh browser.
MCP tools not available	Check config file path, restart MCP client

See

references/TROUBLESHOOTING.md

for more.

问题	解决方案
WebSocket连接失败	是否运行了 `npx agentpulse` ？
组件未出现在 `discover()` 结果中	`AgentPulseProvider` 是否在根节点？刷新浏览器。
MCP工具不可用	检查配置文件路径，重启MCP客户端

更多内容请参考

references/TROUBLESHOOTING.md

。

Next Steps

下一步

Setup is complete. To expose more components, use the agentpulse skill:

"Help me expose my login form to AgentPulse"

设置已完成。如需暴露更多组件，请使用agentpulse技能：

"帮我将登录表单暴露给AgentPulse"