diff --git a/sources/platform/actors/development/quick-start/build_with_ai.md b/sources/platform/actors/development/quick-start/build_with_ai.md index ebd355795..082eb736f 100644 --- a/sources/platform/actors/development/quick-start/build_with_ai.md +++ b/sources/platform/actors/development/quick-start/build_with_ai.md @@ -13,7 +13,6 @@ toc_max_heading_level: 4 import { AGENTS_PROMPT } from "@site/src/utils/agents-prompt"; import PromptButton from "@site/src/components/PromptButton"; -import InstallMCPButton from "@site/src/components/InstallMCPButton"; import copyForAI from "./images/copy-for-ai.png"; This guide provides best practices for building new Actors or improving existing ones using AI code generation and vibe coding tools such as Cursor, Claude Code, or Visual Studio Code, by providing the AI agents with the right instructions and context. @@ -61,6 +60,34 @@ We have prepared the [Apify MCP server configuration](https://mcp.apify.com/), w ::: +### Claude + +1. Go to _Settings_ > _Connectors_ in Claude. +2. Click _Add custom connector_. +3. Set the name to `Apify` and the URL to `https://mcp.apify.com/?tools=docs`. +4. When chatting, click the _+_ button and select the _Apify_ connector to add documentation context. + +### Cursor + +1. Open the command palette with `Cmd+Shift+P` (or `Ctrl+Shift+P` on Windows). +2. Search for and select _Open MCP settings_. +3. Add the following configuration to `mcp.json`: + +```json +{ + "mcpServers": { + "apify": { + "url": "https://mcp.apify.com/?tools=docs" + } + } +} +``` + +### VS Code + +1. Install an MCP-compatible extension. +2. Add the Apify server URL: `https://mcp.apify.com/?tools=docs` + ## Provide context to assistants Every page in the Apify documentation has a **Copy for LLM** button. You can use it to add additional context to your AI assistant, or even open the page in ChatGPT, Claude, or Perplexity and ask additional questions. diff --git a/src/components/InstallMCPButton.jsx b/src/components/InstallMCPButton.jsx deleted file mode 100644 index bd3aeb7db..000000000 --- a/src/components/InstallMCPButton.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { ExternalLinkIcon } from '@apify/ui-icons'; -import { Text } from '@apify/ui-library'; - -import styles from './InstallMCPButton.module.css'; - -export default function InstallMCPButton({ link, label = 'Install MCP', children }) { - if (!link) return null; - - return ( - -
-
- -
- - {children || label} - -
-
- ); -} diff --git a/src/components/InstallMCPButton.module.css b/src/components/InstallMCPButton.module.css deleted file mode 100644 index 632113a36..000000000 --- a/src/components/InstallMCPButton.module.css +++ /dev/null @@ -1,54 +0,0 @@ -.wrapper { - display: flex; - justify-content: center; - align-items: center; - color: var(--ifm-color-content); -} - -.button { - width: fit-content; - display: inline-flex; - align-items: center; - height: 3rem; - - display: flex; - align-items: center; - border-radius: 8px; - border: 1px solid var(--color-Neutral_SeparatorSubtle); - background-color: var(--color-Neutral_BackgroundMuted); - - cursor: pointer; - transition: background-color 0.2s ease-in-out; - - &:hover { - background-color: var(--color-Neutral_BackgroundMuted); - } -} - -.label { - height: 100%; - display: flex; - align-items: center; - padding-right: 0.8rem; - min-width: 9.3rem; - - /* prevents font size glitch when loading the page */ - margin: 0px; - font-size: 1.4rem; - font-weight: 400; - font-family: Inter, sans-serif; -} - -.button:hover { - background-color: var(--color-Neutral_BackgroundMuted); - color: var(--ifm-color-content); -} - -.iconWrapper { - display: flex; - align-items: center; - justify-content: center; - padding-left: 0.8rem; - padding-right: 0.4rem; - height: 100%; -}