Skip to content

Commit 0282107

Browse files
mvvmmmvvmm
authored
feat: add agent setup prompt for AI agent onboarding (cloudflare#30281)
* feat: add agent setup prompt for AI agent onboarding - Add src/content/agent-setup/prompt.md as single source of truth for agent instructions (install Skills, MCP servers, and find next steps) - Serve prompt as text/markdown at /agent-setup/prompt.md via Astro API endpoint - Override Starlight SkipLink slot to inject hidden data-agent-instructions div as first child of <body> on /agent-setup/ only - Add Accept: text/markdown content negotiation to worker for /agent-setup route, proxying to /agent-setup/prompt.md - Inject HTML stop directive as preamble in the hidden div only, keeping the markdown prompt clean * feat: global skills install and restart prompt for MCP servers * feat: per-agent MCP config paths, global skills, fix OAuth note * feat: improve agent setup prompt UX and fix opencode mcp install * feat: add restart and auth instructions to setup completion block * feat: move restart notice inside ascii block * feat: add per-agent MCP auth commands inline with install steps * fix: remove claude mcp auth, OAuth triggers on first tool call for Claude Code * feat: update agent setup with plugin installs, new MCP servers, and refreshed prompts * feat: include remaining agent setup component and page changes * [agent-setup] revamp homepage copy block and /agent-setup index page - Add PromptCopyBlock component with dark terminal-style UI, copy button, and icon swap on success - Add two-path card layout to /agent-setup/ (Quick setup vs Manual setup) with orange border on quick path card - Remove agent directive hidden div from SkipLink.astro - Remove content negotiation for /agent-setup from worker/index.ts - Update homepage agent section: copy block, secondary link, drop SVG on small screens, rework CTA text * [agent-setup] polish copy block, homepage logos, and path cards - Two-path card layout on /agent-setup/: Quick setup (orange border) vs Manual setup, responsive with flex wrap at 1000px - PromptCopyBlock: remove animation, fix copy button click handler, no-select on text, copy/copied label swap, overflow/truncation fixes - Homepage: smaller logos (60px), gap spacing, remove justify-between, tighten secondary link spacing, pcb-root margin overrides * fix: prettier formatting and homepage agent section margin * [agent-setup] light mode fixes and copy block polish - PromptCopyBlock: theme-aware colors for light mode (no more hardcoded dark) - Remove glow, add subtle orange box-shadow that increases on hover/copied - Fix copy button colors, green copied state, text color via CSS vars - Homepage: even section margin, normal text size/color for secondary link * [agent-setup] increase homepage agent section top/bottom margin * [agent-setup] copy block light/dark mode background and dot polish * chore: remove unnecessary SkipLink override and astro.config registration
1 parent b1e5407 commit 0282107

20 files changed

Lines changed: 679 additions & 132 deletions

‎src/components/agent-setup/AgentHeader.astro‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,18 @@ if (!agent) {
2626
}
2727
2828
const externalLinks = [
29-
agent.links.skills && { label: "Skills", href: agent.links.skills },
29+
agent.links.skills && {
30+
label: "Cloudflare Skills",
31+
href: agent.links.skills,
32+
},
3033
agent.links.mcp_server && {
31-
label: "MCP Server",
34+
label: "Cloudflare Code Mode API MCP",
3235
href: agent.links.mcp_server,
3336
},
37+
agent.links.mcp_server_domain && {
38+
label: "Cloudflare Domain Specific MCPs",
39+
href: agent.links.mcp_server_domain,
40+
},
3441
agent.links.cli && { label: "CLI", href: agent.links.cli },
3542
agent.links.docs && { label: `${agent.name} Docs`, href: agent.links.docs },
3643
].filter(Boolean) as { label: string; href: string }[];

‎src/components/agent-setup/ExamplePrompts.astro‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@
33
// anywhere on the chip copies the text (without surrounding quotes) to the
44
// clipboard and swaps the copy icon for a checkmark for 1.5s.
55
//
6+
// All prompts are rendered in the HTML but only 5 randomly-selected ones are
7+
// shown on each page load (client-side shuffle).
8+
//
69
// Mirrors the inline-script copy pattern used in PackageManagers.astro.
710
interface Props {
811
prompts: string[];
12+
count?: number;
913
}
1014
11-
const { prompts } = Astro.props;
15+
const { prompts, count = 5 } = Astro.props;
1216
---
1317

14-
<div class="agent-setup-prompts">
18+
<div class="agent-setup-prompts" data-cfdocs-prompts-count={count}>
1519
{
1620
prompts.map((prompt) => (
1721
<button
@@ -59,6 +63,31 @@ const { prompts } = Astro.props;
5963
</div>
6064

6165
<script>
66+
// For each prompts container, shuffle all buttons and hide all but `count`.
67+
document
68+
.querySelectorAll<HTMLElement>("[data-cfdocs-prompts-count]")
69+
.forEach((container) => {
70+
const count = parseInt(container.dataset.cfdocsPromptsCount ?? "5", 10);
71+
const btns = Array.from(
72+
container.querySelectorAll<HTMLButtonElement>(
73+
"[data-cfdocs-copy-prompt]",
74+
),
75+
);
76+
77+
// Fisher-Yates shuffle
78+
for (let i = btns.length - 1; i > 0; i--) {
79+
const j = Math.floor(Math.random() * (i + 1));
80+
[btns[i], btns[j]] = [btns[j], btns[i]];
81+
}
82+
83+
// Reorder DOM and hide extras
84+
btns.forEach((btn, i) => {
85+
container.appendChild(btn);
86+
if (i >= count) btn.style.display = "none";
87+
});
88+
});
89+
90+
// Copy-to-clipboard
6291
document
6392
.querySelectorAll<HTMLButtonElement>("[data-cfdocs-copy-prompt]")
6493
.forEach((btn) => {

‎src/components/agent-setup/ExamplePromptsList.astro‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,7 @@
99
// No `slug` prop is required. When we find a genuinely agent-specific prompt
1010
// (something only one agent can do), we can add an override prop later.
1111
import ExamplePrompts from "./ExamplePrompts.astro";
12-
13-
const SHARED_PROMPTS = [
14-
"Create a Cloudflare Workers application that serves as a backend API server.",
15-
"Add a D1 database to my Worker and create a users table with CRUD endpoints.",
16-
"Build an image upload service using R2 pre-signed URLs.",
17-
"Set up a KV namespace and use it for session storage in my Worker.",
18-
"Show me how to use Hyperdrive to connect my Worker to an existing Postgres database.",
19-
"Create an AI chat agent using the Cloudflare Agents SDK that maintains conversation history.",
20-
"Build a Workers AI chatbot with streaming responses.",
21-
"Build a WebSocket-based pub/sub app using Durable Objects with hibernation.",
22-
"Add a cron trigger to my Worker that runs every hour.",
23-
"Add rate limiting and bot protection to my API endpoints.",
24-
"Set up GitHub Actions to auto-deploy this Worker to Cloudflare.",
25-
"Create separate staging and production environments for my Worker.",
26-
"Generate Vitest tests for my Worker.",
27-
"Check my deployment logs for errors and suggest fixes.",
28-
"Deploy this project to Cloudflare Workers with a custom domain.",
29-
];
12+
import { SHARED_PROMPTS } from "./prompts";
3013
---
3114

3215
<ExamplePrompts prompts={SHARED_PROMPTS} />

‎src/components/agent-setup/PlatformAccessSection.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import SkillsList from "./SkillsList.astro";
3434
</p>
3535
<p>
3636
MCP servers provide typed tools to call into Cloudflare at runtime. There
37-
are two options: <a href="/agents/api-reference/codemode/">Code Mode</a> —
37+
are two options: <a href="https://blog.cloudflare.com/code-mode-mcp/">Code Mode</a> —
3838
a single server that covers the entire Cloudflare API (2,500+ endpoints in
3939
~1,000 tokens) — or a set of focused, domain-specific servers hosted in
4040
the{" "}

0 commit comments

Comments
 (0)