https://github.com/marimo-team/use-acp
React hooks for connecting to Agent Client Protocol (ACP) servers.
https://github.com/marimo-team/use-acp
acp agent-client-protocol mcp
Last synced: 5 months ago
JSON representation
React hooks for connecting to Agent Client Protocol (ACP) servers.
- Host: GitHub
- URL: https://github.com/marimo-team/use-acp
- Owner: marimo-team
- License: apache-2.0
- Created: 2025-09-08T15:43:14.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-15T21:51:32.000Z (9 months ago)
- Last Synced: 2025-10-05T03:58:19.233Z (8 months ago)
- Topics: acp, agent-client-protocol, mcp
- Language: TypeScript
- Homepage: https://marimo-team.github.io/use-acp/
- Size: 187 KB
- Stars: 9
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# use-acp
React hooks for [Agent Client Protocol](https://agentclientprotocol.com/) (ACP) over WebSockets.
## Features
- WebSocket connection management
- Reactive state management
- Notifications timeline for ACP events
- Permission request/response handling
- Full TypeScript support
## Installation
```bash
npm install use-acp
# or
pnpm add use-acp
```
## Usage
### Basic Usage
```tsx
import { useAcpClient } from 'use-acp';
function App() {
const {
connect,
disconnect,
connectionState,
notifications,
pendingPermission,
resolvePermission,
} = useAcpClient({
wsUrl: 'ws://localhost:8080',
autoConnect: true
});
return (
Status: {connectionState.status}
{connectionState.status === 'connected' ? 'Disconnect' : 'Connect'}
{pendingPermission && (
Permission Request
{pendingPermission.options.map((option) => (
resolvePermission(option)}>
{option.name}
))}
)}
Notifications: {notifications.length}
{notifications.map((notification) => (
- {JSON.stringify(notification)}
))}
);
}
```
## API Reference
### `useAcpClient({ wsUrl, autoConnect?, reconnectAttempts?, reconnectDelay? })`
**Returns:** `{ connect(), disconnect(), connectionState, notifications, clearNotifications(), pendingPermission, resolvePermission(), rejectPermission(), agent }`
### Utils
```tsx
import { groupNotifications, mergeToolCalls } from 'use-acp';
// Group notifications by their type
// This helps when displaying notifications in a timeline
const groupedNotifications = groupNotifications(notifications);
// Merge tool calls with the same toolCallId
const mergedToolCalls = mergeToolCalls(toolCalls);
```
## Development
```bash
pnpm install
pnpm test # run tests
pnpm build # build library
pnpm dev # run demo, http://localhost:5173
```
### Example Agents
```bash
# Gemini ACP
npx -y stdio-to-ws "npx @google/gemini-cli --experimental-acp"
# Claude Code ACP
npx -y stdio-to-ws "npx @zed-industries/claude-code-acp"
# Codex ACP
npx -y stdio-to-ws "npx @zed-industries/codex-acp"
```
## License
Apache 2.0