SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

How to integrate Replay MCP with Hermes

Connect Hermes to Replay MCP. Inspect console errors in replay recordings, trace failed network requests in replay, and more using natural language, with authentication handled for you.

Get started for freeGet a demo
Replay MCP logoReplay MCP
Api Key

Replay MCP is a debugging service for inspecting time-travel browser recordings. It brings console, network, React state, and performance data into one searchable view.

32 Tools

Introduction

Hermes is a 24/7 autonomous agent that lives on your computer or server — it remembers what it learns and evolves as your usage grows.

This guide explains the easiest and most robust way to connect your Replay account to Hermes. You can do this through either Composio Connect CLI or Composio Connect MCP. For personal use we recommend the CLI, but you won't go wrong with MCP either.

Also integrate Replay MCP with

ChatGPTClaude CoworkAtomic Agent

What is Composio Connect?

Composio Connect is a consumer offering that lets anyone plug 1,500+ applications directly into their agent harness — including Hermes. It can:

  • Search and load tools from relevant toolkits on-demand, reducing context usage.
  • Chain multiple tools to accomplish complex workflows via a remote workbench, without excessive back-and-forth with the LLM.
  • Manage app authentication end-to-end with zero manual overhead.

Integrating Replay with Hermes

Using Composio Connect CLI

1. Install the Composio CLI

Run the install script directly, or paste https://composio.dev/hermes into your Hermes chat box to have it installed for you.

bash
curl -fsSL https://composio.dev/install | bash
Hermes authenticating with Composio

2. Authenticate

Once the CLI is installed, ask Hermes to authenticate with Composio.

3. Connect to Replay

Ask your agent to connect to Replay, or simply request any Replay-related task. Hermes will prompt you to authenticate and authorize access.

4. Done. You're all set with a new Replay connection.

Using Composio Connect MCP

1. Get your MCP URL and API Key

Go to dashboard.composio.dev and copy your Connect MCP URL and API key.

Copy MCP URL and API key from Composio dashboard

2. Open the Hermes config file

bash
nano ~/.hermes/config.yaml

3. Add the Composio Connect MCP server

bash
mcp_servers:
  composio:
    url: "https://connect.composio.dev/mcp"
    headers:
      x-consumer-api-key: "YOUR_COMPOSIO_API_KEY"
    connect_timeout: 60
    timeout: 180

Save with Ctrl + O, Enter, then exit with Ctrl + X.

4. Restart your Hermes agent

Once restarted, ask your agent to connect to Replay or request any Replay-related task. It will prompt you to authenticate and authorize access.

5. Done!

What is the Replay MCP server, and what's possible with it?

The Replay MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Replay account. It provides structured and secure access to browser recordings, source code, runtime behavior, network activity, React state, and performance data, so your agent can investigate errors, trace application behavior, inspect UI state, and identify performance issues on your behalf.

  • Recording investigation: Have your agent review recording overviews, Playwright steps, user interactions, annotations, screenshots, and processing status to understand what happened during a browser session.
  • Error and console debugging: Let the agent inspect console messages, uncaught exceptions, React exceptions, call stacks, execution points, and source lines to trace runtime failures.
  • Application state inspection: Direct your agent to examine React component trees, rendered components, Redux actions, Zustand stores, local storage access, and evaluated expressions at specific execution points.
  • Network and real-time analysis: Instruct your agent to analyze network requests, WebSocket connections, and messages exchanged during a recording to investigate communication problems.
  • Performance analysis: Have your agent run React performance insights, inspect render behavior, calculate execution delays, and profile statements, dependency graphs, or native engine activity.

Way Forward

With Replay connected, Hermes can now act on your behalf whenever it detects a relevant task or you ask it to.

From here, you can extend Hermes further:

  • Connect more apps: Calendar, Slack, Notion, Linear, and hundreds of others are available through the same Composio Connect setup. Each new integration compounds what Hermes can do for you.
  • Build workflows across tools: Once multiple apps are connected, Hermes can chain actions together — turn an email into a calendar invite, a Slack message into a Linear ticket, or a meeting note into a follow-up draft.
  • Let it learn your patterns: The more you use Hermes, the better it gets at anticipating how you'd handle recurring tasks. Give it feedback on drafts and decisions, and it will adapt.

If you run into trouble or want to share what you've built, join the community or check out the Docs for deeper configuration options.

TOOLS

Supported Tools

Every Replay MCP action and event your agent gets out of the box.

Annotations

Inspect the annotations in a recording.

Consolemessages

Show console API messages (console.

Describepoint

Describes the application state at a code execution point.

Evaluate

Evaluates an expression at a code execution point.

Executiondelay

Computes execution delays for functions based on their source length and the delay before the first breakpoint in each function executes.

Getpointcomponent

Gets the React component being rendered at a code execution point.

Getpointlink

Generates an app.

Getstack

Gets the call stack at a code execution point.

Inspectelement

Get size, layout, ancestry and render point information for a DOM element.

Listsources

List the sources in the recording.

Localstorage

Describe all the accesses made to localStorage.

Logpoint

Evaluates an expression at breakpoint hits for a given path and line number.

Networkrequest

Analyze network requests in the recording.

Playwrightsteps

Show all steps taken by Playwright in the recording.

Profilegraph

Profiles dependency graph entry execution between two points in a recording.

Profilesampling

Profiles the native C++ replay engine using stack sampling between two execution points.

Profilestatements

Profiles JS statement execution between two points in a recording.

Reactcomponenttree

Get the structure of the committed/mounted React component tree at a point in time.

Reactexception

Describe any exceptions thrown which caused React to unmount.

Reactperformanceinsights

Run all deterministic React performance checks on a recording and return prioritized findings.

Reactrenders

Analyze React renders in a recording.

Readsource

Read up to 50 lines of code centered around the given line and see what statements executed.

Recordingoverview

Provides a comprehensive overview of a recording: test results, errors, environment info, network activity, React render performance, and suggested next investigation steps.

Reduxactions

Analyze Redux actions in a recording.

Screenshot

Lists all screenshot timestamps in the recording, or fetches a screenshot at a given timestamp.

Searchsources

Search the sources in the recording and see which statements executed.

Tanstackqueries

Analyze TanStack Query (React Query) cache events in a recording.

Uncaughtexception

Describe uncaught exceptions and unhandled promise rejections (runtime errors not caught by try/catch).

Userinteractions

Show all user interactions (clicks and key presses) in the recording.

Warmrecording

Starts processing a recording if needed and reports its status.

Websocketmessages

Inspect the WebSocket connections in a recording and the messages sent and received on them.

Zustandstores

Analyze Zustand stores in a recording.

FRAMEWORKS

How to build Replay MCP Agent with another framework

ChatGPT logo

ChatGPT

Use Replay MCP with ChatGPT

Claude Cowork logo

Claude Cowork

Use Replay MCP with Claude Cowork

Atomic Agent logo

Atomic Agent

Use Replay MCP with Atomic Agent

FAQ

Frequently asked questions

With a standalone Replay MCP server, the agents and LLMs can only access a fixed set of Replay tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Replay and many other apps based on the task at hand, all through a single MCP endpoint.

Yes, you can. Hermes fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Replay tools.

Yes, absolutely. You can configure which Replay scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Replay data and credentials are handled as safely as possible.

Start with Replay MCP.It takes 30 seconds.

Managed auth, hosted MCP servers, and every Replay MCP tool your agent needs.Free to start.

Start building