# How to connect Browser tool MCP with VS Code ```json { "title": "How to connect Browser tool MCP with VS Code", "toolkit": "Browser tool", "toolkit_slug": "browser_tool", "framework": "VS Code", "framework_slug": "vscode", "url": "https://composio.dev/toolkits/browser_tool/framework/vscode", "markdown_url": "https://composio.dev/toolkits/browser_tool/framework/vscode.md", "updated_at": "2026-05-06T08:04:09.262Z" } ``` ## Introduction ### How to connect Browser tool MCP with VS Code VS Code is the most popular code editor out there. With its recent AI makeover, it can do more than just help you write code. You can connect your applications to it and let LLMs automate many of the mundane tasks in your workflow. In this guide, I will explain how to connect Browser tool with VS Code in the most secure and robust way possible via Composio. ## Also integrate Browser tool with - [ChatGPT](https://composio.dev/toolkits/browser_tool/framework/chatgpt) - [OpenAI Agents SDK](https://composio.dev/toolkits/browser_tool/framework/open-ai-agents-sdk) - [Claude Agent SDK](https://composio.dev/toolkits/browser_tool/framework/claude-agents-sdk) - [Claude Code](https://composio.dev/toolkits/browser_tool/framework/claude-code) - [Claude Cowork](https://composio.dev/toolkits/browser_tool/framework/claude-cowork) - [Codex](https://composio.dev/toolkits/browser_tool/framework/codex) - [Cursor](https://composio.dev/toolkits/browser_tool/framework/cursor) - [OpenCode](https://composio.dev/toolkits/browser_tool/framework/opencode) - [OpenClaw](https://composio.dev/toolkits/browser_tool/framework/openclaw) - [Hermes](https://composio.dev/toolkits/browser_tool/framework/hermes-agent) - [CLI](https://composio.dev/toolkits/browser_tool/framework/cli) - [Google ADK](https://composio.dev/toolkits/browser_tool/framework/google-adk) - [LangChain](https://composio.dev/toolkits/browser_tool/framework/langchain) - [Vercel AI SDK](https://composio.dev/toolkits/browser_tool/framework/ai-sdk) - [Mastra AI](https://composio.dev/toolkits/browser_tool/framework/mastra-ai) - [LlamaIndex](https://composio.dev/toolkits/browser_tool/framework/llama-index) - [CrewAI](https://composio.dev/toolkits/browser_tool/framework/crew-ai) ## TL;DR ### Why use Composio? Composio provides: - Access to 1,000+ managed apps from a single MCP endpoint. This makes it convenient for agents to run cross-app workflows. - Programmatic tool calling. Allows LLMs to write its code in a remote workbench to handle complex tool chaining. Reduces to-and-fro with LLMs for frequent tool calling. - Large tool response handling outside the LLM context. This minimizes context bloat from large tool responses. - Dynamic just-in-time access to thousands of tools across hundreds of apps. Composio loads the tools your agent needs, so LLMs are not overwhelmed by tools they do not need. ## Connect Browser tool to VS Code ### Integrate Browser tool MCP with VS Code ### 1. Install with one click Click the button below to add Composio to VS Code. You will be prompted to authorize. This requires VS Code 1.99+ with GitHub Copilot. [+Install in VS Code](vscode:mcp/install?%7B%22name%22%3A%22composio%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fconnect.composio.dev%2Fmcp%22%7D) ### 2. Or add manually Open or create .vscode/mcp.json in your project root and add the following configuration: ```bash { "servers": { "composio": { "type": "http", "url": "https://connect.composio.dev/mcp" } } } ``` ## What is the Browser tool MCP server, and what's possible with it? The Browser tool MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to browser automation tools. It provides structured and secure access to browser actions, so your agent can fetch web content, perform clicks, automate keyboard shortcuts, move the mouse, and interact with on-page elements just like a real user. - Fetch and analyze webpage content: Let your agent retrieve the full HTML or clean text of any web page for data extraction, analysis, or decision-making. - Automated mouse and keyboard interactions: Instruct your agent to perform precise clicks, double clicks, drags, and keyboard shortcuts to navigate, select, or manipulate content on the page. - Clipboard and text extraction: Have the agent copy highlighted text, read clipboard contents, or transfer data between the browser and other tools for seamless workflows. - Drag-and-drop automation: Enable your agent to handle complex drag-and-drop actions, such as moving files or rearranging lists, to mimic advanced user interactions. - Fine-grained UI element control: Direct your agent to move the mouse, press and hold, or release buttons at exact coordinates to interact with dynamic or custom web interfaces. ## Supported Tools | Tool slug | Name | Description | |---|---|---| | `BROWSER_TOOL_COPY_SELECTED_TEXT` | Copy Selected Text | Copy currently selected text on the page to clipboard - ideal for extracting highlighted content, copying form data, or harvesting visible text selections. | | `BROWSER_TOOL_DRAG_AND_DROP` | Drag and Drop | Execute precise drag and drop operations - essential for file uploads, list reordering, element moving, and complex ui interactions that require drag-based manipulation. | | `BROWSER_TOOL_FETCH_WEBPAGE` | Fetch Webpage Content | Your eyes: get page content for decision-making. use before: actions (find targets, understand state) use to verify: page transitions, major state changes, when actions seem to fail format: html=find elements \| markdown=clean content \| success rate: 99% | | `BROWSER_TOOL_GET_CLIPBOARD` | Get Clipboard Content | Read current content from the system clipboard - essential for data transfer workflows, extracting copied text, and reading user-copied data for processing. | | `BROWSER_TOOL_KEYBOARD_SHORTCUT` | Keyboard Shortcut | Execute keyboard shortcuts and key combinations - essential for copy/paste, navigation, and application commands that agents need for efficient browser automation. | | `BROWSER_TOOL_MOUSE_CLICK` | Mouse Click | Precision clicker: manual clicking with coordinates. pattern: fetchwebpage(html) → find element → estimate coordinates → click → verify hints: center buttons ~(640,350) \| nav/header ~y=150 \| content ~y=300-500 tip: try ±50px if first click misses \| success rate: 85% | | `BROWSER_TOOL_MOUSE_DOUBLE_CLICK` | Mouse Double Click | Execute a precise double click at specified screen coordinates - ideal for opening files, selecting text, or activating ui elements that require double click gestures. | | `BROWSER_TOOL_MOUSE_DOWN` | Mouse Down (Press and Hold) | Press and hold mouse button at coordinates - use for starting custom drag operations, text selections, or long-press interactions. must be followed by mouseup action to complete. | | `BROWSER_TOOL_MOUSE_MOVE` | Mouse Move | Move mouse cursor to precise coordinates without clicking - perfect for triggering hover effects, revealing tooltips, and positioning for subsequent interactions. | | `BROWSER_TOOL_MOUSE_UP` | Mouse Up (Release Button) | Release mouse button at coordinates - completes drag operations, text selections, and long-press interactions. should be used after mousedown to finish mouse button sequences. | | `BROWSER_TOOL_NAVIGATE` | Navigate to URL | Always start here: creates browser session and navigates to url. workflow: navigate() → fetchwebpage() → manual interactions → verify print debugurl to user \| success rate: 99% | | `BROWSER_TOOL_PASTE_TEXT` | Paste Text | Paste text content at the current cursor position - perfect for filling forms, inserting data into text fields, or quick content insertion at focused elements. | | `BROWSER_TOOL_PERFORM_WEB_TASK` | AI Perform Web Task | Ai automation: complex workflows only. when to use: 10+ manual steps \| dynamic/unpredictable content when to avoid: simple clicks \| forms \| navigation \| payments strategy: try once → if fails, switch to manual immediately success rate: 40% - always have manual backup ready | | `BROWSER_TOOL_SCREENSHOT_WEBPAGE` | Screenshot Webpage | Capture high-quality screenshot of any webpage with extensive customization options - perfect for archiving, visual documentation, full-page captures, and cross-device viewport testing. | | `BROWSER_TOOL_SCROLL` | Scroll Page | Page navigation: smooth scrolling. use: when target element not visible after fetchwebpage() distance: 200px=fine \| 400px=sections \| 800px=quick traverse always: scroll → fetchwebpage() → verify \| success rate: 99% | | `BROWSER_TOOL_SET_CLIPBOARD` | Set Clipboard Content | Store text content in the system clipboard for later paste operations - perfect for preparing data transfers, staging content for forms, or cross-application data sharing. | | `BROWSER_TOOL_TAKE_SCREENSHOT` | Take Screenshot | Visual verification: capture screenshot of current browser viewport. use: debug ui issues, verify page state, document visual results renders: inline in mcp clients for immediate visual feedback tip: use after page changes to confirm they worked \| success rate: 99% | | `BROWSER_TOOL_TYPE_TEXT` | Type Text | Controlled input: human-like typing. pattern: click to focus → typetext() → verify speed: delay=0 (fast) \| delay=50 (human-like) \| delay=100+ (careful) must focus input field first \| success rate: 95% | ## Supported Triggers None listed. ## Creating MCP Server - Stand-alone vs Composio SDK Once connected, VS Code can access the Browser tool MCP server via Composio to run the app actions you authorize, directly from your coding workflow. ## Complete Code None listed. ## Conclusion ### Way Forward Now that Browser tool is connected, extend your setup by connecting the other apps you already use every day, so your agent can run true cross-app workflows end to end. - Connect Calendar to turn threads into scheduled meetings automatically. - Connect Slack or Teams to post summaries, approvals, and alerts where your team works. - Connect Notion, Linear, Jira, or Asana to convert requests into tickets, tasks, and docs. - Connect Drive, Dropbox, or OneDrive to fetch, file, and share attachments without manual steps. - Connect HubSpot or Salesforce to log customer context, update records, and draft follow-ups. Start with one workflow you do repeatedly, then keep adding apps as you find new handoffs. With everything behind a single MCP endpoint, your agent can coordinate multiple tools safely and reliably in one conversation. ## How to build Browser tool MCP Agent with another framework - [ChatGPT](https://composio.dev/toolkits/browser_tool/framework/chatgpt) - [OpenAI Agents SDK](https://composio.dev/toolkits/browser_tool/framework/open-ai-agents-sdk) - [Claude Agent SDK](https://composio.dev/toolkits/browser_tool/framework/claude-agents-sdk) - [Claude Code](https://composio.dev/toolkits/browser_tool/framework/claude-code) - [Claude Cowork](https://composio.dev/toolkits/browser_tool/framework/claude-cowork) - [Codex](https://composio.dev/toolkits/browser_tool/framework/codex) - [Cursor](https://composio.dev/toolkits/browser_tool/framework/cursor) - [OpenCode](https://composio.dev/toolkits/browser_tool/framework/opencode) - [OpenClaw](https://composio.dev/toolkits/browser_tool/framework/openclaw) - [Hermes](https://composio.dev/toolkits/browser_tool/framework/hermes-agent) - [CLI](https://composio.dev/toolkits/browser_tool/framework/cli) - [Google ADK](https://composio.dev/toolkits/browser_tool/framework/google-adk) - [LangChain](https://composio.dev/toolkits/browser_tool/framework/langchain) - [Vercel AI SDK](https://composio.dev/toolkits/browser_tool/framework/ai-sdk) - [Mastra AI](https://composio.dev/toolkits/browser_tool/framework/mastra-ai) - [LlamaIndex](https://composio.dev/toolkits/browser_tool/framework/llama-index) - [CrewAI](https://composio.dev/toolkits/browser_tool/framework/crew-ai) ## Related Toolkits - [Composio](https://composio.dev/toolkits/composio) - Composio is an integration platform that connects AI agents with hundreds of business tools. It streamlines authentication and lets you trigger actions across services—no custom code needed. - [Composio search](https://composio.dev/toolkits/composio_search) - Composio search is a unified web search toolkit spanning travel, e-commerce, news, financial markets, images, and more. It lets you and your apps tap into up-to-date web data from a single, easy-to-integrate service. - [Perplexityai](https://composio.dev/toolkits/perplexityai) - Perplexityai delivers natural, conversational AI models for generating human-like text. Instantly get context-aware, high-quality responses for chat, search, or complex workflows. - [Ai ml api](https://composio.dev/toolkits/ai_ml_api) - Ai ml api is a suite of AI/ML models for natural language and image tasks. It provides fast, scalable access to advanced AI capabilities for your apps and workflows. - [Aivoov](https://composio.dev/toolkits/aivoov) - Aivoov is an AI-powered text-to-speech platform offering 1,000+ voices in over 150 languages. Instantly turn written content into natural, human-like audio for any application. - [All images ai](https://composio.dev/toolkits/all_images_ai) - All-Images.ai is an AI-powered image generation and management platform. It helps you create, search, and organize images effortlessly with advanced AI capabilities. - [Anthropic administrator](https://composio.dev/toolkits/anthropic_administrator) - Anthropic administrator is an API for managing Anthropic organizational resources like members, workspaces, and API keys. It helps you automate admin tasks and streamline resource management across your Anthropic organization. - [Api labz](https://composio.dev/toolkits/api_labz) - Api labz is a platform offering a suite of AI-driven APIs and workflow tools. It helps developers automate tasks and build smarter, more efficient applications. - [Apipie ai](https://composio.dev/toolkits/apipie_ai) - Apipie ai is an AI model aggregator offering a single API for accessing top AI models from multiple providers. It helps developers build cost-efficient, latency-optimized AI solutions without juggling multiple integrations. - [Astica ai](https://composio.dev/toolkits/astica_ai) - Astica ai provides APIs for computer vision, NLP, and voice synthesis. Integrate advanced AI features into your app with a single API key. - [Bigml](https://composio.dev/toolkits/bigml) - BigML is a machine learning platform that lets you build, train, and deploy predictive models from your data. Its intuitive interface and robust API make machine learning accessible and efficient. - [Botbaba](https://composio.dev/toolkits/botbaba) - Botbaba is a platform for building, managing, and deploying conversational AI chatbots across messaging channels. It streamlines chatbot automation, making it easier to integrate AI into customer interactions. - [Botpress](https://composio.dev/toolkits/botpress) - Botpress is an open-source platform for building, deploying, and managing chatbots. It helps teams automate conversations and deliver rich, interactive messaging experiences. - [Chatbotkit](https://composio.dev/toolkits/chatbotkit) - Chatbotkit is a platform for building and managing AI-powered chatbots using robust APIs and SDKs. It lets you easily add conversational AI to your apps for better user engagement. - [Cody](https://composio.dev/toolkits/cody) - Cody is an AI assistant built for businesses, trained on your company's knowledge and data. It delivers instant answers and insights, tailored for your team. - [Context7 MCP](https://composio.dev/toolkits/context7_mcp) - Context7 MCP delivers live, version-specific code docs and examples right from the source. It helps developers and AI agents instantly retrieve authoritative programming info—no more out-of-date docs. - [Customgpt](https://composio.dev/toolkits/customgpt) - CustomGPT.ai lets you build and deploy chatbots tailored to your own data and business needs. Get precise and context-aware AI conversations without writing code. - [Datarobot](https://composio.dev/toolkits/datarobot) - Datarobot is a machine learning platform that automates model development, deployment, and monitoring. It empowers organizations to quickly gain predictive insights from large datasets. - [Deepgram](https://composio.dev/toolkits/deepgram) - Deepgram is an AI-powered speech recognition platform for accurate audio transcription and understanding. It enables fast, scalable speech-to-text with advanced audio intelligence features. - [DeepImage](https://composio.dev/toolkits/deepimage) - DeepImage is an AI-powered image enhancer and upscaler. Get higher-quality images with just a few clicks. ## Frequently Asked Questions ### What are the differences in Tool Router MCP and Browser tool MCP? With a standalone Browser tool MCP server, the agents and LLMs can only access a fixed set of Browser tool tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Browser tool and many other apps based on the task at hand, all through a single MCP endpoint. ### Can I use Tool Router MCP with VS Code? Yes, you can. VS Code 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 Browser tool tools. ### Can I manage the permissions and scopes for Browser tool while using Tool Router? Yes, absolutely. You can configure which Browser tool 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 Browser tool data and credentials are handled as safely as possible. --- [See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)