-
Notifications
You must be signed in to change notification settings - Fork 222
feat: vs code docs #2871
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Jakub-Vacek
wants to merge
2
commits into
apify:master
Choose a base branch
from
Jakub-Vacek:feat/vscode-docs
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
feat: vs code docs #2871
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file added
BIN
+39.2 KB
sources/platform/integrations/ai/images/vscode/agent-plugins-apify.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| --- | ||
| title: VS Code integration | ||
| sidebar_label: VS Code | ||
| description: Learn how to install the Apify agent plugin in VS Code to discover, run, and build Actors with the Apify MCP server, bundled skills, and a routing agent. | ||
| slug: /integrations/vscode | ||
| --- | ||
|
|
||
| import ThirdPartyDisclaimer from '@site/sources/_partials/_third-party-integration.mdx'; | ||
|
|
||
| [VS Code](https://code.visualstudio.com/) is Microsoft's code editor. Its [agent plugins](https://code.visualstudio.com/docs/agent-customization/agent-plugins) are prepackaged bundles of agent customizations - skills, agents, and MCP servers - that you install from a plugin marketplace and use in chat. | ||
|
|
||
| The [Apify plugin](https://github.com/apify/apify-github-copilot-plugin) is published in the [Awesome Copilot](https://awesome-copilot.github.com/plugins) marketplace, which VS Code registers by default. It connects VS Code to Apify's library of [Actors](https://apify.com/store) and bundles: | ||
|
|
||
| - The [Apify MCP server](/integrations/mcp) for searching Apify Store, running Actors, and retrieving datasets through the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro). | ||
| - An `apify` routing agent that picks the right tool or skill from a natural-language request. | ||
| - Five built-in skills for common workflows (see [Bundled skills](#bundled-skills) below). | ||
|
|
||
| This guide covers installation from the plugin marketplace in VS Code. | ||
|
|
||
| <ThirdPartyDisclaimer /> | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| - [An Apify account](https://console.apify.com/sign-up) - sign up for free if you don't have one. | ||
| - [VS Code](https://code.visualstudio.com/) version 1.120 or newer, with AI features enabled and signed in. | ||
| - Agent plugin support enabled - set `chat.plugins.enabled` to `true` in Settings. | ||
|
|
||
| ## Install the plugin | ||
|
|
||
| 1. Open the Extensions view (`Ctrl+Shift+X`, or `Cmd+Shift+X` on macOS) and enter `@agentPlugins` in the search field. Alternatively, run **Chat: Plugins** from the Command Palette (`Ctrl+Shift+P`, or `Cmd+Shift+P` on macOS). | ||
|
|
||
| 1. Find the **apify** plugin in the list. Type `apify` after the filter to narrow the results. | ||
|
|
||
| 1. Select **Install**. | ||
|
|
||
|  | ||
|
|
||
| 1. The first time you install a plugin from a marketplace, VS Code shows a trust prompt. Review the source and confirm. | ||
|
|
||
| The installed plugin appears in the **Agent Plugins - Installed** section of the Extensions view. | ||
|
|
||
| ## Authenticate to Apify | ||
|
|
||
| The plugin bundles the Apify MCP server (`https://mcp.apify.com/`), and VS Code starts it as soon as the plugin is enabled. Read-only tools like searching Apify Store and fetching Actor details work without signing in, but you need to authenticate to run Actors and access your account data. | ||
|
|
||
| 1. VS Code prompts that the MCP server wants to authenticate to `console-backend.apify.com`. Select **Allow**. | ||
|
|
||
| 1. Complete the Apify OAuth flow in your browser and choose the account to connect. | ||
|
|
||
| 1. Run **MCP: List Servers** from the Command Palette and confirm that `apify-mcp-server` is running. | ||
|
|
||
| :::tip Session persistence | ||
|
|
||
| The connection stays authenticated for future sessions. You can revoke access at any time in [Apify Console > Settings > Integrations](https://console.apify.com/settings/integrations). | ||
|
|
||
| ::: | ||
|
|
||
| ## Run your first prompt | ||
|
|
||
| Open Chat, select the **apify** agent from the mode picker, and describe what you want in natural language. The agent routes the request to the right tool or skill, so you don't need to name tools yourself. | ||
|
|
||
| > Use Apify to find a good Actor for scraping Google Maps places. Show me the best option, its input requirements, pricing model, and what kind of dataset output it returns. Do not run the Actor yet. | ||
|
|
||
| The agent searches Apify Store, fetches the top Actor's details through the Apify MCP server, and summarizes its inputs, pricing, and output - all without running the Actor. | ||
|
|
||
| To check what's available, ask the agent to list its Apify tools. | ||
|
|
||
| ## Bundled skills | ||
|
|
||
| | Skill | Description | | ||
| | --- | --- | | ||
| | `apify-ultimate-scraper` | CLI-driven extraction using existing Actors for multi-step scraping and lead-generation workflows. | | ||
| | `apify-actor-development` | Full Actor lifecycle - template selection, development, local testing, and deployment with `apify push`. | | ||
| | `apify-actorization` | Converts existing JavaScript, TypeScript, Python, or CLI projects into Apify Actors. | | ||
| | `apify-generate-output-schema` | Generates dataset and key-value store schemas for existing Actors. | | ||
| | `apify-sdk-integration` | Integrates Actor execution into applications using the `apify-client` package. | | ||
|
|
||
| Example prompts that route to specific skills: | ||
|
|
||
| _Ultimate scraper:_ | ||
|
|
||
| > Find 10 highly rated coffee shops in Seattle with name, address, rating, phone, and website. | ||
|
|
||
| _Actor development:_ | ||
|
|
||
| > Create an Apify Actor that accepts a `startUrl` and `maxPages` input, crawls the site, and stores each page title and URL. | ||
|
|
||
| _SDK integration:_ | ||
|
|
||
| > Add Apify to this project. The Node.js API route should run an Actor and return dataset items as JSON. | ||
|
|
||
| ## Manage the plugin | ||
|
|
||
| - To update the plugin, run **Extensions: Check for Extension Updates** from the Command Palette. VS Code also checks every 24 hours when `extensions.autoUpdate` is enabled. | ||
| - To enable or disable the plugin, use its context menu in the **Agent Plugins - Installed** section of the Extensions view. Disabling it stops the bundled MCP server and hides the `apify` agent and skills from chat. You can disable it globally or for a single workspace. | ||
| - To remove the plugin, right-click it in **Agent Plugins - Installed** and select **Uninstall**. | ||
|
|
||
| ## Troubleshooting | ||
|
|
||
| ### The apify plugin doesn't appear in the list | ||
|
|
||
| Confirm that `chat.plugins.enabled` is set to `true` and that you're running VS Code 1.120 or newer. If you overrode the `chat.plugins.marketplaces` setting, add the marketplace back: | ||
|
|
||
| ```json | ||
| // settings.json | ||
| "chat.plugins.marketplaces": [ | ||
| "github/awesome-copilot" | ||
| ] | ||
| ``` | ||
|
|
||
| ### The Apify MCP server doesn't start | ||
|
|
||
| Run **MCP: List Servers** from the Command Palette, select `apify-mcp-server`, and start or restart it. Check the **Output** panel (**MCP: apify-mcp-server**) - a successful start ends with a line about the discovered tools. In Chat, open **Configure Tools** and confirm that **Apify MCP Server** is enabled for the `apify` agent. | ||
|
|
||
| ### Browser doesn't open, or OAuth fails | ||
|
|
||
| If the browser doesn't open automatically, copy the OAuth URL from the VS Code dialog and paste it into your browser manually. | ||
|
|
||
| If you're running VS Code over SSH, in a dev container, or in any environment without a browser, the MCP OAuth flow can't complete. Authenticate locally first so the connection is stored, or use the Apify CLI and SDK paths instead - run `apify login`, or set `APIFY_TOKEN` with a token from [Apify Console > Settings > Integrations](https://console.apify.com/settings/integrations): | ||
|
|
||
| ```bash | ||
| export APIFY_TOKEN=<YOUR_API_TOKEN> | ||
| ``` | ||
|
|
||
| ### Installation fails with "destination path already exists" | ||
|
|
||
| A previous install left a cached copy of the plugin. Delete the cached directory and install again: | ||
|
|
||
| - macOS: `~/Library/Application Support/Code/agentPlugins/github.com/apify/apify-github-copilot-plugin` | ||
| - Linux: `~/.config/Code/agentPlugins/github.com/apify/apify-github-copilot-plugin` | ||
| - Windows: `%APPDATA%\Code\agentPlugins\github.com\apify\apify-github-copilot-plugin` | ||
|
|
||
| ### The agent picks the wrong skill or transport | ||
|
|
||
| Start from the **apify** agent. It is the single entry point that detects the available transport and routes each request to the correct tool or skill. | ||
|
|
||
| ## Limitations | ||
|
|
||
| - Agent plugin support in VS Code is a preview feature, so its settings and behavior may change between releases. | ||
| - Long-running Actors may exceed the time a single tool call waits for completion. Reduce the scope or split the work across multiple prompts. | ||
| - Each Actor run consumes Apify platform usage from your plan in addition to any VS Code usage. See [Billing](/account/billing) for details. | ||
| - Skills that edit files in your project (Actor development, actorization, SDK integration) make local changes - review them before deploying or committing. | ||
|
|
||
| ## Related integrations | ||
|
|
||
| - [GitHub Copilot integration](/integrations/github-copilot) - Install the same plugin from its source repository in VS Code | ||
| - [Cursor integration](/integrations/cursor) - Install the Apify plugin in Cursor | ||
| - [MCP server integration](/integrations/mcp) - Use the Apify MCP server with other clients | ||
|
|
||
| ## Resources | ||
|
|
||
| - [Apify plugin repository](https://github.com/apify/apify-github-copilot-plugin) - Source repository and full README with advanced setup notes | ||
| - [Agent plugins in VS Code](https://code.visualstudio.com/docs/agent-customization/agent-plugins) - Official VS Code documentation | ||
| - [Awesome Copilot plugin marketplace](https://awesome-copilot.github.com/plugins) - Browse the plugins VS Code registers by default | ||
| - [Apify Store](https://apify.com/store) - Browse Actors you can run from VS Code |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a nit:
I think that blue logo works for both dark & light modes
We could drop this one and reuse blue on both versions
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I think so too. In VS Code brand guide they are pointing devs to use the white logo for any darker backgrounds so 🤷