# How to integrate Replay MCP with Atomic Agent

```json
{
  "title": "How to integrate Replay MCP with Atomic Agent",
  "toolkit": "Replay MCP",
  "toolkit_slug": "replay_mcp",
  "framework": "Atomic Agent",
  "framework_slug": "atomic-agent",
  "url": "https://composio.dev/toolkits/replay_mcp/framework/atomic-agent",
  "markdown_url": "https://composio.dev/toolkits/replay_mcp/framework/atomic-agent.md",
  "updated_at": "2026-10-22T05:32:40.997Z"
}
```

## Introduction

Atomic Agent is an open-source AI agent that runs on your machine and supports local models through llama.cpp. Connect it to 1,500+ apps through Composio, including Replay.
This guide uses Atomic Agent's built-in Composio integration. You need Atomic Agent v0.5.6 or later, your own Composio API key, and a Replay account. See the [Atomic Agent documentation](https://atomicagent.io/docs/?cta_placement=atomic-agent-docs) for installation instructions.

## Also integrate Replay MCP with

- [ChatGPT](https://composio.dev/toolkits/replay_mcp/framework/chatgpt)
- [Claude Cowork](https://composio.dev/toolkits/replay_mcp/framework/claude-cowork)
- [Hermes](https://composio.dev/toolkits/replay_mcp/framework/hermes-agent)

## TL;DR

### How Atomic Agent connects to Replay
Atomic Agent connects to Composio's Tool Router over Streamable HTTP MCP. It discovers the tools needed for your request, and Composio handles account authentication.
Execution and account-connection tools follow Atomic Agent's configured approval policy. Review any approval prompt before allowing an action on your connected account.

## Connect Replay MCP to Atomic Agent

### Connect Replay to Atomic Agent
- Sign up or sign in to the [Composio dashboard](https://dashboard.composio.dev/?cta_placement=atomic-agent-api-key). Copy your API key.
- In Atomic Agent, open the Integrations tab and select Composio. Select API key, press e, paste the key, and press Enter. The tools become available immediately, without a restart.
- Ask Atomic Agent to do something in Replay. It searches Composio for the right tool.
- On first use, open the sign-in link returned in the chat. Connect your Replay account, then return to Atomic Agent to continue.
### Headless setup
Add the following line to ~/.atomic-agent/.env, replacing YOUR_COMPOSIO_API_KEY with your key. Start Atomic Agent after saving the file.

```bash
COMPOSIO_API_KEY=YOUR_COMPOSIO_API_KEY
```

## 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.

## Supported Tools

| Tool slug | Name | Description |
|---|---|---|
| `REPLAY_MCP_ANNOTATIONS` | Annotations | Inspect the annotations in a recording. Annotations are timestamped records attached by the runtime and integrations (e.g. Cypress, Playwright, React DevTools, network, localStorage). Call with no arguments to list all annotation kinds in the recording with their counts. Pass a 'kind' to return the annotation data for that kind (paginated, optionally filtered by text). For WebSocket traffic (DOMWebSocket annotations), use the WebSocketMessages tool instead. |
| `REPLAY_MCP_CONSOLE_MESSAGES` | Consolemessages | Show console API messages (console.log, console.warn, console.error, etc.). Note: console errors are distinct from runtime exceptions — use UncaughtException and ReactException for those. Start with mode 'summary' for an overview with message counts and the last errors/warnings. Use 'messages' to browse the full paginated list (filter by level, text, node_modules visibility). Use 'message-detail' with a point reference for full detail on a single message including stack trace. Call RecordingOverview first for broader context. |
| `REPLAY_MCP_DESCRIBE_POINT` | Describepoint | Describes the application state at a code execution point. Shows the containing function with executed/not-executed annotations, variable values, and timestamps. Use dependencyChain=true to trace the full causal chain back to the origin event. Get execution points from other tools (ConsoleMessages, ReactRenders, ReduxActions, Logpoint, etc.). |
| `REPLAY_MCP_EVALUATE` | Evaluate | Evaluates an expression at a code execution point. Use for ad-hoc value inspection beyond what DescribePoint shows. Expressions must be synchronous and immediately inspectable. Do not use async functions or promises; replay cannot inspect their eventual results. Defaults to frame scope; use global scope explicitly when needed. String results are returned in full up to maxStringLength characters (default 100000); longer strings end with a truncation notice giving the stringOffset to read the next part. String results longer than about 8,000 characters are read by evaluating the expression a second time, so use a single, side-effect-free expression to get the full text. |
| `REPLAY_MCP_EXECUTION_DELAY` | Executiondelay | Computes execution delays for functions based on their source length and the delay before the first breakpoint in each function executes. Each breakpoint is attributed to the innermost function covering it, and each function's weight is computed as its source length minus the sum of its children's lengths. |
| `REPLAY_MCP_GET_POINT_COMPONENT` | Getpointcomponent | Gets the React component being rendered at a code execution point. |
| `REPLAY_MCP_GET_POINT_LINK` | Getpointlink | Generates an app.replay.io link for users to inspect a given execution point. |
| `REPLAY_MCP_GET_STACK` | Getstack | Gets the call stack at a code execution point. Use to understand execution context. Pair with DescribePoint for full state. |
| `REPLAY_MCP_INSPECT_ELEMENT` | Inspectelement | Get size, layout, ancestry and render point information for a DOM element. Find relevant code before inspecting elements. Only use this tool sparingly — expensive, requires full DOM layout computation. Prefer ReactComponentTree for component structure. |
| `REPLAY_MCP_LIST_SOURCES` | Listsources | List the sources in the recording. |
| `REPLAY_MCP_LOCAL_STORAGE` | Localstorage | Describe all the accesses made to localStorage. Start with mode 'summary' (default) for a grouped overview: keys with access counts, final values, and timing. Use 'operations' to browse the full chronological access list with pagination. Use keyFilter to narrow by key name (substring match). For large apps, consider filtering by key pattern in results. |
| `REPLAY_MCP_LOGPOINT` | Logpoint | Evaluates an expression at breakpoint hits for a given path and line number. Returns up to 20 hits with their expression evaluation results. Use beginPoint/endPoint to narrow the range. Use column to target a specific statement on the line. Find source paths with ListSources or SearchSources first. |
| `REPLAY_MCP_NETWORK_REQUEST` | Networkrequest | Analyze network requests in the recording. Start with mode 'summary' (default) for high-level stats: total count, failed/slow counts, status code distribution, and top domains. Use 'requests' to browse a paginated table of all requests (filterable by urlFilter, startTime, endTime). Use 'detail' with requestId (from the ID column in the 'requests' table) for full request/response headers, body content, event timeline, and backend function analysis. RECOMMENDED workflow: summary → requests → detail. Call RecordingOverview first for broader context about the recording. |
| `REPLAY_MCP_PLAYWRIGHT_STEPS` | Playwrightsteps | Show all steps taken by Playwright in the recording. Start with mode 'summary' for a test overview with pass/fail status and duration. Use 'steps' with testIndex to see the step list for a specific test (get indices from 'summary'). Use 'step-detail' with stepNumber for inspector protocol commands of a single step (get step numbers from 'steps'). Use 'test-source' with testIndex to read the test source code. For failed tests, use failedOnly=true in 'steps' mode to focus on failures. Call RecordingOverview first for broader context. |
| `REPLAY_MCP_PROFILE_GRAPH` | Profilegraph | Profiles dependency graph entry execution between two points in a recording. Enumerates all dependency graph entries including React fiber renders and effect calls, computes the execution associated with each by progress counter differences, traces each entry back to its source via the dependency chain, and groups results by source ordered by execution amount. |
| `REPLAY_MCP_PROFILE_SAMPLING` | Profilesampling | Profiles the native C++ replay engine using stack sampling between two execution points. Runs the replay engine from the begin point to the end point while collecting periodic stack samples, then analyzes the samples to produce a flat profile of where time is spent in native code. |
| `REPLAY_MCP_PROFILE_STATEMENTS` | Profilestatements | Profiles JS statement execution between two points in a recording. Fetches all breakpoint hits between the points, breaks them down by function, resolves function names, and computes a flat profile and call tree showing statement hits per function and its callees. |
| `REPLAY_MCP_REACT_COMPONENT_TREE` | Reactcomponenttree | Get the structure of the committed/mounted React component tree at a point in time. Start with mode='summary' for an overview of component counts and top-level structure. Use mode='tree' to see a paginated, depth-limited hierarchy with collapse markers. Use mode='subtree' with 'component' to focus on a specific component's ancestors and descendants. Use 'nameFilter' to search for components by name. Use 'hideFilter' to remove noise (e.g. Provider, Consumer). For render-level analysis (timing, waste, causes), use ReactRenders instead. |
| `REPLAY_MCP_REACT_EXCEPTION` | Reactexception | Describe any exceptions thrown which caused React to unmount. This finds React error boundary crashes and render-phase exceptions. For non-React uncaught exceptions, use UncaughtException instead. RecordingOverview includes an error summary — call that first for context. |
| `REPLAY_MCP_REACT_PERFORMANCE_INSIGHTS` | Reactperformanceinsights | Run all deterministic React performance checks on a recording and return prioritized findings. Each finding includes user-visible impact, specific timing, affected components, and suggested actions. Use this for a comprehensive performance audit — it detects heavy commits (>50ms), render loops, expensive state updates, and more. Call RecordingOverview first for broader context. |
| `REPLAY_MCP_REACT_RENDERS` | Reactrenders | Analyze React renders in a recording. Start with mode 'summary' for a recording-wide overview of commits and render time. Use 'waste-rank' to find components with the most wasted renders. Use 'commits' to browse render commits chronologically. Use 'commit' with commitIndex for single commit detail (get indices from 'commits'). Use 'component' with componentName to see a component across all commits (get names from 'waste-rank'). Use 'fiber' with fiberId to see all renders for a specific fiber instance (add includeProps=true for prop values at each render). Use 'trigger-detail' with commitIndex to trace the dependency chain (click, network, dispatch) that triggered a commit. Use 'commit-fibers' and 'fiber-cause' for fiber-level causation analysis. Call RecordingOverview first for broader context. |
| `REPLAY_MCP_READ_SOURCE` | Readsource | Read up to 50 lines of code centered around the given line and see what statements executed. |
| `REPLAY_MCP_RECORDING_OVERVIEW` | Recordingoverview | Provides a comprehensive overview of a recording: test results, errors, environment info, network activity, React render performance, and suggested next investigation steps. Call this first to understand what happened in a recording before diving into specific tools. NOTE: The first call on a cold recording may take 3-4 minutes while initial data is computed. Set a longer timeout for this tool. Subsequent calls will be fast. |
| `REPLAY_MCP_REDUX_ACTIONS` | Reduxactions | Analyze Redux actions in a recording. Currently covers Redux/RTK dispatches via source-level instrumentation. Start with mode 'summary' to see action type frequency and correlation stats. Use 'actions' to browse dispatches chronologically (filterable by actionType substring). Use 'action-detail' with actionIndex for full correlation data: timing breakdown, selector stats, component render timings, and dispatch origin location. Use 'impact' with actionIndex for a render impact report with optimization recommendations. Use 'state-shape' to see a lightweight key/type listing of the state tree (~200–400 tokens). RECOMMENDED: use state-shape FIRST to understand the state structure, then drill in. Use 'action-state' with actionIndex to see actual state values at a dispatch point. STRONGLY RECOMMENDED: use the 'path' param (e.g. path='auth.user') to drill into specific subtrees instead of dumping the entire state tree. Call RecordingOverview first for broader context about the recording. |
| `REPLAY_MCP_SCREENSHOT` | Screenshot | Lists all screenshot timestamps in the recording, or fetches a screenshot at a given timestamp. Call without timestamp to list all available timestamps. Call with timestamp to get a screenshot URL with mouse position, movements, and time since last click. Set base64=true for raw image data. RecordingOverview suggests a key screenshot timestamp — call that first. |
| `REPLAY_MCP_SEARCH_SOURCES` | Searchsources | Search the sources in the recording and see which statements executed. Note: Playwright test runner code runs in Node outside the browser recording and won't appear here. Use PlaywrightSteps(mode: test-source) for Playwright test source. |
| `REPLAY_MCP_TAN_STACK_QUERIES` | Tanstackqueries | Analyze TanStack Query (React Query) cache events in a recording. Start with mode 'summary' for an overview of all queries with lifecycle stats. Use 'query-events' with queryHash to see the event timeline for a specific query. Use 'query-timeline' for a chronological view across ALL queries. Use 'query-state' with queryHash + eventIndex to inspect cached data at a specific event point. Observer-internal events are filtered by default; use eventType filter to include them. Call RecordingOverview first for broader context about the recording. |
| `REPLAY_MCP_UNCAUGHT_EXCEPTION` | Uncaughtexception | Describe uncaught exceptions and unhandled promise rejections (runtime errors not caught by try/catch). Reports up to 5 distinct errors in time order. Each entry gives the throw site and the first non-library caller, or just the error text when the recording has no matching throw (e.g. script syntax errors). For React-specific exceptions that unmounted the app, use ReactException instead. RecordingOverview includes an error summary — call that first for context. |
| `REPLAY_MCP_USER_INTERACTIONS` | Userinteractions | Show all user interactions (clicks and key presses) in the recording. Start with mode 'summary' (default) for interaction counts by type, time range, top keys pressed, and activity timeline. Use 'interactions' to browse a paginated chronological list with point references for DescribePoint, Evaluate, or GetStack. Use type filter ('click' or 'keypress') to narrow by interaction kind. Useful for understanding the sequence of user actions that led to a bug. |
| `REPLAY_MCP_WARM_RECORDING` | Warmrecording | Starts processing a recording if needed and reports its status. Call this before other tools on a recording that may not be loaded yet. Returns state 'ready' when other tools will respond quickly, 'processing' with phase, progress counts, and an estimated time remaining (eta, may be null) while it is still loading, or 'crashed'/'failed' with an error when the recording cannot be analyzed. Safe to call repeatedly; call again while the state is 'processing'. msSinceLastProgress only indicates a stall in the 'starting' and 'scanning' phases; in 'analyzing' there are no progress updates while the instrument engine runs, so treat eta.exceeded as the sign that something is wrong. The eta is recomputed on every call and can go up, for example when the instrument engine starts; reset any deadline when phase or instrumentEngine.state changes. A crashed or failed server is shut down after a few minutes, and the next call starts a fresh one with a new startedAt; retry at most once since crashes often repeat. When a server replaced an earlier one for the same recording, previousRun says how the earlier one ended; previousRun.unexpected means it died without reporting a crash. That can be the recording (for example running out of memory) or the infrastructure (for example a node reclaimed without warning), so keep waiting on the new server and treat it as a crash only if the next server for the recording also ends unexpectedly. |
| `REPLAY_MCP_WEB_SOCKET_MESSAGES` | Websocketmessages | Inspect the WebSocket connections in a recording and the messages sent and received on them. Default mode 'connections' lists each connection with its URL, status (open, open until the recording ended, still connecting, never connected, failed to connect, dropped, closed by client, closed) and message counts. Mode 'connection' lists the messages on a connection (paginated, filterable by direction and text); sent messages include a point reference for the send() call. Mode 'message' shows the contents of one message by messageId. JSON messages too large to show whole are shown as an outline of keys, types and sizes; pass path (e.g. 'result.items.3') to see one part. Unknown connectionId or messageId values are rejected with the list of valid IDs. |
| `REPLAY_MCP_ZUSTAND_STORES` | Zustandstores | Analyze Zustand stores in a recording. Start with mode 'summary' to see all stores and their setState call counts. Use 'store-events' with a storeId to browse setState calls chronologically. Use 'store-state' with storeId and eventIndex to inspect the state at a specific setState call (shows the updater identity, incoming changes, merged result, and previous state). Call RecordingOverview first for broader context about the recording. |

## Supported Triggers

None listed.

## Troubleshooting

### Why is my API key rejected?

Copy the key directly from the Composio dashboard. Atomic Agent requires ASCII characters because it sends the key in an HTTP header. Remove any extra characters introduced when copying.

### Why are Composio tools unavailable after saving a key?

Check that you use Atomic Agent v0.5.6 or later and that Composio is enabled in your configuration. A "composio": { "enabled": false } setting disables the integration while keeping the saved key on disk.

### Does Composio have a free plan?

The Hobby plan includes 100,000 tool calls per month. Composio-managed OAuth apps have a lower included allowance. See [Composio pricing](/pricing) for the current limits that apply to your connection.

## Complete Code

None listed.

## Conclusion

### Use Replay from Atomic Agent
With your account connected, ask Atomic Agent to work with Replay in natural language. You can connect more apps through the same Composio integration as you need them.
Visit the [Atomic Agent website](https://atomicagent.io/?cta_placement=atomic-agent-site) or inspect the [Atomic Agent source code](https://github.com/AtomicBot-ai/atomic-agent?cta_placement=atomic-agent-repo).

## How to build Replay MCP Agent with another framework

- [ChatGPT](https://composio.dev/toolkits/replay_mcp/framework/chatgpt)
- [Claude Cowork](https://composio.dev/toolkits/replay_mcp/framework/claude-cowork)
- [Hermes](https://composio.dev/toolkits/replay_mcp/framework/hermes-agent)

## Related Toolkits

- [Supabase](https://composio.dev/toolkits/supabase) - Supabase is an open-source backend platform offering scalable Postgres databases, authentication, storage, and real-time APIs. It lets developers build modern apps without managing infrastructure.
- [Codeinterpreter](https://composio.dev/toolkits/codeinterpreter) - Codeinterpreter is a Python-based coding environment with built-in data analysis and visualization. It lets you instantly run scripts, plot results, and prototype solutions inside supported platforms.
- [GitHub](https://composio.dev/toolkits/github) - GitHub is a code hosting platform for version control and collaborative software development. It streamlines project management, code review, and team workflows in one place.
- [1password](https://composio.dev/toolkits/_1password) - 1Password is a password manager and digital vault for storing logins, secrets, notes, and secure documents. It helps individuals and teams protect credentials, share access safely, and reduce password risk.
- [Ably](https://composio.dev/toolkits/ably) - Ably is a real-time messaging platform for live chat and data sync in modern apps. It offers global scale and rock-solid reliability for seamless, instant experiences.
- [Abuselpdb](https://composio.dev/toolkits/abuselpdb) - Abuselpdb is a central database for reporting and checking IPs linked to malicious online activity. Use it to quickly identify and report suspicious or abusive IP addresses.
- [Alchemy](https://composio.dev/toolkits/alchemy) - Alchemy is a blockchain development platform offering APIs and tools for Ethereum apps. It simplifies building and scaling Web3 projects with robust infrastructure.
- [Algolia](https://composio.dev/toolkits/algolia) - Algolia is a hosted search API that powers lightning-fast, relevant search experiences for web and mobile apps. It helps developers deliver instant, typo-tolerant, and scalable search without complex infrastructure.
- [Anakin](https://composio.dev/toolkits/anakin_io) - Anakin is a web automation platform offering scraping, crawling, search, and browser automation. Use it to extract structured data, automate site tasks, and monitor web changes reliably.
- [Anchor browser](https://composio.dev/toolkits/anchor_browser) - Anchor browser is a developer platform for AI-powered web automation. It transforms complex browser actions into easy API endpoints for streamlined web interaction.
- [Apiflash](https://composio.dev/toolkits/apiflash) - Apiflash is a website screenshot API for programmatically capturing web pages. It delivers high-quality screenshots on demand for automation, monitoring, or reporting.
- [Apiverve](https://composio.dev/toolkits/apiverve) - Apiverve delivers a suite of powerful APIs that simplify integration for developers. It's designed for reliability and scalability so you can build faster, smarter applications without the integration headache.
- [Appcircle](https://composio.dev/toolkits/appcircle) - Appcircle is an enterprise-grade mobile CI/CD platform for building, testing, and publishing mobile apps. It streamlines mobile DevOps so teams ship faster and with more confidence.
- [Appdrag](https://composio.dev/toolkits/appdrag) - Appdrag is a cloud platform for building websites, APIs, and databases with drag-and-drop tools and code editing. It accelerates development and iteration by combining hosting, database management, and low-code features in one place.
- [Appveyor](https://composio.dev/toolkits/appveyor) - AppVeyor is a cloud-based continuous integration service for building, testing, and deploying applications. It helps developers automate and streamline their software delivery pipelines.
- [Authyo](https://composio.dev/toolkits/authyo) - Authyo is a REST API service for passwordless authentication, OTP verification, session management, and transactional notifications. Use it to add secure login flows and user verification without building auth infrastructure from scratch.
- [AWS Marketplace MCP](https://composio.dev/toolkits/aws_marketplace_mcp) - AWS Marketplace MCP provides MCP access to AWS Marketplace's cloud software, data, and services catalog. Use it to discover, compare, and evaluate 30K+ AWS Marketplace listings faster.
- [Azure Monitor Activity Log](https://composio.dev/toolkits/azure_monitor_activity_log) - Azure Monitor Activity Log is Azure's service that records management and control-plane events for a subscription. Use it to audit changes, troubleshoot issues, and track resource operations across your Azure resources.
- [Backendless](https://composio.dev/toolkits/backendless) - Backendless is a backend-as-a-service platform for mobile and web apps, offering database, file storage, user authentication, and APIs. It helps developers ship scalable applications faster without managing server infrastructure.
- [Baserow](https://composio.dev/toolkits/baserow) - Baserow is an open-source no-code database platform for building collaborative data apps. It makes it easy for teams to organize data and automate workflows without writing code.

## Frequently Asked Questions

### What are the differences in Tool Router MCP and Replay MCP?

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.

### Can I use Tool Router MCP with Atomic Agent?

Yes, you can. Atomic Agent 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.

### Can I manage the permissions and scopes for Replay while using Tool Router?

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.

### How safe is my data with Composio Tool Router?

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.

---
[See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)