claude-surf

🥈Silver

Claude-Surf is a Claude Code plugin that enables control of real browsers, execution of AI skills, and integration with external apps. It benefits operations teams by automating workflows and streamlining processes. The plugin connects to browsers and external applications, allowing for real-time previewing and execution of tasks.

2420Updated 3mo ago

Intermediate30min to implementautomation

Saves ~180 min per use

Quick InstallView Source

git clone https://github.com/vibesurf-ai/claude-surf.git

Works with:

Claude

Overview

About This Skill

Claude-Surf bridges Claude with VibeSurf to deliver browser automation and web interaction within Claude Code. The plugin enables navigation of websites, interaction with page elements, execution of pre-built automation workflows, and integration with 100+ external applications including Gmail, GitHub, and Slack. It supports both local browser control and sandboxed Docker-based automation, with real-time VSCode preview capabilities. Users can leverage VibeSurf skills for searching, crawling, extracting data, and summarizing content, while parallel multi-task automation uses AI sub-agents for complex workflows.

How to Use

Install Claude Code CLI, then set up VibeSurf locally or via Docker. Add the plugin via marketplace with `/plugin marketplace add vibesurf-ai/claude-surf` and install with `/plugin install surf`. Restart Claude Code and run commands like `surf search AI news today` to begin automating browser tasks.

Use Cases

Automate web research and data extraction from multiple websites

Execute scheduled workflows across Gmail, GitHub, Slack and other integrated apps

Real-time browser control and testing with live VSCode preview

Deploy sandboxed browser automation using Docker for production environments

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/vibesurf-ai/claude-surf

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

I want to use Claude-Surf to automate a workflow for [COMPANY] in the [INDUSTRY] sector. The workflow involves [DESCRIBE WORKFLOW] and requires integration with [EXTERNAL APPS]. Provide a step-by-step plan to set this up using Claude-Surf, including any necessary code snippets or configurations.

Example Output

# Automated Workflow Plan for [COMPANY]

## Workflow Overview
- **Objective**: Automate data collection and reporting for [COMPANY] in the [INDUSTRY] sector.
- **Tasks**:
  - Log in to [EXTERNAL APP 1]
  - Extract data from [DATA SOURCE]
  - Process data using [AI SKILL]
  - Generate a report in [EXTERNAL APP 2]

## Step-by-Step Plan
1. **Set Up Claude-Surf**:
   - Install the Claude-Surf plugin in Claude Code.
   - Configure browser control settings.
2. **Integrate External Apps**:
   - Use OAuth or API keys to connect [EXTERNAL APP 1] and [EXTERNAL APP 2].
3. **Automate Data Collection**:
   - Write a script to log in to [EXTERNAL APP 1] and extract data from [DATA SOURCE].
4. **Process Data**:
   - Use the [AI SKILL] to clean and analyze the extracted data.
5. **Generate Report**:
   - Automate the report generation process in [EXTERNAL APP 2].
6. **Test and Deploy**:
   - Run the workflow in a test environment.
   - Deploy the workflow to production.

## Expected Outcome
- Reduced manual effort in data collection and reporting.
- Increased accuracy and efficiency in the workflow.

Apply to these tools

Browse all tools

Claude

AI assistant built for thoughtful, nuanced conversation

Microsoft Teams

Get more done every day with Microsoft Teams – powered by AI

Drata

Automate security compliance and monitor real-time security posture seamlessly.

GPT for work

Automate your spreadsheet tasks with AI power

Respell

Agentic AI Workflow platform

Notion

Connected workspace for docs, wikis, and projects

Compatible MCP servers

Browse all MCP servers

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan

Overview

About This Skill

How to Use

Use Cases

Automate web research and data extraction from multiple websites

Execute scheduled workflows across Gmail, GitHub, Slack and other integrated apps

Real-time browser control and testing with live VSCode preview

Deploy sandboxed browser automation using Docker for production environments

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/vibesurf-ai/claude-surf

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

I want to use Claude-Surf to automate a workflow for [COMPANY] in the [INDUSTRY] sector. The workflow involves [DESCRIBE WORKFLOW] and requires integration with [EXTERNAL APPS]. Provide a step-by-step plan to set this up using Claude-Surf, including any necessary code snippets or configurations.

Example Output

# Automated Workflow Plan for [COMPANY]

## Workflow Overview
- **Objective**: Automate data collection and reporting for [COMPANY] in the [INDUSTRY] sector.
- **Tasks**:
  - Log in to [EXTERNAL APP 1]
  - Extract data from [DATA SOURCE]
  - Process data using [AI SKILL]
  - Generate a report in [EXTERNAL APP 2]

## Step-by-Step Plan
1. **Set Up Claude-Surf**:
   - Install the Claude-Surf plugin in Claude Code.
   - Configure browser control settings.
2. **Integrate External Apps**:
   - Use OAuth or API keys to connect [EXTERNAL APP 1] and [EXTERNAL APP 2].
3. **Automate Data Collection**:
   - Write a script to log in to [EXTERNAL APP 1] and extract data from [DATA SOURCE].
4. **Process Data**:
   - Use the [AI SKILL] to clean and analyze the extracted data.
5. **Generate Report**:
   - Automate the report generation process in [EXTERNAL APP 2].
6. **Test and Deploy**:
   - Run the workflow in a test environment.
   - Deploy the workflow to production.

## Expected Outcome
- Reduced manual effort in data collection and reporting.
- Increased accuracy and efficiency in the workflow.

claude-surf

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Claude

Microsoft Teams

Drata

GPT for work

Respell

Notion

Compatible MCP servers

context sync

mcp notion server

src to kb

notion mcp

slime

notion

Find the right skills for your stack

claude-surf

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Claude

Microsoft Teams

Drata

GPT for work

Respell

Notion

Compatible MCP servers

context sync

mcp notion server

src to kb

notion mcp

slime

notion

Find the right skills for your stack