# Dang Hai Agentpulse Agentpulse Setup
> AgentPulse Setup
- Skill: `tomevault-io/dang-hai-agentpulse-agentpulse-setup` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/dang-hai-agentpulse-agentpulse-setup`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/dang-hai-agentpulse-agentpulse-setup/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/dang-hai-agentpulse-agentpulse-setup
---
# AgentPulse Setup
Set up AgentPulse to make your React app controllable by AI agents via MCP.
## Prerequisites
- Node.js project with React
- Know if it's a **web app** (Next.js, Vite, CRA) or **Electron app**
## Step 1: Install
```bash
npm install agentpulse
```
## Step 2: Add Provider
Find the app's root component and wrap it with `AgentPulseProvider`.
**Vite / CRA** (`App.tsx` or `main.tsx`):
```tsx
import { AgentPulseProvider } from 'agentpulse';
function App() {
return (
);
}
```
**Next.js App Router** (`app/layout.tsx`):
```tsx
'use client';
import { AgentPulseProvider } from 'agentpulse';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**Next.js Pages Router** (`pages/_app.tsx`):
```tsx
import { AgentPulseProvider } from 'agentpulse';
export default function App({ Component, pageProps }) {
return (
);
}
```
**Electron apps**: See `references/ELECTRON_SETUP.md`.
## Step 3: Add a Sample 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 setValue(e.target.value)} />;
}
```
## Step 4: Add npm Scripts
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\""
}
}
```
## Step 5: Configure MCP Client
**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).
## Step 6: Verify Setup
1. Start your app: `npm run dev`
2. Start AgentPulse: `npx agentpulse`
3. In MCP client, run: `discover()`
You should see your `test-input` component listed.
## 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.
## Next Steps
Setup is complete. To expose more components, use the **agentpulse** skill:
```
"Help me expose my login form to AgentPulse"
```
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/dang-hai) — claim your Tome and manage your conversions.