# How to connect Replay MCP to Claude ```json { "title": "How to connect Replay MCP to Claude", "toolkit": "Replay MCP", "toolkit_slug": "replay_mcp", "framework": "Claude Cowork", "framework_slug": "claude-cowork", "url": "https://composio.dev/toolkits/replay_mcp/framework/claude-cowork", "markdown_url": "https://composio.dev/toolkits/replay_mcp/framework/claude-cowork.md", "updated_at": "2026-10-22T05:32:40.997Z" } ``` ## Introduction Claude is Anthropic's AI assistant, available on the web, in the desktop app, and on mobile. Cowork is its agent for knowledge work, and it runs on all of those surfaces too. Connected to your apps, Claude can work with your files and services to accomplish complex tasks on your behalf. This guide walks you through the easiest and most secure way to connect your Replay account to Claude via Composio Connect, enabling it to inspect console errors in Replay recordings, trace failed network requests in Replay, review React state at execution points, and more such actions on your behalf without compromising your account security. Setup is the same on Claude Web, Desktop, and Cowork, and you only need to do it once. The connector is tied to your account, so it's available in all three. ## Also integrate Replay MCP with - [ChatGPT](https://composio.dev/toolkits/replay_mcp/framework/chatgpt) - [Hermes](https://composio.dev/toolkits/replay_mcp/framework/hermes-agent) - [Atomic Agent](https://composio.dev/toolkits/replay_mcp/framework/atomic-agent) ## Connect Replay MCP to Claude Cowork ### Connecting Replay to Claude Web, Desktop, and Cowork Two ways to add the Composio connector. Pick whichever you prefer. ### 1. Add with one click Click the button. Claude opens with the Composio connector filled in. Click Add, then go to step 2. [Add to Claude](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Composio&connectorUrl=https%3A%2F%2Fconnect.composio.dev%2Fmcp) ### Add manually In Claude Desktop, click Customize in the left sidebar, then select Connectors and click the + icon at the top. Click Add custom connector and paste in the Composio MCP server URL: ```bash https://connect.composio.dev/mcp ``` ## 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 ### 1. Why does Claude not use the Composio connector for Replay? The connector can show as connected, but Claude must use it in each Replay conversation. - Click + at the lower left of the chat, or type /. - Hover Connectors. - Turn on Composio. - Ask Claude to connect to Replay again. ### 2. Why does Claude show an MCP server error before Replay connects? Claude can show Couldn't reach the MCP server or Authorization with the MCP server failed when you add the connector for Replay. - Check that the connector URL is https://connect.composio.dev/mcp. - Connectors run from Anthropic's cloud, so your device network is usually not the problem. - Add the connector again from Customize > Connectors, then ask Claude to connect Replay. - If it fails again, send the error and the ofid_ reference id to support@composio.dev. ### 3. Why does the Replay authorization link not work? The Composio connector is one server. Your Replay account connects separately when Claude asks for it. - If the browser does not open, or the link expires, ask Claude to retry the Replay connection. - Composio creates a fresh Replay authorization link. - Open that link in your browser and finish the Replay sign-in. ### 4. Why do Replay actions fail after they worked before? The Replay connection can expire or lose permission. - Ask Claude to inspect the Replay connection. - If the connection is unhealthy, disconnect it when Claude prompts you. - Reconnect the Replay account and retry the action. - If Claude shows a permission prompt, approve it before Claude changes data in Replay. - If the action still fails with a permission error, check that the connected account has that permission in Replay itself. ### 5. How do I switch to a different Replay account? Claude can manage the Replay connection for you. - Ask Claude to disconnect or delete the current Replay account. - Ask Claude to connect Replay again. - Open the new Composio authorization link for Replay. - Sign in with the other Replay account in the browser. - After the account connects, ask Claude to retry the Replay task. ### 6. Why is my Replay connection missing in Claude Desktop or on a Team plan? The connector belongs to your Claude account, so your Replay connection works in Claude Web, Desktop, and Cowork. - In Claude Desktop, open Customize > Connectors. - Next to Composio, click ⋮ and click Clear cache. - If Replay tools still do not appear, click ⋮, disconnect, remove the connector, and add it again. - On Team or Enterprise, an Owner or Primary Owner must enable the connector before you can connect Replay. ## Creating MCP Server - Stand-alone vs Composio SDK The Replay MCP server connects Claude Web, Desktop, and Cowork to your Replay account through Composio. Once connected, Claude can use the available Replay tools and triggers to complete tasks on your behalf. ## Complete Code None listed. ## How to build Replay MCP Agent with another framework - [ChatGPT](https://composio.dev/toolkits/replay_mcp/framework/chatgpt) - [Hermes](https://composio.dev/toolkits/replay_mcp/framework/hermes-agent) - [Atomic Agent](https://composio.dev/toolkits/replay_mcp/framework/atomic-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 Claude Cowork? Yes, you can. Claude Cowork 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)