Skip to content

Commit 3111ae2

Browse files
patrikbraborecpatrikbraborec
committed
docs: Refactor of Build with AI section - v2
1 parent e0c3388 commit 3111ae2

File tree

6 files changed

+182
-101
lines changed

6 files changed

+182
-101
lines changed

‎sources/platform/actors/development/quick_start/build_with_ai.md‎

Lines changed: 52 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
11
---
22
title: Build with AI
33
sidebar_position: 3
4-
description: Learn how to set up your environment, choose the right tools, and establish workflows for effective vibe coding
4+
description: Use pre-built prompts, use Apify docs via llms.txt, and follow best practices to effective vibe coding.
55
slug: /actors/development/quick-start/build-with-ai
66
toc_max_heading_level: 4
77
---
88

9-
**Set up your environment, choose tools, and build workflows for effective AI development.**
9+
**Use pre-built prompts, use Apify docs via llms.txt, and follow best practices to build Actors efficiently with AI assistants.**
1010

1111
---
1212

1313
import { AGENTS_PROMPT } from "@site/src/utils/agents-prompt";
1414
import PromptButton from "@site/src/components/PromptButton";
15+
import InstallMCPButton from "@site/src/components/InstallMCPButton";
16+
import copyForLlm from "./images/copy-for-llm.png";
1517

1618
This guide shows you how to build Actors efficiently with AI coding assistants. You'll learn how to use pre-built instructions, integrate Apify documentation into your AI editor, and apply best practices for AI-assisted development.
1719

1820
## AI coding assistant instructions
1921

20-
Use the following prompt in your favorite AI coding assistant:
22+
Use the following prompt in your AI coding assistant ([Cursor](https://www.cursor.com/), [Claude Code](https://www.claude.com/product/claude-code), [GitHub Copilot](https://github.com/features/copilot), etc.):
2123

2224
<PromptButton prompt={AGENTS_PROMPT} title="Use pre-built prompt for your AI coding assistant" />
2325

2426
### Quick Start
2527

2628
- _Step 1_: Create directory: `mkdir my-new-actor`
27-
- _Step 2_: Open the directory in _Cursor_, _VS Code_, etc.
29+
- _Step 2_: Open the directory in _Cursor_, _Claude Code_, _VS Code with GitHub Copilot_, etc.
2830
- _Step 3_: Copy the prompt above and paste it into your AI coding assistant (Agent or Chat)
2931
- _Step 4_: Run it, and develop your first actor with the help of AI 🎉
3032

@@ -34,9 +36,51 @@ To maximize efficiency, copy the prompt to Cursor, VS Code with GitHub Copilot,
3436

3537
:::
3638

37-
## `llms.txt` and `llms-full.txt`
39+
## Use Actor templates with AGENTS.md
3840

39-
Search engines weren't built for Large Language Models (LLMs), but they needs context. That's why we've created [`llms.txt`](https://docs.apify.com/llms.txt) and [`llms-full.txt`](https://docs.apify.com/llms-full.txt) for our documentation. These files follow the [growing standard](https://llmstxt.org/) for LLMs consumption.
41+
All [Actor Templates](https://apify.com/templates) have AGENTS.md that will help you with AI coding. If you prefer a more traditional approach, run the following command:
42+
43+
:::info Install Apify CLI
44+
45+
If you don't have Apify CLI installed, install it first. Check the [installation guide](/cli/docs/installation).
46+
47+
:::
48+
49+
```bash
50+
apify create
51+
```
52+
53+
The command above will guide you through Apify Actor initialization, where you select an Actor Template that works for you. The result is an initialized Actor (with AGENTS.md) ready for development.
54+
55+
## Use Apify MCP Server
56+
57+
The Apify MCP Server has tools to search and fetch documentation. If you set it up in your AI editor, it will help you improve the generated code by providing additional context to the AI.
58+
59+
Install it by clicking one of the following buttons for your AI editor.
60+
61+
### Cursor
62+
63+
<InstallMCPButton link="https://cursor.com/en-US/install-mcp?name=apify&config=eyJ1cmwiOiJodHRwczovL21jcC5hcGlmeS5jb20vP3Rvb2xzPWRvY3MifQ%3D%3D" label="Install in Cursor" />
64+
65+
### VS Code
66+
67+
<InstallMCPButton link="vscode:mcp/install?%7B%22name%22%3A%22apify%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.apify.com%2F%3Ftools%3Ddocs%22%7D" label="Install in VS Code" />
68+
69+
### Claude Code
70+
71+
```bash
72+
claude mcp add apify https://mcp.apify.com/?tools=docs -t http
73+
```
74+
75+
## Provide context to assistants
76+
77+
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.
78+
79+
<img src={copyForLlm} alt="Copy for LLM" width="250" />
80+
81+
## Use `llms.txt` and `llms-full.txt`
82+
83+
Search engines weren't built for Large Language Models (LLMs), but LLMs need context. That's why we've created [`llms.txt`](https://docs.apify.com/llms.txt) and [`llms-full.txt`](https://docs.apify.com/llms-full.txt) for our documentation. These files can provide additional context if you link them.
4084

4185
<table>
4286
<thead>
@@ -59,66 +103,12 @@ Search engines weren't built for Large Language Models (LLMs), but they needs co
59103
</tbody>
60104
</table>
61105

62-
<!-- TODO: Consider to remove it to keep it simple... -->
63-
64-
### Use llms.txt and llms-full.txt
65-
66-
LLMs don't automatically discover `llms.txt` files, you need to add the link manually. Some tools like [Cursor](https://www.cursor.com/) provide settings for this.
67-
68-
#### Cursor
106+
:::note Provide link to AI assistants
69107

70-
Go to: **Settings -> Cursor Settings -> Indexing & Docs -> Add Doc**.
71-
72-
Now, you can just provide the link to Apify `llms-full.txt`:
73-
74-
```markdown
75-
https://docs.apify.com/llms-full.txt
76-
```
77-
78-
![Add llms-full.txt to Cursor](./images/cursor.png)
79-
80-
#### Windsurf
81-
82-
Open Windsurf Cascade, and add context via `@web`:
83-
84-
![Add llms-full.txt to Windsurf](./images/windsurf.png)
85-
86-
:::note Windsurf @docs
87-
88-
Windsurf provides the `@docs` command, but you cannot customize it. It means that you cannot add your own documentation.
89-
90-
:::
91-
92-
#### GitHub Copilot
93-
94-
Open Copilot Chat mode, and add context via `#fetch`:
95-
96-
![Add llms.txt to Copilot](./images/github-copilot.png)
97-
98-
:::note GitHub Copilot and documentation
99-
100-
Similar to Windsurf, GitHub Copilot does not provide an option for adding your own documentation.
108+
LLMs don't automatically discover `llms.txt` files, you need to add the link manually to improve the quality of answers.
101109

102110
:::
103111

104-
#### Ask AI
105-
106-
New to Apify? Ask questions and provide the `llms.txt` link. Popular AI models can search the web. With the right context, you get better answers:
107-
108-
![Ask about Apify](./images/claude.png)
109-
110-
## Use Actor Templates with instructions
111-
112-
TODO:
113-
114-
- Just mention that you can init actor using `apify create` and use it in IDE with AGENTS.md
115-
116-
## Provide context to assistants
117-
118-
TBD:
119-
120-
- Mention "Copy for LLM" buttons
121-
122112
## Best practices
123113

124114
- _Small tasks_: Don't ask AI for many tasks at once. Break complex problems into smaller pieces. Solve them step by step.

‎sources/platform/actors/development/quick_start/images/copy-for-llm.png‎

72.6 KB
Loading

‎src/components/InstallMCPButton.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
3+
import { ExternalLinkIcon } from '@apify/ui-icons';
4+
import { Text } from '@apify/ui-library';
5+
6+
import styles from './InstallMCPButton.module.css';
7+
8+
export default function InstallMCPButton({ link, label = 'Install MCP', children }) {
9+
if (!link) return null;
10+
11+
return (
12+
<a href={link} className={styles.button} target="_blank" rel="noopener noreferrer">
13+
<div className={styles.wrapper}>
14+
<div className={styles.iconWrapper} aria-hidden>
15+
<ExternalLinkIcon size={16} className={styles.icon} />
16+
</div>
17+
<Text
18+
size="regular"
19+
className={styles.label}
20+
>
21+
{children || label}
22+
</Text>
23+
</div>
24+
</a>
25+
);
26+
}

‎src/components/InstallMCPButton.module.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.wrapper {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
color: var(--ifm-color-content);
6+
}
7+
8+
.button {
9+
width: fit-content;
10+
display: inline-flex;
11+
align-items: center;
12+
height: 3rem;
13+
14+
display: flex;
15+
align-items: center;
16+
border-radius: 8px;
17+
border: 1px solid var(--color-Neutral_SeparatorSubtle);
18+
background-color: var(--color-Neutral_BackgroundMuted);
19+
20+
cursor: pointer;
21+
transition: background-color 0.2s ease-in-out;
22+
23+
&:hover {
24+
background-color: var(--color-Neutral_BackgroundMuted);
25+
}
26+
}
27+
28+
.label {
29+
height: 100%;
30+
display: flex;
31+
align-items: center;
32+
padding-right: 0.8rem;
33+
min-width: 9.3rem;
34+
35+
/* prevents font size glitch when loading the page */
36+
margin: 0px;
37+
font-size: 1.4rem;
38+
font-weight: 400;
39+
font-family: Inter, sans-serif;
40+
}
41+
42+
.button:hover {
43+
background-color: var(--color-Neutral_BackgroundMuted);
44+
color: var(--ifm-color-content);
45+
}
46+
47+
.iconWrapper {
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
padding-left: 0.8rem;
52+
padding-right: 0.4rem;
53+
height: 100%;
54+
}

‎src/components/PromptButton.module.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@
8585
.copy-button:hover {
8686
background: var(--ifm-color-primary-darker);
8787
border-color: var(--ifm-color-primary-darker);
88-
transform: translateY(-1px);
8988
}
9089

9190
.copy-button:active {
@@ -128,7 +127,6 @@
128127
.toggle-button:hover {
129128
background: var(--ifm-color-primary);
130129
color: var(--ifm-color-primary-contrast-background);
131-
transform: translateY(-1px);
132130
}
133131

134132
.toggle-button:active {

0 commit comments

Comments
 (0)