Skip to content

Commit 23911e4

Browse files
mvvmmmvvmm
committed
feat: add Cloudflare tools banner to agent setup page
1 parent d3ec258 commit 23911e4

3 files changed

Lines changed: 126 additions & 13 deletions

File tree

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
// Shown between the page title and the agent catalog.
3+
// Communicates what Cloudflare provides before the user picks an agent.
4+
---
5+
6+
<div class="cf-banner not-content">
7+
<div class="cf-banner-items">
8+
9+
<div class="cf-banner-item">
10+
<p class="cf-banner-item-title">Skills</p>
11+
<p class="cf-banner-item-desc">Reusable prompt packages that teach agents about Cloudflare products and APIs.</p>
12+
<div class="cf-banner-item-links">
13+
<a href="https://github.com/cloudflare/skills" target="_blank" rel="noopener noreferrer">cloudflare/skills &nearr;</a>
14+
</div>
15+
</div>
16+
17+
<div class="cf-banner-item">
18+
<p class="cf-banner-item-title">MCP</p>
19+
<p class="cf-banner-item-desc">Connect agents to your Cloudflare account. Two flavors: <a href="/agents/api-reference/codemode/">Code Mode</a> for broad API coverage across all products, or <a href="https://github.com/cloudflare/mcp-server-cloudflare" target="_blank" rel="noopener noreferrer">domain-specific servers &nearr;</a> for purpose-built tools within one product area.</p>
20+
</div>
21+
22+
<div class="cf-banner-item">
23+
<p class="cf-banner-item-title">CLI</p>
24+
<p class="cf-banner-item-desc">
25+
<a href="/workers/wrangler/">Wrangler</a> for deploying and managing Workers, KV, D1, R2, and more.
26+
<a href="https://blog.cloudflare.com/cf-cli-local-explorer/" target="_blank" rel="noopener noreferrer">cf CLI &nearr;</a> is a next-generation CLI covering every Cloudflare product — in technical preview.
27+
</p>
28+
</div>
29+
30+
</div>
31+
</div>

‎src/pages/agent-setup/index.astro‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { StarlightPageProps } from "@astrojs/starlight/props";
44
import CatalogWithFilter from "~/components/agent-setup/CatalogWithFilter.astro";
55
import AgentComparison from "~/components/agent-setup/AgentComparison.astro";
66
import AgentPrimer from "~/components/agent-setup/AgentPrimer.astro";
7+
import CloudflareToolsBanner from "~/components/agent-setup/CloudflareToolsBanner.astro";
78
import { AGENTS } from "~/components/agent-setup/agents";
89
910
import "~/styles/agent-setup.css";
@@ -14,7 +15,7 @@ const props = {
1415
frontmatter: {
1516
title: "Agent setup",
1617
description:
17-
"Install an agent of your choice, connect skills and MCP servers, and start deploying to Cloudflare — all from your editor or terminal.",
18+
"Cloudflare provides Skills and MCP servers so your agent can seamlessly build on the Cloudflare platform. Pick an agent below to get started.",
1819
template: "splash",
1920
},
2021
hideBreadcrumbs: true,
@@ -27,6 +28,19 @@ const props = {
2728
deploying to Cloudflare — all from your editor or terminal.
2829
</p>
2930

31+
<div class="agent-setup-section" style="margin-top: 3rem;">
32+
<div class="agent-setup-section-header">
33+
<h2>Tools for agents</h2>
34+
<p>Cloudflare is built for agents. Give yours the tools to deploy, manage, and scale on the world's fastest network.</p>
35+
</div>
36+
<CloudflareToolsBanner />
37+
</div>
38+
39+
<div class="agent-setup-section-header">
40+
<h2>Pick your agent</h2>
41+
<p>Select an agent to get step-by-step setup instructions.</p>
42+
</div>
43+
3044
<CatalogWithFilter agents={agents} />
3145

3246
<div class="agent-setup-section" style="margin-top: 5.5rem;">

‎src/styles/agent-setup.css‎

Lines changed: 80 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,73 @@
5252
display: inline;
5353
}
5454

55+
/* ─── Cloudflare tools banner ─── */
56+
.cf-banner {
57+
margin: 0;
58+
}
59+
60+
61+
62+
.cf-banner-items {
63+
display: grid;
64+
grid-template-columns: repeat(3, 1fr);
65+
gap: 0.625rem;
66+
}
67+
68+
@media (max-width: 640px) {
69+
.cf-banner-items {
70+
grid-template-columns: 1fr;
71+
}
72+
}
73+
74+
.cf-banner-item {
75+
display: flex;
76+
flex-direction: column;
77+
gap: 0.375rem;
78+
padding: 0.875rem 1rem;
79+
border: 1px solid var(--color-cl1-gray-8);
80+
border-radius: 10px;
81+
}
82+
83+
:root[data-theme="dark"] .cf-banner-item {
84+
border-color: var(--color-cl1-gray-2);
85+
}
86+
87+
.cf-banner-item-title {
88+
font-size: 0.9375rem;
89+
font-weight: 600;
90+
margin: 0;
91+
}
92+
93+
.cf-banner-item-desc {
94+
font-size: 0.8125rem;
95+
line-height: 1.55;
96+
color: var(--color-cl1-gray-5);
97+
margin: 0;
98+
flex: 1;
99+
}
100+
101+
:root[data-theme="dark"] .cf-banner-item-desc {
102+
color: var(--color-cl1-gray-6);
103+
}
104+
105+
.cf-banner-item-desc a,
106+
.cf-banner-item-links a {
107+
color: var(--sl-color-text-accent);
108+
text-decoration: none;
109+
}
110+
111+
.cf-banner-item-desc a:hover,
112+
.cf-banner-item-links a:hover {
113+
text-decoration: underline;
114+
}
115+
116+
.cf-banner-item-links {
117+
font-size: 0.8125rem;
118+
margin-top: auto;
119+
padding-top: 0.125rem;
120+
}
121+
55122
/* ─── Landing page hero ─── */
56123
.agent-setup-lede {
57124
font-size: 1.0625rem;
@@ -65,6 +132,18 @@
65132
color: var(--color-cl1-gray-7);
66133
}
67134

135+
.agent-setup-lede-highlight {
136+
color: var(--sl-color-text);
137+
font-weight: 600;
138+
background: color-mix(in srgb, var(--color-cl1-orange-5) 10%, transparent);
139+
padding: 0.05em 0.3em;
140+
border-radius: 4px;
141+
}
142+
143+
:root[data-theme="dark"] .agent-setup-lede-highlight {
144+
background: color-mix(in srgb, var(--color-cl1-orange-5) 15%, transparent);
145+
}
146+
68147
/* ─── Agent cards (modernized) ─── */
69148
.agent-setup-card {
70149
position: relative;
@@ -907,6 +986,7 @@
907986
font-weight: 700;
908987
letter-spacing: -0.02em;
909988
margin-bottom: 0.5rem;
989+
color: var(--sl-color-white);
910990
}
911991

912992
.agent-setup-section-header p {
@@ -1476,24 +1556,12 @@
14761556
border: 1px solid var(--color-cl1-gray-8);
14771557
border-radius: 12px;
14781558
background: var(--sl-color-bg);
1479-
transition:
1480-
border-color 0.2s ease,
1481-
transform 0.2s ease;
1482-
}
1483-
1484-
.agent-primer-type:hover {
1485-
border-color: var(--color-cl1-orange-6);
1486-
transform: translateY(-2px);
14871559
}
14881560

14891561
:root[data-theme="dark"] .agent-primer-type {
14901562
border-color: var(--color-cl1-gray-2);
14911563
}
14921564

1493-
:root[data-theme="dark"] .agent-primer-type:hover {
1494-
border-color: var(--color-cl1-orange-5);
1495-
}
1496-
14971565
.agent-primer-type-icon {
14981566
display: inline-flex;
14991567
align-items: center;

0 commit comments

Comments
 (0)