diff --git a/ci/baselines.json b/ci/baselines.json
index 9c32ca2df5..c1b4bece2e 100644
--- a/ci/baselines.json
+++ b/ci/baselines.json
@@ -26,7 +26,7 @@
   "webkit-adoption": {
     "command": "pnpm -s lint:webkit && pnpm -s report:webkit-adoption",
     "pattern": "\\| Violations \\| \\*\\*(\\d+)\\*\\* \\|",
-    "baseline": 160,
+    "baseline": 56,
     "label": "violações das regras do design system"
   }
 }
diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro
index 0753458490..b0c712d4d0 100644
--- a/src/components/PageContent/PageContent.astro
+++ b/src/components/PageContent/PageContent.astro
@@ -1,6 +1,7 @@
 ---
 import FallbackNotice from '../FallbackNotice.astro';
 
+import AgentPageHeader from '~/components/webkit/AgentPageHeader.vue';
 import DocPageHeader from '~/components/webkit/DocPageHeader.vue';
 import ReadableContent from '~/components/webkit/ReadableContent.vue';
 import DocPagination from '@aziontech/webkit/doc-pagination';
@@ -9,11 +10,18 @@ import { rtlLanguages } from '~/i18n/languages';
 import { normalizeLangTag } from '~/i18n/bcp-normalize';
 import { useTranslations } from '~/i18n/util';
 
+import type { CollectionEntry } from 'astro:content';
+
 import { getLanguageFromURL } from '~/util';
 import { getBreadcrumb, getPageFacts, getPageHref, getTreeId, type Lang } from '~/nav/index';
 
 export interface Props {
-	content: { title: string; description?: string; page_header?: boolean };
+	content: {
+		title: string;
+		description?: string;
+		page_header?: boolean;
+		agent?: CollectionEntry<'docs'>['data']['agent'];
+	};
 	previous?: { text: string; link: string };
 	next?: { text: string; link: string };
 }
@@ -65,7 +73,26 @@ const headerLabels = {
 	} -->
 	<article class="pt-(--spacing-md) pb-12">
 		{
-			content.page_header !== false && (
+			content.page_header !== false && content.agent && (
+				<AgentPageHeader
+					class="doc-page-banner mb-8"
+					title={title}
+					breadcrumb={crumbs}
+					description={content.description}
+					markdownHref={markdownHref}
+					locale={bcpLang}
+					labels={headerLabels}
+					lastUpdated={lastUpdated}
+					mark={content.agent.mark}
+					vendor={content.agent.vendor}
+					tags={content.agent.tags}
+					links={content.agent.links}
+					client:load
+				/>
+			)
+		}
+		{
+			content.page_header !== false && !content.agent && (
 				<DocPageHeader
 					class="doc-page-banner mb-8"
 					title={title}
diff --git a/src/components/agents/AgentCardGrid.astro b/src/components/agents/AgentCardGrid.astro
deleted file mode 100644
index ba997d897b..0000000000
--- a/src/components/agents/AgentCardGrid.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-import { getLanguageFromURL } from '~/util';
-import type { Lang } from '~/nav/index';
-import AgentCardGrid from './AgentCardGrid.vue';
-import { agentHrefs } from './server';
-
-interface Props {
-	agent: string;
-}
-
-const { agent } = Astro.props;
-const lang = getLanguageFromURL(Astro.url.pathname) as Lang;
-const hrefs = await agentHrefs(lang);
----
-
-<AgentCardGrid agent={agent} lang={lang} hrefs={hrefs} />
diff --git a/src/components/agents/AgentCardGrid.vue b/src/components/agents/AgentCardGrid.vue
deleted file mode 100644
index 5bd4ed310b..0000000000
--- a/src/components/agents/AgentCardGrid.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-	<DocCardGroup :cols="3">
-		<DocCard
-			v-for="entry in others"
-			:key="entry.slug"
-			:title="entry.name"
-			:overline="entry.vendor"
-			:href="hrefs[entry.slug]"
-		>
-			<template #icon>
-				<AgentMark :name="entry.mark" />
-			</template>
-			{{ t(entry.description, lang) }}
-		</DocCard>
-	</DocCardGroup>
-</template>
-
-<script setup lang="ts">
-import DocCard from '@aziontech/webkit/doc-card';
-import DocCardGroup from '@aziontech/webkit/doc-card-group';
-import { computed } from 'vue';
-
-import AgentMark from '~/components/webkit/AgentMark.vue';
-
-import { agents, t, type Lang } from './data';
-
-const props = defineProps<{ agent: string; lang: Lang; hrefs: Record<string, string> }>();
-
-const others = computed(() => agents.filter((agent) => agent.slug !== props.agent));
-</script>
diff --git a/src/components/agents/AgentCompareTable.astro b/src/components/agents/AgentCompareTable.astro
deleted file mode 100644
index 1e419dc368..0000000000
--- a/src/components/agents/AgentCompareTable.astro
+++ /dev/null
@@ -1,11 +0,0 @@
----
-import { getLanguageFromURL } from '~/util';
-import type { Lang } from '~/nav/index';
-import AgentCompareTable from './AgentCompareTable.vue';
-import { agentHrefs } from './server';
-
-const lang = getLanguageFromURL(Astro.url.pathname) as Lang;
-const hrefs = await agentHrefs(lang);
----
-
-<AgentCompareTable lang={lang} hrefs={hrefs} />
diff --git a/src/components/agents/AgentDocsList.vue b/src/components/agents/AgentDocsList.vue
deleted file mode 100644
index 721ed41fdf..0000000000
--- a/src/components/agents/AgentDocsList.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-	<FrameBox borders="all">
-		<ItemList>
-			<DocItem
-				v-for="item in items"
-				:key="item.title"
-				:title="item.title"
-				:icon="item.icon"
-				:href="item.href"
-				:target="item.target"
-			>
-				{{ item.description }}
-			</DocItem>
-		</ItemList>
-	</FrameBox>
-</template>
-
-<script setup lang="ts">
-import DocItem from '@aziontech/webkit/doc-item';
-import FrameBox from '@aziontech/webkit/frame-box';
-import ItemList from '@aziontech/webkit/item-list';
-import { computed } from 'vue';
-
-import { data, t, type Lang } from './data';
-
-const props = defineProps<{ lang: Lang }>();
-
-const items = computed(() =>
-	data.docs.map((item) => ({
-		title: t(item.title, props.lang),
-		icon: item.icon,
-		href: t(item.href, props.lang),
-		target: item.target ?? '_self',
-		description: t(item.description, props.lang),
-	}))
-);
-</script>
diff --git a/src/components/agents/AgentHeader.astro b/src/components/agents/AgentHeader.astro
deleted file mode 100644
index 48b53219fa..0000000000
--- a/src/components/agents/AgentHeader.astro
+++ /dev/null
@@ -1,47 +0,0 @@
----
-import { getLanguageFromURL } from '~/util';
-import { useTranslations } from '~/i18n/util';
-import { normalizeLangTag } from '~/i18n/bcp-normalize';
-import { getBreadcrumb, type Lang } from '~/nav/index';
-import AgentPageHeader from '~/components/agents/AgentPageHeader.vue';
-import { agentBySlug, agentLinks } from './data';
-import { agentPageUpdated, toolHrefs } from './server';
-
-interface Props {
-	agent: string;
-}
-
-const { agent } = Astro.props;
-const lang = getLanguageFromURL(Astro.url.pathname) as Lang;
-const t = useTranslations(Astro);
-const breadcrumb = (await getBreadcrumb(Astro.url.pathname, lang)).map(({ label, url }) => ({
-	label,
-	href: url,
-}));
-const markdownHref = `${Astro.url.pathname.replace(/\/$/, '')}.md`;
-const entry = agentBySlug(agent);
-const links = entry ? agentLinks(entry, lang, await toolHrefs(lang)) : [];
-const lastUpdated = await agentPageUpdated(Astro.url.pathname, lang);
-const headerLabels = {
-	lastUpdated: t('pageHeader.lastUpdated'),
-	copy: t('pageHeader.copy'),
-	copied: t('pageHeader.copied'),
-	copyTip: t('pageHeader.copyTip'),
-	view: t('pageHeader.view'),
-	viewTip: t('pageHeader.viewTip'),
-	agents: t('pageHeader.agents'),
-	agentsTip: t('pageHeader.agentsTip'),
-};
----
-
-<AgentPageHeader
-	client:load
-	agent={agent}
-	lang={lang}
-	breadcrumb={breadcrumb}
-	markdownHref={markdownHref}
-	locale={normalizeLangTag(lang)}
-	labels={headerLabels}
-	lastUpdated={lastUpdated}
-	links={links}
-/>
diff --git a/src/components/agents/AgentPicker.astro b/src/components/agents/AgentPicker.astro
deleted file mode 100644
index 186e629522..0000000000
--- a/src/components/agents/AgentPicker.astro
+++ /dev/null
@@ -1,11 +0,0 @@
----
-import { getLanguageFromURL } from '~/util';
-import type { Lang } from '~/nav/index';
-import AgentPicker from './AgentPicker.vue';
-import { agentHrefs } from './server';
-
-const lang = getLanguageFromURL(Astro.url.pathname) as Lang;
-const hrefs = await agentHrefs(lang);
----
-
-<AgentPicker client:load lang={lang} hrefs={hrefs} />
diff --git a/src/components/agents/AgentQuickStart.vue b/src/components/agents/AgentQuickStart.vue
deleted file mode 100644
index 908b824881..0000000000
--- a/src/components/agents/AgentQuickStart.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-	<DocSteps>
-		<DocStep v-for="step in steps" :key="step.key" :title="step.title">
-			<p v-if="step.body">
-				<InlineText :text="step.body" :lang="lang" />
-			</p>
-			<Samples v-if="step.samples" :samples="step.samples" :lang="lang" />
-			<DocCallout v-if="step.note" kind="warning">
-				<InlineText :text="step.note" :lang="lang" />
-			</DocCallout>
-			<p v-if="step.link">
-				<a
-					:href="step.link.href"
-					:target="isExternal(step.link.href) ? '_blank' : '_self'"
-					:rel="isExternal(step.link.href) ? 'noreferrer' : undefined"
-					class="group/link inline-flex items-center gap-(--spacing-xxs)"
-				>
-					{{ step.link.label }}
-					<i
-						:class="isExternal(step.link.href) ? 'pi-arrow-up-right' : 'pi-chevron-right'"
-						class="pi text-body-xs"
-						aria-hidden="true"
-					/>
-				</a>
-			</p>
-			<DocPrompt v-if="step.prompt" :title="tryIt" icon="pi pi-sparkles">
-				{{ step.prompt }}
-			</DocPrompt>
-		</DocStep>
-	</DocSteps>
-</template>
-
-<script setup lang="ts">
-import DocCallout from '@aziontech/webkit/doc-callout';
-import DocPrompt from '@aziontech/webkit/doc-prompt';
-import DocStep from '@aziontech/webkit/doc-step';
-import DocSteps from '@aziontech/webkit/doc-steps';
-import { computed } from 'vue';
-
-import { agentBySlug, data, fill, t, type Lang, type Sample } from './data';
-import InlineText from './InlineText.vue';
-import Samples from './Samples.vue';
-
-const props = defineProps<{ agent: string; lang: Lang }>();
-
-interface Step {
-	key: string;
-	title: string;
-	body?: string;
-	samples?: Sample[];
-	note?: string;
-	link?: { label: string; href: string };
-	prompt?: string;
-}
-
-const isExternal = (href: string) => /^(https?:)?\/\//.test(href);
-
-const tryIt = computed(() => t(data.steps.tryIt, props.lang));
-
-const steps = computed<Step[]>(() => {
-	const agent = agentBySlug(props.agent);
-	if (!agent) return [];
-	const vars = { name: agent.name };
-	const lang = props.lang;
-	return [
-		{
-			key: 'install',
-			title: fill(t(data.steps.install, lang), vars),
-			body: t(agent.install.body, lang),
-			samples: agent.install.samples,
-			link: agent.install.link
-				? { label: t(agent.install.link.label, lang), href: agent.install.link.href }
-				: undefined,
-		},
-		{
-			key: 'token',
-			title: t(data.steps.token.title, lang),
-			body: fill(t(data.steps.token.body, lang), vars),
-			link: { label: t(data.steps.token.link, lang), href: data.tokensUrl },
-		},
-		{
-			key: 'connect',
-			title: t(data.steps.connect, lang),
-			body: t(agent.connect.body, lang),
-			samples: agent.connect.samples,
-			note: agent.connect.note ? t(agent.connect.note, lang) : undefined,
-		},
-		{
-			key: 'verify',
-			title: t(data.steps.verify, lang),
-			body: t(agent.verify.body, lang),
-			samples: agent.verify.samples,
-			prompt: data.prompts[lang][1],
-		},
-	];
-});
-</script>
diff --git a/src/components/agents/ConceptCards.vue b/src/components/agents/ConceptCards.vue
deleted file mode 100644
index 2c85a526b9..0000000000
--- a/src/components/agents/ConceptCards.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-	<DocCardGroup :cols="2">
-		<DocCard
-			v-for="item in items"
-			:key="t(item.title, lang)"
-			:title="t(item.title, lang)"
-			:icon="item.icon"
-			:label="t(item.description, lang)"
-		/>
-	</DocCardGroup>
-</template>
-
-<script setup lang="ts">
-import DocCard from '@aziontech/webkit/doc-card';
-import DocCardGroup from '@aziontech/webkit/doc-card-group';
-import { computed } from 'vue';
-
-import { data, t, type Lang } from './data';
-
-const props = defineProps<{ group: 'workflows' | 'concepts' | 'tradeoffs'; lang: Lang }>();
-
-const items = computed(() => data[props.group]);
-</script>
diff --git a/src/components/agents/InlineText.vue b/src/components/agents/InlineText.vue
deleted file mode 100644
index 72619763ba..0000000000
--- a/src/components/agents/InlineText.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-	<template v-for="(token, index) in tokens" :key="index">
-		<code v-if="token.type === 'code'">{{ token.value }}</code>
-		<strong v-else-if="token.type === 'strong'">{{ token.value }}</strong>
-		<a v-else-if="token.type === 'link'" :href="token.href">{{ token.value }}</a>
-		<DocTooltip
-			v-else-if="token.type === 'tooltip' && tooltip(token.key, lang)"
-			:headline="tooltip(token.key, lang)?.headline"
-			:tip="tooltip(token.key, lang)?.tip"
-			:cta="tooltip(token.key, lang)?.cta"
-			:href="tooltip(token.key, lang)?.href"
-		>
-			{{ token.value }}
-		</DocTooltip>
-		<template v-else>{{ token.value }}</template>
-	</template>
-</template>
-
-<script setup lang="ts">
-import DocTooltip from '@aziontech/webkit/doc-tooltip';
-import { computed } from 'vue';
-
-import { tooltip, type Lang } from './data';
-import { tokenize } from './inline';
-
-const props = defineProps<{ text: string; lang: Lang }>();
-
-const tokens = computed(() => tokenize(props.text));
-</script>
diff --git a/src/components/agents/Samples.vue b/src/components/agents/Samples.vue
deleted file mode 100644
index d369557181..0000000000
--- a/src/components/agents/Samples.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-	<div data-doc-block data-doc-chrome>
-		<CodeBlock :tabs="tabs" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import CodeBlock from '@aziontech/webkit/code-block';
-import { computed } from 'vue';
-
-import { agentBySlug, data, t, type Lang, type Sample } from './data';
-
-const props = defineProps<{
-	samples?: Sample[];
-	group?: 'cli' | 'context';
-	agent?: string;
-	lang: Lang;
-}>();
-
-const source = computed<Sample[]>(() => {
-	if (props.samples) return props.samples;
-	if (props.group === 'cli') return data.cli;
-	if (props.group === 'context') {
-		const agent = props.agent ? agentBySlug(props.agent) : undefined;
-		return [
-			{
-				label: agent?.contextFile ?? 'AGENTS.md',
-				language: 'markdown',
-				fileName: agent?.contextFile ?? 'AGENTS.md',
-				code: data.contextPrimer,
-			},
-		];
-	}
-	return [];
-});
-
-const tabs = computed(() =>
-	source.value.map((sample) => ({
-		label: t(sample.label, props.lang),
-		value: t(sample.label, props.lang),
-		code: sample.code,
-		language: sample.language,
-		fileName: sample.fileName,
-	}))
-);
-</script>
diff --git a/src/components/agents/data.ts b/src/components/agents/data.ts
deleted file mode 100644
index 56712f930a..0000000000
--- a/src/components/agents/data.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import raw from '~/data/agent-setup.json';
-import { text } from '~/nav/resolve';
-import type { Lang } from '~/nav/schema';
-
-import type { Agent, AgentSetup, Localized, Sample } from './schema';
-
-export type { Agent, Lang, Localized, Sample };
-
-// server.ts parses this file against `agentSetup` on every build; the islands read it under that type.
-export const data = raw as AgentSetup;
-
-export const agents = data.agents;
-
-export function t(value: Localized | undefined, lang: Lang): string {
-	if (value === undefined) return '';
-	if (typeof value === 'string') return value;
-	return text(value, lang) ?? '';
-}
-
-export function fill(text: string, vars: Record<string, string>): string {
-	return text.replace(/\{(\w+)\}/g, (_, key: string) => vars[key] ?? `{${key}}`);
-}
-
-export function agentBySlug(slug: string): Agent | undefined {
-	return agents.find((agent) => agent.slug === slug);
-}
-
-type LabelGroup = 'filters' | 'values' | 'columns' | 'links';
-
-export function label(group: LabelGroup, key: string, lang: Lang): string {
-	return t(data.labels[group][key] ?? key, lang);
-}
-
-export function agentTags(agent: Agent, lang: Lang): string[] {
-	return [
-		...agent.workflows.map((w) => label('filters', w, lang)),
-		label('values', agent.pricing, lang),
-		label('values', agent.model, lang),
-		label('values', agent.context, lang),
-		...(agent.openSource ? [label('values', 'Open source', lang)] : []),
-	];
-}
-
-export interface AgentLink {
-	label: string;
-	href: string;
-}
-
-export function agentLinks(
-	agent: Agent,
-	lang: Lang,
-	hrefs: { mcp?: string; cli?: string }
-): AgentLink[] {
-	return [
-		{ label: label('links', 'mcp', lang), href: hrefs.mcp },
-		{ label: label('links', 'cli', lang), href: hrefs.cli },
-		{ label: fill(label('links', 'docs', lang), { name: agent.name }), href: agent.docsUrl },
-	].filter((link): link is AgentLink => Boolean(link.href));
-}
-
-export function tooltip(key: string, lang: Lang) {
-	const entry = data.tooltips[key];
-	if (!entry) return undefined;
-	return {
-		headline: entry.headline,
-		tip: t(entry.tip, lang),
-		cta: t(entry.cta, lang),
-		href: t(entry.href, lang),
-	};
-}
diff --git a/src/components/agents/inline.ts b/src/components/agents/inline.ts
deleted file mode 100644
index b69a51b854..0000000000
--- a/src/components/agents/inline.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export type InlineToken =
-	| { type: 'text'; value: string }
-	| { type: 'code'; value: string }
-	| { type: 'strong'; value: string }
-	| { type: 'link'; value: string; href: string }
-	| { type: 'tooltip'; value: string; key: string };
-
-/** An href the docs will render as a link: same-site path, in-page anchor or http(s). */
-export const SAFE_HREF = /^(https?:\/\/|\/(?!\/)|#)/;
-
-const PATTERN = /\[\[(\w+):([^\]]+)\]\]|`([^`]+)`|\*\*([^*]+)\*\*|\[([^\]]+)\]\(([^)\s]+)\)/g;
-
-export function tokenize(text: string): InlineToken[] {
-	const tokens: InlineToken[] = [];
-	let last = 0;
-	for (const match of text.matchAll(PATTERN)) {
-		const index = match.index ?? 0;
-		if (index > last) tokens.push({ type: 'text', value: text.slice(last, index) });
-		const [, tipKey, tipText, code, strong, linkText, href] = match;
-		if (tipKey) tokens.push({ type: 'tooltip', key: tipKey, value: tipText });
-		else if (code !== undefined) tokens.push({ type: 'code', value: code });
-		else if (strong !== undefined) tokens.push({ type: 'strong', value: strong });
-		else if (linkText !== undefined) {
-			tokens.push(
-				SAFE_HREF.test(href)
-					? { type: 'link', value: linkText, href }
-					: { type: 'text', value: linkText }
-			);
-		}
-		last = index + match[0].length;
-	}
-	if (last < text.length) tokens.push({ type: 'text', value: text.slice(last) });
-	return tokens;
-}
diff --git a/src/components/agents/schema.ts b/src/components/agents/schema.ts
deleted file mode 100644
index 649e6d8943..0000000000
--- a/src/components/agents/schema.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { z } from 'astro/zod';
-
-import { SAFE_HREF } from './inline';
-
-const localized = z.union([
-	z.string(),
-	z.object({ en: z.string(), 'pt-br': z.string().optional() }),
-]);
-
-export type Localized = z.infer<typeof localized>;
-
-const href = z.string().regex(SAFE_HREF, 'an href starts with https://, / or #');
-
-const localizedHref = z.union([href, z.object({ en: href, 'pt-br': href.optional() })]);
-
-const sample = z.object({
-	label: localized,
-	language: z.string(),
-	code: z.string(),
-	fileName: z.string().optional(),
-});
-
-export type Sample = z.infer<typeof sample>;
-
-export const MARKS = [
-	'claude',
-	'cursor',
-	'copilot',
-	'windsurf',
-	'codex',
-	'gemini',
-	'opencode',
-] as const;
-
-const agent = z.object({
-	slug: z.string(),
-	namespace: z.string(),
-	name: z.string(),
-	vendor: z.string(),
-	mark: z.enum(MARKS),
-	workflows: z.array(z.string()),
-	pricing: z.string(),
-	model: z.string(),
-	context: z.string(),
-	openSource: z.boolean(),
-	docsUrl: href,
-	contextFile: z.string(),
-	description: localized,
-	install: z.object({
-		body: localized,
-		samples: z.array(sample).optional(),
-		link: z.object({ label: localized, href }).optional(),
-	}),
-	connect: z.object({
-		body: localized,
-		samples: z.array(sample).optional(),
-		note: localized.optional(),
-	}),
-	verify: z.object({ body: localized, samples: z.array(sample).optional() }),
-	tips: z.object({ en: z.array(z.string()), 'pt-br': z.array(z.string()) }),
-});
-
-export type Agent = z.infer<typeof agent>;
-
-const card = z.object({ title: localized, icon: z.string(), description: localized });
-
-const entry = z.object({
-	question: localized,
-	answer: localized,
-	fallbackNote: localized.optional(),
-});
-
-const labelGroup = z.record(z.string(), localized);
-
-export const agentSetup = z.object({
-	mcpUrl: href,
-	tokensUrl: href,
-	agents: z.array(agent).min(1),
-	tools: z.array(z.object({ id: z.string(), description: localized })),
-	cli: z.array(sample),
-	contextPrimer: z.string(),
-	docs: z.array(
-		z.object({
-			title: localized,
-			icon: z.string(),
-			href: localizedHref,
-			target: z.enum(['_self', '_blank']).optional(),
-			description: localized,
-		})
-	),
-	primer: localized,
-	prompts: z.object({ en: z.array(z.string()).min(2), 'pt-br': z.array(z.string()).min(2) }),
-	workflows: z.array(card),
-	concepts: z.array(card),
-	tradeoffs: z.array(card),
-	steps: z.object({
-		install: localized,
-		token: z.object({ title: localized, body: localized, link: localized }),
-		connect: localized,
-		verify: localized,
-		tryIt: localized,
-	}),
-	tooltips: z.record(
-		z.string(),
-		z.object({ headline: z.string(), tip: localized, cta: localized, href: localizedHref })
-	),
-	faq: z.array(entry),
-	surface: z.object({ terminal: localized, editor: localized }),
-	troubleshooting: z.array(entry),
-	labels: z.object({
-		filters: labelGroup,
-		values: labelGroup,
-		columns: labelGroup,
-		links: labelGroup,
-		yes: localized,
-		no: localized,
-		madeBy: localized,
-		plusAzion: localized,
-	}),
-});
-
-export type AgentSetup = z.infer<typeof agentSetup>;
diff --git a/src/components/agents/server.ts b/src/components/agents/server.ts
deleted file mode 100644
index f3a03120b4..0000000000
--- a/src/components/agents/server.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import raw from '~/data/agent-setup.json';
-import { getLastChange, getPageFacts, getPageHref, getTreeHref, type Lang } from '~/nav/index';
-
-import { agents } from './data';
-import { agentSetup } from './schema';
-
-// Every agent page renders through a wrapper that imports this module, so a JSON that drifts from the schema fails the build.
-agentSetup.parse(raw);
-
-/** Each agent's page, by slug, as the navigation resolves it for `lang`. */
-export async function agentHrefs(lang: Lang): Promise<Record<string, string>> {
-	const hrefs: Record<string, string> = {};
-	for (const agent of agents) {
-		const href = await getPageHref(agent.namespace, lang);
-		if (href) hrefs[agent.slug] = href;
-	}
-	return hrefs;
-}
-
-export async function agentPageUpdated(pathname: string, lang: Lang): Promise<string | undefined> {
-	const dates = [
-		(await getPageFacts(pathname, lang))?.updated,
-		getLastChange('src/data/agent-setup.json'),
-	].filter((date): date is string => Boolean(date));
-	if (!dates.length) return undefined;
-	return dates
-		.sort((a, b) => Date.parse(a) - Date.parse(b))
-		.pop()
-		?.slice(0, 10);
-}
-
-/** The landing pages the agent header links to, as the navigation resolves them for `lang`. */
-export async function toolHrefs(lang: Lang): Promise<{ mcp?: string; cli?: string }> {
-	return { mcp: await getTreeHref('mcp', lang), cli: await getTreeHref('cli', lang) };
-}
diff --git a/src/components/agents/AgentCompareTable.vue b/src/components/webkit/AgentCompareTable.vue
similarity index 62%
rename from src/components/agents/AgentCompareTable.vue
rename to src/components/webkit/AgentCompareTable.vue
index 85189171ad..cb5ccec733 100644
--- a/src/components/agents/AgentCompareTable.vue
+++ b/src/components/webkit/AgentCompareTable.vue
@@ -4,13 +4,13 @@
 			<Table.Header>
 				<Table.Row>
 					<Table.HeadCell principal frozen="start">
-						{{ label('columns', 'agent', lang) }}
+						{{ columns.agent }}
 					</Table.HeadCell>
 					<Table.HeadCell v-for="key in BOOLEAN_COLUMNS" :key="key" align="center">
-						{{ label('columns', key, lang) }}
+						{{ columns[key] }}
 					</Table.HeadCell>
 					<Table.HeadCell v-for="key in TAG_COLUMNS" :key="key">
-						{{ label('columns', key, lang) }}
+						{{ columns[key] }}
 					</Table.HeadCell>
 				</Table.Row>
 			</Table.Header>
@@ -33,9 +33,7 @@
 							]"
 							aria-hidden="true"
 						/>
-						<span class="sr-only">{{
-							agent[key] ? t(data.labels.yes, lang) : t(data.labels.no, lang)
-						}}</span>
+						<span class="sr-only">{{ agent[key] ? yes : no }}</span>
 					</Table.Cell>
 					<Table.Cell v-for="key in TAG_COLUMNS" :key="key">
 						<Tag :label="agent[key]" severity="secondary" size="small" />
@@ -49,30 +47,37 @@
 <script setup lang="ts">
 import Table from '@aziontech/webkit/table';
 import Tag from '@aziontech/webkit/tag';
-import { computed } from 'vue';
 
-import AgentMark from '~/components/webkit/AgentMark.vue';
+import AgentMark, { type AgentName } from './AgentMark.vue';
 
-import { agents, data, label, t, type Lang } from './data';
-
-const props = defineProps<{ lang: Lang; hrefs: Record<string, string> }>();
+defineOptions({ name: 'AgentCompareTable' });
 
 const BOOLEAN_COLUMNS = ['terminal', 'ide', 'extension', 'openSource'] as const;
 const TAG_COLUMNS = ['pricing', 'model', 'context'] as const;
 
-const rows = computed(() =>
-	agents.map((agent) => ({
-		id: agent.slug,
-		name: agent.name,
-		mark: agent.mark,
-		href: props.hrefs[agent.slug],
-		terminal: agent.workflows.includes('Terminal'),
-		ide: agent.workflows.includes('IDE'),
-		extension: agent.workflows.includes('Extension'),
-		openSource: agent.openSource,
-		pricing: label('values', agent.pricing, props.lang),
-		model: label('values', agent.model, props.lang),
-		context: label('values', agent.context, props.lang),
-	}))
-);
+export interface AgentCompareRow {
+	id: string;
+	name: string;
+	mark: AgentName;
+	href: string;
+	terminal: boolean;
+	ide: boolean;
+	extension: boolean;
+	openSource: boolean;
+	pricing: string;
+	model: string;
+	context: string;
+}
+
+interface Props {
+	rows: AgentCompareRow[];
+	columns: Record<
+		'agent' | 'terminal' | 'ide' | 'extension' | 'openSource' | 'pricing' | 'model' | 'context',
+		string
+	>;
+	yes: string;
+	no: string;
+}
+
+defineProps<Props>();
 </script>
diff --git a/src/components/agents/AgentFaq.vue b/src/components/webkit/AgentFaq.vue
similarity index 52%
rename from src/components/agents/AgentFaq.vue
rename to src/components/webkit/AgentFaq.vue
index d80054efc4..e2ea7c499f 100644
--- a/src/components/agents/AgentFaq.vue
+++ b/src/components/webkit/AgentFaq.vue
@@ -15,7 +15,7 @@
 				>
 					<!-- eslint-enable webkit/no-style-override -->
 					<p class="m-0">
-						<InlineText :text="item.answer" :lang="lang" />
+						<AgentInlineText :text="item.answer" :tooltips="tooltips" />
 					</p>
 				</Accordion.Content>
 			</Accordion.Item>
@@ -25,26 +25,20 @@
 
 <script setup lang="ts">
 import Accordion from '@aziontech/webkit/accordion';
-import { computed } from 'vue';
 
-import { agentBySlug, data, fill, t, type Lang } from './data';
-import InlineText from './InlineText.vue';
+import AgentInlineText, { type AgentTooltip } from './AgentInlineText.vue';
 
-const props = defineProps<{ agent: string; group: 'faq' | 'troubleshooting'; lang: Lang }>();
+defineOptions({ name: 'AgentFaq' });
 
-const items = computed(() => {
-	const agent = agentBySlug(props.agent);
-	if (!agent) return [];
-	const lang = props.lang;
-	const surfaceKey = agent.workflows.includes('Terminal') ? 'terminal' : 'editor';
-	const surface = t(data.surface[surfaceKey], lang);
-	const vars: Record<string, string> = { name: agent.name, surface, surfaceDe: surface };
-	return data[props.group].map((entry) => ({
-		question: fill(t(entry.question, lang), vars),
-		answer: fill(t(entry.answer, lang), {
-			...vars,
-			note: agent.connect.note ? t(agent.connect.note, lang) : t(entry.fallbackNote, lang),
-		}),
-	}));
-});
+export interface AgentFaqItem {
+	question: string;
+	answer: string;
+}
+
+interface Props {
+	items: AgentFaqItem[];
+	tooltips?: Record<string, AgentTooltip>;
+}
+
+withDefaults(defineProps<Props>(), { tooltips: () => ({}) });
 </script>
diff --git a/src/components/webkit/AgentInlineText.vue b/src/components/webkit/AgentInlineText.vue
new file mode 100644
index 0000000000..1e4db6341c
--- /dev/null
+++ b/src/components/webkit/AgentInlineText.vue
@@ -0,0 +1,75 @@
+<template>
+	<template v-for="(token, index) in tokens" :key="index">
+		<code v-if="token.type === 'code'">{{ token.value }}</code>
+		<strong v-else-if="token.type === 'strong'">{{ token.value }}</strong>
+		<a v-else-if="token.type === 'link'" :href="token.href">{{ token.value }}</a>
+		<DocTooltip
+			v-else-if="token.type === 'tooltip' && tooltips[token.key]"
+			:headline="tooltips[token.key].headline"
+			:tip="tooltips[token.key].tip"
+			:cta="tooltips[token.key].cta"
+			:href="tooltips[token.key].href"
+		>
+			{{ token.value }}
+		</DocTooltip>
+		<template v-else>{{ token.value }}</template>
+	</template>
+</template>
+
+<script setup lang="ts">
+import DocTooltip from '@aziontech/webkit/doc-tooltip';
+import { computed } from 'vue';
+
+defineOptions({ name: 'AgentInlineText', inheritAttrs: false });
+
+export interface AgentTooltip {
+	headline: string;
+	tip: string;
+	cta: string;
+	href: string;
+}
+
+interface Props {
+	text: string;
+	tooltips?: Record<string, AgentTooltip>;
+}
+
+const props = withDefaults(defineProps<Props>(), { tooltips: () => ({}) });
+
+type InlineToken =
+	| { type: 'text'; value: string }
+	| { type: 'code'; value: string }
+	| { type: 'strong'; value: string }
+	| { type: 'link'; value: string; href: string }
+	| { type: 'tooltip'; value: string; key: string };
+
+/** An href the docs will render as a link: same-site path, in-page anchor or http(s). */
+const SAFE_HREF = /^(https?:\/\/|\/(?!\/)|#)/;
+
+const PATTERN = /\[\[(\w+):([^\]]+)\]\]|`([^`]+)`|\*\*([^*]+)\*\*|\[([^\]]+)\]\(([^)\s]+)\)/g;
+
+function tokenize(text: string): InlineToken[] {
+	const tokens: InlineToken[] = [];
+	let last = 0;
+	for (const match of text.matchAll(PATTERN)) {
+		const index = match.index ?? 0;
+		if (index > last) tokens.push({ type: 'text', value: text.slice(last, index) });
+		const [, tipKey, tipText, code, strong, linkText, href] = match;
+		if (tipKey) tokens.push({ type: 'tooltip', key: tipKey, value: tipText });
+		else if (code !== undefined) tokens.push({ type: 'code', value: code });
+		else if (strong !== undefined) tokens.push({ type: 'strong', value: strong });
+		else if (linkText !== undefined) {
+			tokens.push(
+				SAFE_HREF.test(href)
+					? { type: 'link', value: linkText, href }
+					: { type: 'text', value: linkText }
+			);
+		}
+		last = index + match[0].length;
+	}
+	if (last < text.length) tokens.push({ type: 'text', value: text.slice(last) });
+	return tokens;
+}
+
+const tokens = computed(() => tokenize(props.text));
+</script>
diff --git a/src/components/agents/AgentPageHeader.vue b/src/components/webkit/AgentPageHeader.vue
similarity index 66%
rename from src/components/agents/AgentPageHeader.vue
rename to src/components/webkit/AgentPageHeader.vue
index a61636e23d..c28e08a07a 100644
--- a/src/components/agents/AgentPageHeader.vue
+++ b/src/components/webkit/AgentPageHeader.vue
@@ -1,8 +1,6 @@
 <template>
 	<DocPageHeader
-		v-if="agent"
-		data-doc-chrome
-		class="mb-8 mt-2"
+		v-bind="$attrs"
 		:title="title"
 		:description="description"
 		:breadcrumb="breadcrumb"
@@ -18,10 +16,10 @@
 				<span
 					class="flex size-14 shrink-0 items-center justify-center rounded-(--shape-elements) border border-(--border-muted) bg-(--bg-surface-raised) sm:size-16 [&>svg]:size-7 sm:[&>svg]:size-8"
 				>
-					<AgentMark :name="agent.mark" />
+					<AgentMark :name="mark" />
 				</span>
 				<div class="min-w-0 flex-1">
-					<span class="block text-overline-sm uppercase text-(--primary)">{{ agent.vendor }}</span>
+					<span class="block text-overline-sm uppercase text-(--primary)">{{ vendor }}</span>
 					<h1 id="overview" class="m-0 text-heading-xl text-(--text-default)">
 						{{ title }}
 					</h1>
@@ -63,34 +61,31 @@
 
 <script setup lang="ts">
 import Tag from '@aziontech/webkit/tag';
-import { computed } from 'vue';
 
-import AgentMark from '~/components/webkit/AgentMark.vue';
-import DocPageHeader, { type DocPageHeaderLabels } from '~/components/webkit/DocPageHeader.vue';
+import AgentMark, { type AgentName } from './AgentMark.vue';
+import DocPageHeader, { type DocPageHeaderLabels } from './DocPageHeader.vue';
 
-import { agentBySlug, agentTags, data, fill, t, type AgentLink, type Lang } from './data';
+defineOptions({ name: 'AgentPageHeader', inheritAttrs: false });
 
-const props = defineProps<{
-	agent: string;
-	lang: Lang;
-	breadcrumb: { label: string; href?: string }[];
+interface Props {
+	title: string;
+	description?: string;
+	breadcrumb?: { label: string; href?: string }[];
 	markdownHref: string;
 	locale: string;
 	labels: DocPageHeaderLabels;
 	lastUpdated?: string;
-	links: AgentLink[];
-}>();
+	mark: AgentName;
+	vendor: string;
+	tags?: string[];
+	links?: { label: string; href: string }[];
+}
 
-const agent = computed(() => agentBySlug(props.agent));
-const title = computed(() =>
-	agent.value ? fill(t(data.labels.plusAzion, props.lang), { name: agent.value.name }) : ''
-);
-const description = computed(() =>
-	agent.value
-		? `${t(agent.value.description, props.lang)} ${fill(t(data.labels.madeBy, props.lang), {
-				vendor: agent.value.vendor,
-		  })}`
-		: ''
-);
-const tags = computed(() => (agent.value ? agentTags(agent.value, props.lang) : []));
+withDefaults(defineProps<Props>(), {
+	description: '',
+	breadcrumb: () => [],
+	lastUpdated: undefined,
+	tags: () => [],
+	links: () => [],
+});
 </script>
diff --git a/src/components/agents/AgentPicker.vue b/src/components/webkit/AgentPicker.vue
similarity index 55%
rename from src/components/agents/AgentPicker.vue
rename to src/components/webkit/AgentPicker.vue
index 48954c417d..543437a563 100644
--- a/src/components/agents/AgentPicker.vue
+++ b/src/components/webkit/AgentPicker.vue
@@ -14,12 +14,12 @@
 							:key="agent.slug"
 							:title="agent.name"
 							:overline="agent.vendor"
-							:href="hrefs[agent.slug]"
+							:href="agent.href"
 						>
 							<template #icon>
 								<AgentMark :name="agent.mark" />
 							</template>
-							{{ t(agent.description, lang) }}
+							{{ agent.description }}
 						</DocCard>
 					</DocCardGroup>
 				</TabView.Panel>
@@ -34,21 +34,42 @@ import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import TabView from '@aziontech/webkit/tab-view';
 import { computed, ref } from 'vue';
 
-import AgentMark from '~/components/webkit/AgentMark.vue';
+import AgentMark, { type AgentName } from './AgentMark.vue';
 
-import { agents, label, t, type Lang } from './data';
+defineOptions({ name: 'AgentPicker' });
 
-const props = defineProps<{ lang: Lang; hrefs: Record<string, string> }>();
+export interface AgentPickerAgent {
+	slug: string;
+	name: string;
+	vendor: string;
+	mark: AgentName;
+	href: string;
+	description: string;
+	workflows: string[];
+}
 
-const FILTERS = ['All', 'Terminal', 'IDE', 'Extension'] as const;
+export interface AgentPickerFilter {
+	key: string;
+	label: string;
+	workflow?: string;
+}
 
-const filter = ref<string>('All');
+interface Props {
+	agents: AgentPickerAgent[];
+	filters: AgentPickerFilter[];
+}
+
+const props = defineProps<Props>();
+
+const filter = ref<string>(props.filters[0]?.key ?? '');
 
 const groups = computed(() =>
-	FILTERS.map((key) => ({
-		key,
-		label: label('filters', key, props.lang),
-		agents: key === 'All' ? agents : agents.filter((agent) => agent.workflows.includes(key)),
+	props.filters.map((entry) => ({
+		key: entry.key,
+		label: entry.label,
+		agents: entry.workflow
+			? props.agents.filter((agent) => agent.workflows.includes(entry.workflow as string))
+			: props.agents,
 	}))
 );
 </script>
diff --git a/src/components/webkit/AgentQuickStart.vue b/src/components/webkit/AgentQuickStart.vue
new file mode 100644
index 0000000000..fb788dc6a6
--- /dev/null
+++ b/src/components/webkit/AgentQuickStart.vue
@@ -0,0 +1,63 @@
+<template>
+	<DocSteps>
+		<DocStep v-for="step in steps" :key="step.key" :title="step.title">
+			<p v-if="step.body">
+				<AgentInlineText :text="step.body" :tooltips="tooltips" />
+			</p>
+			<AgentSamples v-if="step.samples" :samples="step.samples" />
+			<DocCallout v-if="step.note" kind="warning">
+				<AgentInlineText :text="step.note" :tooltips="tooltips" />
+			</DocCallout>
+			<p v-if="step.link">
+				<a
+					:href="step.link.href"
+					:target="isExternal(step.link.href) ? '_blank' : '_self'"
+					:rel="isExternal(step.link.href) ? 'noreferrer' : undefined"
+					class="group/link inline-flex items-center gap-(--spacing-xxs)"
+				>
+					{{ step.link.label }}
+					<i
+						:class="isExternal(step.link.href) ? 'pi-arrow-up-right' : 'pi-chevron-right'"
+						class="pi text-body-xs"
+						aria-hidden="true"
+					/>
+				</a>
+			</p>
+			<DocPrompt v-if="step.prompt" :title="tryIt" icon="pi pi-sparkles">
+				{{ step.prompt }}
+			</DocPrompt>
+		</DocStep>
+	</DocSteps>
+</template>
+
+<script setup lang="ts">
+import DocCallout from '@aziontech/webkit/doc-callout';
+import DocPrompt from '@aziontech/webkit/doc-prompt';
+import DocStep from '@aziontech/webkit/doc-step';
+import DocSteps from '@aziontech/webkit/doc-steps';
+
+import AgentInlineText, { type AgentTooltip } from './AgentInlineText.vue';
+import AgentSamples, { type AgentSample } from './AgentSamples.vue';
+
+defineOptions({ name: 'AgentQuickStart' });
+
+export interface AgentQuickStartStep {
+	key: string;
+	title: string;
+	body?: string;
+	samples?: AgentSample[];
+	note?: string;
+	link?: { label: string; href: string };
+	prompt?: string;
+}
+
+interface Props {
+	steps: AgentQuickStartStep[];
+	tryIt?: string;
+	tooltips?: Record<string, AgentTooltip>;
+}
+
+withDefaults(defineProps<Props>(), { tryIt: '', tooltips: () => ({}) });
+
+const isExternal = (href: string) => /^(https?:)?\/\//.test(href);
+</script>
diff --git a/src/components/webkit/AgentSamples.vue b/src/components/webkit/AgentSamples.vue
new file mode 100644
index 0000000000..f890861d23
--- /dev/null
+++ b/src/components/webkit/AgentSamples.vue
@@ -0,0 +1,35 @@
+<template>
+	<div data-doc-block data-doc-chrome>
+		<CodeBlock :tabs="tabs" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import CodeBlock from '@aziontech/webkit/code-block';
+import { computed } from 'vue';
+
+defineOptions({ name: 'AgentSamples' });
+
+export interface AgentSample {
+	label: string;
+	language: string;
+	code: string;
+	fileName?: string;
+}
+
+interface Props {
+	samples: AgentSample[];
+}
+
+const props = defineProps<Props>();
+
+const tabs = computed(() =>
+	props.samples.map((sample) => ({
+		label: sample.label,
+		value: sample.label,
+		code: sample.code,
+		language: sample.language,
+		fileName: sample.fileName,
+	}))
+);
+</script>
diff --git a/src/components/agents/AgentToolsTable.vue b/src/components/webkit/AgentToolsTable.vue
similarity index 58%
rename from src/components/agents/AgentToolsTable.vue
rename to src/components/webkit/AgentToolsTable.vue
index 30ac41609e..be08c959dc 100644
--- a/src/components/agents/AgentToolsTable.vue
+++ b/src/components/webkit/AgentToolsTable.vue
@@ -3,12 +3,12 @@
 		<Table border>
 			<Table.Header>
 				<Table.Row>
-					<Table.HeadCell principal>{{ label('columns', 'tool', lang) }}</Table.HeadCell>
-					<Table.HeadCell :grow="2">{{ label('columns', 'what', lang) }}</Table.HeadCell>
+					<Table.HeadCell principal>{{ columns.tool }}</Table.HeadCell>
+					<Table.HeadCell :grow="2">{{ columns.what }}</Table.HeadCell>
 				</Table.Row>
 			</Table.Header>
 			<Table.Body>
-				<Table.Row v-for="tool in rows" :key="tool.id">
+				<Table.Row v-for="tool in tools" :key="tool.id">
 					<Table.Cell principal>
 						<code
 							class="rounded-(--shape-elements) border border-(--border-default) bg-(--bg-hover) px-(--spacing-xs) py-0.5 text-label-code-sm text-(--text-default)"
@@ -26,16 +26,13 @@
 
 <script setup lang="ts">
 import Table from '@aziontech/webkit/table';
-import { computed } from 'vue';
 
-import { data, label, t, type Lang } from './data';
+defineOptions({ name: 'AgentToolsTable' });
 
-const props = defineProps<{ lang: Lang }>();
+interface Props {
+	tools: { id: string; description: string }[];
+	columns: { tool: string; what: string };
+}
 
-const rows = computed(() =>
-	data.tools.map((tool) => ({
-		id: tool.id,
-		description: t(tool.description, props.lang),
-	}))
-);
+defineProps<Props>();
 </script>
diff --git a/src/content.config.ts b/src/content.config.ts
index 61a42950a8..0897e9112c 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -15,6 +15,14 @@ export const baseSchema = z.object({
 	githubURL: z.url().optional(),
 	hasREADME: z.boolean().optional(),
 	page_header: z.boolean().default(true),
+	agent: z
+		.object({
+			mark: z.enum(['claude', 'codex', 'gemini', 'cursor', 'windsurf', 'opencode', 'copilot']),
+			vendor: z.string(),
+			tags: z.array(z.string()),
+			links: z.array(z.object({ label: z.string(), href: z.string() })),
+		})
+		.optional(),
 });
 
 export const homeSchema = baseSchema.extend({
diff --git a/src/content/docs/en/pages/agent-setup/claude-code.mdx b/src/content/docs/en/pages/agent-setup/claude-code.mdx
index 1931e7955a..c74e1ffcfc 100644
--- a/src/content/docs/en/pages/agent-setup/claude-code.mdx
+++ b/src/content/docs/en/pages/agent-setup/claude-code.mdx
@@ -4,24 +4,106 @@ description: Terminal agent that reads your codebase, runs commands, and edits f
 meta_tags: 'claude code, agent setup, mcp'
 namespace: documentation_agent_setup_claude_code
 permalink: /documentation/agent-setup/claude-code/
-page_header: false
+agent:
+  mark: claude
+  vendor: Anthropic
+  tags:
+    - Terminal
+    - Subscription
+    - Locked
+    - Project memory
+  links:
+    - label: Azion MCP server
+      href: /en/documentation/devtools/mcp/
+    - label: Azion CLI
+      href: /en/documentation/devtools/cli/
+    - label: Claude Code docs
+      href: https://docs.anthropic.com/en/docs/claude-code
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/en/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/en/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/en/mcp-tools.mdx';
+import CursorCard from '~/includes/agent-setup/en/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/en/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/en/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/en/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/en/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/en/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="claude-code" />
-
 ## Quick start
 
-<AgentQuickStart client:visible agent="claude-code" lang="en" />
+<AgentQuickStart client:visible
+	tryIt="Try it"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Install Claude Code",
+			"body": "Install the CLI globally, then run it once from your project so it can index the repository.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g @anthropic-ai/claude-code"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Create a Personal Token",
+			"body": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want Claude Code to have, and copy it — it is shown once.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Connect the Azion MCP server",
+			"body": "One command registers the server for every session. Claude Code stores it in your user configuration, so it is not a file you commit.",
+			"samples": [
+				{
+					"label": "Terminal",
+					"language": "bash",
+					"code": "claude mcp add \"azion-mcp\" \"https://mcp.azion.com\" -t http -H \"Authorization: Bearer YOUR_PERSONAL_TOKEN\""
+				}
+			]
+		},
+		{
+			"key": "verify",
+			"title": "Verify, then try a prompt",
+			"body": "`claude mcp list` names the servers it knows about; `/mcp` inside a session lists the tools each one exposes.",
+			"samples": [
+				{
+					"label": "Terminal",
+					"language": "bash",
+					"code": "claude mcp list"
+				}
+			],
+			"prompt": "Deploy this project to Azion with the CLI and give me the application’s domain."
+		}
+	]}
+/>
 
 ## Azion platform access
 
@@ -31,25 +113,34 @@ Three layers, and a connected agent uses all three: the MCP server to look thing
 
 One HTTP endpoint at `https://mcp.azion.com`, authenticated with your Personal Token. It exposes nine tools — six that read a corpus, three that write:
 
-<AgentToolsTable lang="en" />
+<McpTools />
 
 ### Azion CLI
 
 Local builds, deploys and the product commands the API does not cover. Install it once and Claude Code runs it for you — the first `azion login` is interactive, so run that one yourself.
 
-<Samples client:visible group="cli" lang="en" />
+<CliSamples />
 
 ### Agent context
 
 Claude Code reads `CLAUDE.md` at the repository root before it answers. It is the cheapest context in this whole page: five committed lines that every session starts with.
 
-<Samples client:visible group="context" agent="claude-code" lang="en" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "CLAUDE.md",
+			"language": "markdown",
+			"fileName": "CLAUDE.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Agent-friendly docs
 
 Token-efficient references an agent can fetch on its own, with no tool call and no token. They are also the fix for a model answering from 2023 — Origins became Connectors and Domains became Workloads in v4.
 
-<AgentDocsList lang="en" />
+<AgentDocs />
 
 No MCP support in the tool you are using? Prime it by hand, once per session:
 
@@ -77,12 +168,83 @@ Each of these exercises a different half of the connection — the documentation
 
 ## FAQ
 
-<AgentFaq client:load agent="claude-code" group="faq" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
+			"cta": "Set up the CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Should I use the MCP server, the CLI, or both?",
+			"answer": "Both, and they do different jobs. The [[mcp:MCP server]] is how Claude Code looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own."
+		},
+		{
+			"question": "What can Claude Code do with my Personal Token?",
+			"answer": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over."
+		},
+		{
+			"question": "Can Claude Code deploy to Azion without leaving the terminal?",
+			"answer": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself."
+		}
+	]}
+/>
 
 ## Troubleshooting
 
-<AgentFaq client:load agent="claude-code" group="troubleshooting" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		}
+	}}
+	items={[
+		{
+			"question": "The server never connects in Claude Code",
+			"answer": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. Then restart the client: every one of them reads its MCP configuration at startup."
+		},
+		{
+			"question": "It answers with product names that no longer exist",
+			"answer": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself."
+		},
+		{
+			"question": "It writes configuration that the CLI then rejects",
+			"answer": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup."
+		}
+	]}
+/>
 
 ## Other agents
 
-<AgentCardGrid agent="claude-code" />
+<DocCardGroup cols={3}>
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/en/pages/agent-setup/codex.mdx b/src/content/docs/en/pages/agent-setup/codex.mdx
index abe73b72ea..f0b50629b0 100644
--- a/src/content/docs/en/pages/agent-setup/codex.mdx
+++ b/src/content/docs/en/pages/agent-setup/codex.mdx
@@ -4,24 +4,101 @@ description: Terminal agent that runs commands in a sandbox and reads AGENTS.md
 meta_tags: 'codex, agent setup, mcp'
 namespace: documentation_agent_setup_codex
 permalink: /documentation/agent-setup/codex/
-page_header: false
+agent:
+  mark: codex
+  vendor: OpenAI
+  tags:
+    - Terminal
+    - Hybrid
+    - Locked
+    - Project memory
+    - Open source
+  links:
+    - label: Azion MCP server
+      href: /en/documentation/devtools/mcp/
+    - label: Azion CLI
+      href: /en/documentation/devtools/cli/
+    - label: Codex docs
+      href: https://developers.openai.com/codex
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/en/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/en/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/en/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/en/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/en/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/en/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/en/cards/windsurf.mdx';
+import GeminiCliCard from '~/includes/agent-setup/en/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/en/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="codex" />
-
 ## Quick start
 
-<AgentQuickStart client:visible agent="codex" lang="en" />
+<AgentQuickStart client:visible
+	tryIt="Try it"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Install Codex",
+			"body": "Install the CLI globally and sign in with your OpenAI account.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g @openai/codex\ncodex login"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Create a Personal Token",
+			"body": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want Codex to have, and copy it — it is shown once.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Connect the Azion MCP server",
+			"body": "Codex reads one TOML configuration for every project. Add the server there and it is available in each sandbox it opens.",
+			"samples": [
+				{
+					"label": "TOML",
+					"language": "toml",
+					"code": "[mcp.servers.azion]\ntype = \"http\"\nurl = \"https://mcp.azion.com\"\nauth = \"Bearer YOUR_PERSONAL_TOKEN\"",
+					"fileName": "~/.codex/config.toml"
+				}
+			]
+		},
+		{
+			"key": "verify",
+			"title": "Verify, then try a prompt",
+			"body": "Start a session and ask which tools it has. The nine `azion_*` tools are listed alongside its own shell and file tools.",
+			"prompt": "Deploy this project to Azion with the CLI and give me the application’s domain."
+		}
+	]}
+/>
 
 ## Azion platform access
 
@@ -31,25 +108,34 @@ Three layers, and a connected agent uses all three: the MCP server to look thing
 
 One HTTP endpoint at `https://mcp.azion.com`, authenticated with your Personal Token. It exposes nine tools — six that read a corpus, three that write:
 
-<AgentToolsTable lang="en" />
+<McpTools />
 
 ### Azion CLI
 
 Local builds, deploys and the product commands the API does not cover. Install it once and Codex runs it for you — the first `azion login` is interactive, so run that one yourself.
 
-<Samples client:visible group="cli" lang="en" />
+<CliSamples />
 
 ### Agent context
 
 Codex reads `AGENTS.md` at the repository root before it answers. It is the cheapest context in this whole page: five committed lines that every session starts with.
 
-<Samples client:visible group="context" agent="codex" lang="en" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "AGENTS.md",
+			"language": "markdown",
+			"fileName": "AGENTS.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Agent-friendly docs
 
 Token-efficient references an agent can fetch on its own, with no tool call and no token. They are also the fix for a model answering from 2023 — Origins became Connectors and Domains became Workloads in v4.
 
-<AgentDocsList lang="en" />
+<AgentDocs />
 
 No MCP support in the tool you are using? Prime it by hand, once per session:
 
@@ -77,12 +163,83 @@ Each of these exercises a different half of the connection — the documentation
 
 ## FAQ
 
-<AgentFaq client:load agent="codex" group="faq" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
+			"cta": "Set up the CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Should I use the MCP server, the CLI, or both?",
+			"answer": "Both, and they do different jobs. The [[mcp:MCP server]] is how Codex looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own."
+		},
+		{
+			"question": "What can Codex do with my Personal Token?",
+			"answer": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over."
+		},
+		{
+			"question": "Can Codex deploy to Azion without leaving the terminal?",
+			"answer": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself."
+		}
+	]}
+/>
 
 ## Troubleshooting
 
-<AgentFaq client:load agent="codex" group="troubleshooting" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		}
+	}}
+	items={[
+		{
+			"question": "The server never connects in Codex",
+			"answer": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. Then restart the client: every one of them reads its MCP configuration at startup."
+		},
+		{
+			"question": "It answers with product names that no longer exist",
+			"answer": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself."
+		},
+		{
+			"question": "It writes configuration that the CLI then rejects",
+			"answer": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup."
+		}
+	]}
+/>
 
 ## Other agents
 
-<AgentCardGrid agent="codex" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/en/pages/agent-setup/cursor.mdx b/src/content/docs/en/pages/agent-setup/cursor.mdx
index 599c0d5b56..b9ad916277 100644
--- a/src/content/docs/en/pages/agent-setup/cursor.mdx
+++ b/src/content/docs/en/pages/agent-setup/cursor.mdx
@@ -4,24 +4,98 @@ description: AI-first IDE built on VS Code, with multi-file Composer edits and b
 meta_tags: 'cursor, agent setup, mcp'
 namespace: documentation_agent_setup_cursor
 permalink: /documentation/agent-setup/cursor/
-page_header: false
+agent:
+  mark: cursor
+  vendor: Cursor
+  tags:
+    - IDE
+    - Subscription
+    - Multi-provider
+    - Indexed codebase
+  links:
+    - label: Azion MCP server
+      href: /en/documentation/devtools/mcp/
+    - label: Azion CLI
+      href: /en/documentation/devtools/cli/
+    - label: Cursor docs
+      href: https://docs.cursor.com
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/en/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/en/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/en/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/en/cards/claude-code.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/en/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/en/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/en/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/en/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/en/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="cursor" />
-
 ## Quick start
 
-<AgentQuickStart client:visible agent="cursor" lang="en" />
+<AgentQuickStart client:visible
+	tryIt="Try it"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Install Cursor",
+			"body": "Download Cursor for macOS, Windows or Linux, then open your project folder in it.",
+			"link": {
+				"label": "Cursor downloads",
+				"href": "https://cursor.com/downloads"
+			}
+		},
+		{
+			"key": "token",
+			"title": "Create a Personal Token",
+			"body": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want Cursor to have, and copy it — it is shown once.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Connect the Azion MCP server",
+			"body": "Add the server under **Settings › Tools & Integrations › New MCP server**, or commit the file below so the whole team gets it with the repository.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"type\": \"streamable-http\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Token YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": ".cursor/mcp.json"
+				}
+			],
+			"note": "Cursor is the one client that wants `Token` in the Authorization header, not `Bearer`. A `Bearer` prefix here fails with a 401 and no other symptom."
+		},
+		{
+			"key": "verify",
+			"title": "Verify, then try a prompt",
+			"body": "Reopen **Settings › Tools & Integrations**: `azion` should list nine tools. If the row is there but empty, the token is wrong.",
+			"prompt": "Deploy this project to Azion with the CLI and give me the application’s domain."
+		}
+	]}
+/>
 
 ## Azion platform access
 
@@ -31,25 +105,34 @@ Three layers, and a connected agent uses all three: the MCP server to look thing
 
 One HTTP endpoint at `https://mcp.azion.com`, authenticated with your Personal Token. It exposes nine tools — six that read a corpus, three that write:
 
-<AgentToolsTable lang="en" />
+<McpTools />
 
 ### Azion CLI
 
 Local builds, deploys and the product commands the API does not cover. Install it once and Cursor runs it for you — the first `azion login` is interactive, so run that one yourself.
 
-<Samples client:visible group="cli" lang="en" />
+<CliSamples />
 
 ### Agent context
 
 Cursor reads `.cursor/rules/azion.mdc` at the repository root before it answers. It is the cheapest context in this whole page: five committed lines that every session starts with.
 
-<Samples client:visible group="context" agent="cursor" lang="en" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": ".cursor/rules/azion.mdc",
+			"language": "markdown",
+			"fileName": ".cursor/rules/azion.mdc",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Agent-friendly docs
 
 Token-efficient references an agent can fetch on its own, with no tool call and no token. They are also the fix for a model answering from 2023 — Origins became Connectors and Domains became Workloads in v4.
 
-<AgentDocsList lang="en" />
+<AgentDocs />
 
 No MCP support in the tool you are using? Prime it by hand, once per session:
 
@@ -77,12 +160,83 @@ Each of these exercises a different half of the connection — the documentation
 
 ## FAQ
 
-<AgentFaq client:load agent="cursor" group="faq" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
+			"cta": "Set up the CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Should I use the MCP server, the CLI, or both?",
+			"answer": "Both, and they do different jobs. The [[mcp:MCP server]] is how Cursor looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own."
+		},
+		{
+			"question": "What can Cursor do with my Personal Token?",
+			"answer": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over."
+		},
+		{
+			"question": "Can Cursor deploy to Azion without leaving the editor?",
+			"answer": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself."
+		}
+	]}
+/>
 
 ## Troubleshooting
 
-<AgentFaq client:load agent="cursor" group="troubleshooting" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		}
+	}}
+	items={[
+		{
+			"question": "The server never connects in Cursor",
+			"answer": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. Cursor is the one client that wants `Token` in the Authorization header, not `Bearer`. A `Bearer` prefix here fails with a 401 and no other symptom."
+		},
+		{
+			"question": "It answers with product names that no longer exist",
+			"answer": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself."
+		},
+		{
+			"question": "It writes configuration that the CLI then rejects",
+			"answer": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup."
+		}
+	]}
+/>
 
 ## Other agents
 
-<AgentCardGrid agent="cursor" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/en/pages/agent-setup/gemini-cli.mdx b/src/content/docs/en/pages/agent-setup/gemini-cli.mdx
index e75b4b9e13..9dffb904fd 100644
--- a/src/content/docs/en/pages/agent-setup/gemini-cli.mdx
+++ b/src/content/docs/en/pages/agent-setup/gemini-cli.mdx
@@ -4,24 +4,108 @@ description: Open source terminal agent with a free tier. Declare Azion once in
 meta_tags: 'gemini cli, agent setup, mcp'
 namespace: documentation_agent_setup_gemini_cli
 permalink: /documentation/agent-setup/gemini-cli/
-page_header: false
+agent:
+  mark: gemini
+  vendor: Google
+  tags:
+    - Terminal
+    - Hybrid
+    - Locked
+    - Project memory
+    - Open source
+  links:
+    - label: Azion MCP server
+      href: /en/documentation/devtools/mcp/
+    - label: Azion CLI
+      href: /en/documentation/devtools/cli/
+    - label: Gemini CLI docs
+      href: https://github.com/google-gemini/gemini-cli
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/en/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/en/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/en/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/en/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/en/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/en/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/en/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/en/cards/codex.mdx';
+import OpencodeCard from '~/includes/agent-setup/en/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="gemini-cli" />
-
 ## Quick start
 
-<AgentQuickStart client:visible agent="gemini-cli" lang="en" />
+<AgentQuickStart client:visible
+	tryIt="Try it"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Install Gemini CLI",
+			"body": "Install the CLI globally, then run `gemini` once to authenticate with your Google account.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g @google/gemini-cli"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Create a Personal Token",
+			"body": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want Gemini CLI to have, and copy it — it is shown once.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Connect the Azion MCP server",
+			"body": "Declare the server in the user settings file. `httpUrl` is what tells Gemini CLI to speak HTTP rather than to spawn a process.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"httpUrl\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": "~/.gemini/settings.json"
+				}
+			]
+		},
+		{
+			"key": "verify",
+			"title": "Verify, then try a prompt",
+			"body": "Type `/mcp` in a session. It prints every server with its status and the tools it exposes.",
+			"samples": [
+				{
+					"label": "Session",
+					"language": "bash",
+					"code": "/mcp"
+				}
+			],
+			"prompt": "Deploy this project to Azion with the CLI and give me the application’s domain."
+		}
+	]}
+/>
 
 ## Azion platform access
 
@@ -31,25 +115,34 @@ Three layers, and a connected agent uses all three: the MCP server to look thing
 
 One HTTP endpoint at `https://mcp.azion.com`, authenticated with your Personal Token. It exposes nine tools — six that read a corpus, three that write:
 
-<AgentToolsTable lang="en" />
+<McpTools />
 
 ### Azion CLI
 
 Local builds, deploys and the product commands the API does not cover. Install it once and Gemini CLI runs it for you — the first `azion login` is interactive, so run that one yourself.
 
-<Samples client:visible group="cli" lang="en" />
+<CliSamples />
 
 ### Agent context
 
 Gemini CLI reads `GEMINI.md` at the repository root before it answers. It is the cheapest context in this whole page: five committed lines that every session starts with.
 
-<Samples client:visible group="context" agent="gemini-cli" lang="en" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "GEMINI.md",
+			"language": "markdown",
+			"fileName": "GEMINI.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Agent-friendly docs
 
 Token-efficient references an agent can fetch on its own, with no tool call and no token. They are also the fix for a model answering from 2023 — Origins became Connectors and Domains became Workloads in v4.
 
-<AgentDocsList lang="en" />
+<AgentDocs />
 
 No MCP support in the tool you are using? Prime it by hand, once per session:
 
@@ -77,12 +170,83 @@ Each of these exercises a different half of the connection — the documentation
 
 ## FAQ
 
-<AgentFaq client:load agent="gemini-cli" group="faq" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
+			"cta": "Set up the CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Should I use the MCP server, the CLI, or both?",
+			"answer": "Both, and they do different jobs. The [[mcp:MCP server]] is how Gemini CLI looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own."
+		},
+		{
+			"question": "What can Gemini CLI do with my Personal Token?",
+			"answer": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over."
+		},
+		{
+			"question": "Can Gemini CLI deploy to Azion without leaving the terminal?",
+			"answer": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself."
+		}
+	]}
+/>
 
 ## Troubleshooting
 
-<AgentFaq client:load agent="gemini-cli" group="troubleshooting" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		}
+	}}
+	items={[
+		{
+			"question": "The server never connects in Gemini CLI",
+			"answer": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. Then restart the client: every one of them reads its MCP configuration at startup."
+		},
+		{
+			"question": "It answers with product names that no longer exist",
+			"answer": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself."
+		},
+		{
+			"question": "It writes configuration that the CLI then rejects",
+			"answer": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup."
+		}
+	]}
+/>
 
 ## Other agents
 
-<AgentCardGrid agent="gemini-cli" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/en/pages/agent-setup/github-copilot.mdx b/src/content/docs/en/pages/agent-setup/github-copilot.mdx
index 6c97223598..8f9ce333be 100644
--- a/src/content/docs/en/pages/agent-setup/github-copilot.mdx
+++ b/src/content/docs/en/pages/agent-setup/github-copilot.mdx
@@ -4,24 +4,99 @@ description: Agent mode inside VS Code, with workspace context and native pull-r
 meta_tags: 'github copilot, agent setup, mcp'
 namespace: documentation_agent_setup_github_copilot
 permalink: /documentation/agent-setup/github-copilot/
-page_header: false
+agent:
+  mark: copilot
+  vendor: GitHub
+  tags:
+    - Extension
+    - IDE
+    - Subscription
+    - Multi-provider
+    - Indexed codebase
+  links:
+    - label: Azion MCP server
+      href: /en/documentation/devtools/mcp/
+    - label: Azion CLI
+      href: /en/documentation/devtools/cli/
+    - label: GitHub Copilot docs
+      href: https://docs.github.com/copilot
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/en/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/en/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/en/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/en/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/en/cards/cursor.mdx';
+import WindsurfCard from '~/includes/agent-setup/en/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/en/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/en/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/en/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="github-copilot" />
-
 ## Quick start
 
-<AgentQuickStart client:visible agent="github-copilot" lang="en" />
+<AgentQuickStart client:visible
+	tryIt="Try it"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Install GitHub Copilot",
+			"body": "Install the GitHub Copilot extension in VS Code, then switch the Chat view to **Agent** mode — tool calls only happen in agent mode.",
+			"link": {
+				"label": "GitHub Copilot in VS Code",
+				"href": "https://marketplace.visualstudio.com/items?itemName=GitHub.copilot"
+			}
+		},
+		{
+			"key": "token",
+			"title": "Create a Personal Token",
+			"body": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want GitHub Copilot to have, and copy it — it is shown once.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Connect the Azion MCP server",
+			"body": "Declare the server in the project. The file lives in the repository, so every contributor with a token gets the same tools.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"type\": \"http\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": ".vscode/mcp.json"
+				}
+			],
+			"note": "Commit the file, never the token. VS Code resolves `${input:azion-token}` by prompting once per window, which keeps the credential out of git history."
+		},
+		{
+			"key": "verify",
+			"title": "Verify, then try a prompt",
+			"body": "Open the tools picker in the Chat view: `azion` appears with its nine tools once VS Code has started the server.",
+			"prompt": "Deploy this project to Azion with the CLI and give me the application’s domain."
+		}
+	]}
+/>
 
 ## Azion platform access
 
@@ -31,25 +106,34 @@ Three layers, and a connected agent uses all three: the MCP server to look thing
 
 One HTTP endpoint at `https://mcp.azion.com`, authenticated with your Personal Token. It exposes nine tools — six that read a corpus, three that write:
 
-<AgentToolsTable lang="en" />
+<McpTools />
 
 ### Azion CLI
 
 Local builds, deploys and the product commands the API does not cover. Install it once and GitHub Copilot runs it for you — the first `azion login` is interactive, so run that one yourself.
 
-<Samples client:visible group="cli" lang="en" />
+<CliSamples />
 
 ### Agent context
 
 GitHub Copilot reads `.github/copilot-instructions.md` at the repository root before it answers. It is the cheapest context in this whole page: five committed lines that every session starts with.
 
-<Samples client:visible group="context" agent="github-copilot" lang="en" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": ".github/copilot-instructions.md",
+			"language": "markdown",
+			"fileName": ".github/copilot-instructions.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Agent-friendly docs
 
 Token-efficient references an agent can fetch on its own, with no tool call and no token. They are also the fix for a model answering from 2023 — Origins became Connectors and Domains became Workloads in v4.
 
-<AgentDocsList lang="en" />
+<AgentDocs />
 
 No MCP support in the tool you are using? Prime it by hand, once per session:
 
@@ -77,12 +161,83 @@ Each of these exercises a different half of the connection — the documentation
 
 ## FAQ
 
-<AgentFaq client:load agent="github-copilot" group="faq" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
+			"cta": "Set up the CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Should I use the MCP server, the CLI, or both?",
+			"answer": "Both, and they do different jobs. The [[mcp:MCP server]] is how GitHub Copilot looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own."
+		},
+		{
+			"question": "What can GitHub Copilot do with my Personal Token?",
+			"answer": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over."
+		},
+		{
+			"question": "Can GitHub Copilot deploy to Azion without leaving the editor?",
+			"answer": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself."
+		}
+	]}
+/>
 
 ## Troubleshooting
 
-<AgentFaq client:load agent="github-copilot" group="troubleshooting" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		}
+	}}
+	items={[
+		{
+			"question": "The server never connects in GitHub Copilot",
+			"answer": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. Commit the file, never the token. VS Code resolves `${input:azion-token}` by prompting once per window, which keeps the credential out of git history."
+		},
+		{
+			"question": "It answers with product names that no longer exist",
+			"answer": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself."
+		},
+		{
+			"question": "It writes configuration that the CLI then rejects",
+			"answer": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup."
+		}
+	]}
+/>
 
 ## Other agents
 
-<AgentCardGrid agent="github-copilot" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/en/pages/agent-setup/index.mdx b/src/content/docs/en/pages/agent-setup/index.mdx
index d816731d14..e8d5cf73c6 100644
--- a/src/content/docs/en/pages/agent-setup/index.mdx
+++ b/src/content/docs/en/pages/agent-setup/index.mdx
@@ -6,22 +6,231 @@ namespace: documentation_agent_setup
 permalink: /documentation/agent-setup/
 ---
 
-import AgentPicker from '~/components/agents/AgentPicker.astro';
-import AgentCompareTable from '~/components/agents/AgentCompareTable.astro';
-import ConceptCards from '~/components/agents/ConceptCards.vue';
+import AgentCompareTable from '~/components/webkit/AgentCompareTable.vue';
+import AgentPicker from '~/components/webkit/AgentPicker.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
 ## Pick your agent
 
 Select an agent to get step-by-step setup instructions.
 
-<AgentPicker />
+<AgentPicker client:load
+	filters={[
+		{
+			"key": "All",
+			"label": "All"
+		},
+		{
+			"key": "Terminal",
+			"label": "Terminal",
+			"workflow": "Terminal"
+		},
+		{
+			"key": "IDE",
+			"label": "IDE",
+			"workflow": "IDE"
+		},
+		{
+			"key": "Extension",
+			"label": "Extension",
+			"workflow": "Extension"
+		}
+	]}
+	agents={[
+		{
+			"slug": "claude-code",
+			"name": "Claude Code",
+			"vendor": "Anthropic",
+			"mark": "claude",
+			"href": "/en/documentation/agent-setup/claude-code/",
+			"description": "Terminal agent that reads your codebase, runs commands, and edits files. One CLI command connects the Azion MCP server.",
+			"workflows": [
+				"Terminal"
+			]
+		},
+		{
+			"slug": "cursor",
+			"name": "Cursor",
+			"vendor": "Cursor",
+			"mark": "cursor",
+			"href": "/en/documentation/agent-setup/cursor/",
+			"description": "AI-first IDE built on VS Code, with multi-file Composer edits and background agents. Azion plugs into its MCP settings.",
+			"workflows": [
+				"IDE"
+			]
+		},
+		{
+			"slug": "github-copilot",
+			"name": "GitHub Copilot",
+			"vendor": "GitHub",
+			"mark": "copilot",
+			"href": "/en/documentation/agent-setup/github-copilot/",
+			"description": "Agent mode inside VS Code, with workspace context and native pull-request integration. A file in the project connects Azion.",
+			"workflows": [
+				"Extension",
+				"IDE"
+			]
+		},
+		{
+			"slug": "windsurf",
+			"name": "Windsurf",
+			"vendor": "Cognition",
+			"mark": "windsurf",
+			"href": "/en/documentation/agent-setup/windsurf/",
+			"description": "Agentic IDE built around Cascade for multi-step tasks. Connects to Azion through mcp-remote.",
+			"workflows": [
+				"IDE"
+			]
+		},
+		{
+			"slug": "codex",
+			"name": "Codex",
+			"vendor": "OpenAI",
+			"mark": "codex",
+			"href": "/en/documentation/agent-setup/codex/",
+			"description": "Terminal agent that runs commands in a sandbox and reads AGENTS.md natively. Azion goes in config.toml.",
+			"workflows": [
+				"Terminal"
+			]
+		},
+		{
+			"slug": "gemini-cli",
+			"name": "Gemini CLI",
+			"vendor": "Google",
+			"mark": "gemini",
+			"href": "/en/documentation/agent-setup/gemini-cli/",
+			"description": "Open source terminal agent with a free tier. Declare Azion once in settings.json and verify with /mcp.",
+			"workflows": [
+				"Terminal"
+			]
+		},
+		{
+			"slug": "opencode",
+			"name": "OpenCode",
+			"vendor": "SST",
+			"mark": "opencode",
+			"href": "/en/documentation/agent-setup/opencode/",
+			"description": "Open source, provider-agnostic terminal agent. Azion is one entry in its MCP block, whichever model you point it at.",
+			"workflows": [
+				"Terminal"
+			]
+		}
+	]}
+/>
 
 Using something else that speaks MCP? The server is one HTTP endpoint — point your client at `mcp.azion.com` with a Personal Token and the nine tools show up.
 
 ## Compare agents
 
-<AgentCompareTable />
+<AgentCompareTable
+	columns={{
+		"agent": "Agent",
+		"terminal": "Terminal",
+		"ide": "IDE",
+		"extension": "Extension",
+		"openSource": "Open source",
+		"pricing": "Pricing",
+		"model": "Model",
+		"context": "Context"
+	}}
+	yes="Yes"
+	no="No"
+	rows={[
+		{
+			"id": "claude-code",
+			"name": "Claude Code",
+			"mark": "claude",
+			"href": "/en/documentation/agent-setup/claude-code/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": false,
+			"pricing": "Subscription",
+			"model": "Locked",
+			"context": "Project memory"
+		},
+		{
+			"id": "cursor",
+			"name": "Cursor",
+			"mark": "cursor",
+			"href": "/en/documentation/agent-setup/cursor/",
+			"terminal": false,
+			"ide": true,
+			"extension": false,
+			"openSource": false,
+			"pricing": "Subscription",
+			"model": "Multi-provider",
+			"context": "Indexed codebase"
+		},
+		{
+			"id": "github-copilot",
+			"name": "GitHub Copilot",
+			"mark": "copilot",
+			"href": "/en/documentation/agent-setup/github-copilot/",
+			"terminal": false,
+			"ide": true,
+			"extension": true,
+			"openSource": false,
+			"pricing": "Subscription",
+			"model": "Multi-provider",
+			"context": "Indexed codebase"
+		},
+		{
+			"id": "windsurf",
+			"name": "Windsurf",
+			"mark": "windsurf",
+			"href": "/en/documentation/agent-setup/windsurf/",
+			"terminal": false,
+			"ide": true,
+			"extension": false,
+			"openSource": false,
+			"pricing": "Subscription",
+			"model": "Multi-provider",
+			"context": "Indexed codebase"
+		},
+		{
+			"id": "codex",
+			"name": "Codex",
+			"mark": "codex",
+			"href": "/en/documentation/agent-setup/codex/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": true,
+			"pricing": "Hybrid",
+			"model": "Locked",
+			"context": "Project memory"
+		},
+		{
+			"id": "gemini-cli",
+			"name": "Gemini CLI",
+			"mark": "gemini",
+			"href": "/en/documentation/agent-setup/gemini-cli/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": true,
+			"pricing": "Hybrid",
+			"model": "Locked",
+			"context": "Project memory"
+		},
+		{
+			"id": "opencode",
+			"name": "OpenCode",
+			"mark": "opencode",
+			"href": "/en/documentation/agent-setup/opencode/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": true,
+			"pricing": "BYOK",
+			"model": "Multi-provider",
+			"context": "Project memory"
+		}
+	]}
+/>
 
 <DocCallout kind="note" label="Every agent listed connects to the Azion MCP server. The workflow columns say where the tool runs, not what it can do." />
 
@@ -31,12 +240,27 @@ Common types, concepts, and tradeoffs.
 
 ### Workflow
 
-<ConceptCards group="workflows" lang="en" />
+<DocCardGroup cols={2}>
+	<DocCard title="Terminal" icon="pi pi-desktop" label="Runs in a shell. Best for automation, scripting, and CI pipelines." />
+	<DocCard title="IDE" icon="pi pi-code" label="A full editor with the agent first-class: visual diffs and multi-file edits." />
+	<DocCard title="Extension" icon="pi pi-th-large" label="Plugs into the editor you already use. Lightest install, keeps your setup." />
+	<DocCard title="Cloud" icon="pi pi-cloud" label="Hosted, with no local install. Ideal for asynchronous, long-running work — and the shape the AI Assistant in the Console takes." />
+</DocCardGroup>
 
 ### Key concepts
 
-<ConceptCards group="concepts" lang="en" />
+<DocCardGroup cols={2}>
+	<DocCard title="MCP" icon="pi pi-server" label="The Model Context Protocol — the standard that lets an agent call external tools. Azion ships one MCP server, at mcp.azion.com, and every agent on this page speaks it." />
+	<DocCard title="Agent context" icon="pi pi-file" label="The files an agent reads before it answers: llms.txt for the documentation index, AGENTS.md for your project’s own conventions." />
+	<DocCard title="Model flexibility" icon="pi pi-sliders-h" label="Locked ties you to the maker’s own models. BYOK takes your provider key. Multi-provider switches between several." />
+	<DocCard title="Context" icon="pi pi-database" label="Session forgets at the end of a conversation. Project memory persists in a file you commit. Indexed codebase keeps a searchable index of the whole repository." />
+</DocCardGroup>
 
 ### Common tradeoffs
 
-<ConceptCards group="tradeoffs" lang="en" />
+<DocCardGroup cols={2}>
+	<DocCard title="Cloud vs. local" icon="pi pi-cloud-upload" label="Cloud runs long tasks without holding your machine, and sends your code somewhere. Local keeps everything on disk, and stops when your laptop does." />
+	<DocCard title="Proprietary vs. open source" icon="pi pi-github" label="Open source can be audited, forked and self-hosted. Proprietary tends to ship the newest capability first." />
+	<DocCard title="Locked model vs. BYOK" icon="pi pi-key" label="A locked model is tuned for its own agent and priced as one subscription. BYOK lets you choose the model per task and pay per token." />
+	<DocCard title="Session vs. indexed codebase" icon="pi pi-search" label="An index answers questions about code nobody opened, at the cost of a copy of the repository. A session only knows what it was shown." />
+</DocCardGroup>
diff --git a/src/content/docs/en/pages/agent-setup/opencode.mdx b/src/content/docs/en/pages/agent-setup/opencode.mdx
index c29eb1e800..cb5b96dc46 100644
--- a/src/content/docs/en/pages/agent-setup/opencode.mdx
+++ b/src/content/docs/en/pages/agent-setup/opencode.mdx
@@ -4,24 +4,109 @@ description: Open source, provider-agnostic terminal agent. Azion is one entry i
 meta_tags: 'opencode, agent setup, mcp'
 namespace: documentation_agent_setup_opencode
 permalink: /documentation/agent-setup/opencode/
-page_header: false
+agent:
+  mark: opencode
+  vendor: SST
+  tags:
+    - Terminal
+    - BYOK
+    - Multi-provider
+    - Project memory
+    - Open source
+  links:
+    - label: Azion MCP server
+      href: /en/documentation/devtools/mcp/
+    - label: Azion CLI
+      href: /en/documentation/devtools/cli/
+    - label: OpenCode docs
+      href: https://opencode.ai/docs
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/en/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/en/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/en/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/en/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/en/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/en/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/en/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/en/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/en/cards/gemini-cli.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="opencode" />
-
 ## Quick start
 
-<AgentQuickStart client:visible agent="opencode" lang="en" />
+<AgentQuickStart client:visible
+	tryIt="Try it"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Install OpenCode",
+			"body": "Install the TUI globally, then point it at whichever model provider you already pay for.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g opencode-ai"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Create a Personal Token",
+			"body": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want OpenCode to have, and copy it — it is shown once.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Connect the Azion MCP server",
+			"body": "OpenCode keeps MCP servers in the project’s own configuration file, next to the model choice.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"$schema\": \"https://opencode.ai/config.json\",\n  \"mcp\": {\n    \"azion\": {\n      \"type\": \"remote\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": "opencode.json"
+				}
+			],
+			"note": "The server is `\"type\": \"remote\"` — OpenCode’s word for an HTTP endpoint. `\"local\"` is for a command it spawns itself, and it will try to execute the URL."
+		},
+		{
+			"key": "verify",
+			"title": "Verify, then try a prompt",
+			"body": "Run `/mcp` in the TUI. Each server prints its connection state and tool count.",
+			"samples": [
+				{
+					"label": "Session",
+					"language": "bash",
+					"code": "/mcp"
+				}
+			],
+			"prompt": "Deploy this project to Azion with the CLI and give me the application’s domain."
+		}
+	]}
+/>
 
 ## Azion platform access
 
@@ -31,25 +116,34 @@ Three layers, and a connected agent uses all three: the MCP server to look thing
 
 One HTTP endpoint at `https://mcp.azion.com`, authenticated with your Personal Token. It exposes nine tools — six that read a corpus, three that write:
 
-<AgentToolsTable lang="en" />
+<McpTools />
 
 ### Azion CLI
 
 Local builds, deploys and the product commands the API does not cover. Install it once and OpenCode runs it for you — the first `azion login` is interactive, so run that one yourself.
 
-<Samples client:visible group="cli" lang="en" />
+<CliSamples />
 
 ### Agent context
 
 OpenCode reads `AGENTS.md` at the repository root before it answers. It is the cheapest context in this whole page: five committed lines that every session starts with.
 
-<Samples client:visible group="context" agent="opencode" lang="en" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "AGENTS.md",
+			"language": "markdown",
+			"fileName": "AGENTS.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Agent-friendly docs
 
 Token-efficient references an agent can fetch on its own, with no tool call and no token. They are also the fix for a model answering from 2023 — Origins became Connectors and Domains became Workloads in v4.
 
-<AgentDocsList lang="en" />
+<AgentDocs />
 
 No MCP support in the tool you are using? Prime it by hand, once per session:
 
@@ -77,12 +171,83 @@ Each of these exercises a different half of the connection — the documentation
 
 ## FAQ
 
-<AgentFaq client:load agent="opencode" group="faq" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
+			"cta": "Set up the CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Should I use the MCP server, the CLI, or both?",
+			"answer": "Both, and they do different jobs. The [[mcp:MCP server]] is how OpenCode looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own."
+		},
+		{
+			"question": "What can OpenCode do with my Personal Token?",
+			"answer": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over."
+		},
+		{
+			"question": "Can OpenCode deploy to Azion without leaving the terminal?",
+			"answer": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself."
+		}
+	]}
+/>
 
 ## Troubleshooting
 
-<AgentFaq client:load agent="opencode" group="troubleshooting" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		}
+	}}
+	items={[
+		{
+			"question": "The server never connects in OpenCode",
+			"answer": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. The server is `\"type\": \"remote\"` — OpenCode’s word for an HTTP endpoint. `\"local\"` is for a command it spawns itself, and it will try to execute the URL."
+		},
+		{
+			"question": "It answers with product names that no longer exist",
+			"answer": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself."
+		},
+		{
+			"question": "It writes configuration that the CLI then rejects",
+			"answer": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup."
+		}
+	]}
+/>
 
 ## Other agents
 
-<AgentCardGrid agent="opencode" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+</DocCardGroup>
diff --git a/src/content/docs/en/pages/agent-setup/windsurf.mdx b/src/content/docs/en/pages/agent-setup/windsurf.mdx
index 4a7839798c..b6660a4d19 100644
--- a/src/content/docs/en/pages/agent-setup/windsurf.mdx
+++ b/src/content/docs/en/pages/agent-setup/windsurf.mdx
@@ -4,24 +4,98 @@ description: Agentic IDE built around Cascade for multi-step tasks. Connects to
 meta_tags: 'windsurf, agent setup, mcp'
 namespace: documentation_agent_setup_windsurf
 permalink: /documentation/agent-setup/windsurf/
-page_header: false
+agent:
+  mark: windsurf
+  vendor: Cognition
+  tags:
+    - IDE
+    - Subscription
+    - Multi-provider
+    - Indexed codebase
+  links:
+    - label: Azion MCP server
+      href: /en/documentation/devtools/mcp/
+    - label: Azion CLI
+      href: /en/documentation/devtools/cli/
+    - label: Windsurf docs
+      href: https://docs.windsurf.com
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/en/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/en/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/en/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/en/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/en/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/en/cards/github-copilot.mdx';
+import CodexCard from '~/includes/agent-setup/en/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/en/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/en/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="windsurf" />
-
 ## Quick start
 
-<AgentQuickStart client:visible agent="windsurf" lang="en" />
+<AgentQuickStart client:visible
+	tryIt="Try it"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Install Windsurf",
+			"body": "Download Windsurf, open your project, and start a Cascade conversation.",
+			"link": {
+				"label": "Windsurf downloads",
+				"href": "https://windsurf.com/download"
+			}
+		},
+		{
+			"key": "token",
+			"title": "Create a Personal Token",
+			"body": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want Windsurf to have, and copy it — it is shown once.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Connect the Azion MCP server",
+			"body": "Windsurf speaks stdio, so it reaches an HTTP server through `mcp-remote`. Node.js 18 or newer has to be on your PATH.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"mcp-remote\",\n        \"https://mcp.azion.com\",\n        \"--header\",\n        \"Authorization: Bearer YOUR_PERSONAL_TOKEN\"\n      ]\n    }\n  }\n}",
+					"fileName": ".codeium/windsurf/mcp_config.json"
+				}
+			],
+			"note": "`mcp-remote` is a bridge, not an Azion package: it turns the stdio transport Windsurf speaks into the HTTP one the server speaks. Cascade shows it as a local process."
+		},
+		{
+			"key": "verify",
+			"title": "Verify, then try a prompt",
+			"body": "Open the MCP panel in Cascade and refresh. `azion` should report nine tools; a red row usually means `npx` could not reach the network.",
+			"prompt": "Deploy this project to Azion with the CLI and give me the application’s domain."
+		}
+	]}
+/>
 
 ## Azion platform access
 
@@ -31,25 +105,34 @@ Three layers, and a connected agent uses all three: the MCP server to look thing
 
 One HTTP endpoint at `https://mcp.azion.com`, authenticated with your Personal Token. It exposes nine tools — six that read a corpus, three that write:
 
-<AgentToolsTable lang="en" />
+<McpTools />
 
 ### Azion CLI
 
 Local builds, deploys and the product commands the API does not cover. Install it once and Windsurf runs it for you — the first `azion login` is interactive, so run that one yourself.
 
-<Samples client:visible group="cli" lang="en" />
+<CliSamples />
 
 ### Agent context
 
 Windsurf reads `.windsurfrules` at the repository root before it answers. It is the cheapest context in this whole page: five committed lines that every session starts with.
 
-<Samples client:visible group="context" agent="windsurf" lang="en" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": ".windsurfrules",
+			"language": "markdown",
+			"fileName": ".windsurfrules",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Agent-friendly docs
 
 Token-efficient references an agent can fetch on its own, with no tool call and no token. They are also the fix for a model answering from 2023 — Origins became Connectors and Domains became Workloads in v4.
 
-<AgentDocsList lang="en" />
+<AgentDocs />
 
 No MCP support in the tool you are using? Prime it by hand, once per session:
 
@@ -77,12 +160,83 @@ Each of these exercises a different half of the connection — the documentation
 
 ## FAQ
 
-<AgentFaq client:load agent="windsurf" group="faq" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
+			"cta": "See the nine tools",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
+			"cta": "Set up the CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Should I use the MCP server, the CLI, or both?",
+			"answer": "Both, and they do different jobs. The [[mcp:MCP server]] is how Windsurf looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own."
+		},
+		{
+			"question": "What can Windsurf do with my Personal Token?",
+			"answer": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over."
+		},
+		{
+			"question": "Can Windsurf deploy to Azion without leaving the editor?",
+			"answer": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself."
+		}
+	]}
+/>
 
 ## Troubleshooting
 
-<AgentFaq client:load agent="windsurf" group="troubleshooting" lang="en" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
+			"cta": "Platform overview",
+			"href": "/en/documentation/platform/"
+		}
+	}}
+	items={[
+		{
+			"question": "The server never connects in Windsurf",
+			"answer": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. `mcp-remote` is a bridge, not an Azion package: it turns the stdio transport Windsurf speaks into the HTTP one the server speaks. Cascade shows it as a local process."
+		},
+		{
+			"question": "It answers with product names that no longer exist",
+			"answer": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself."
+		},
+		{
+			"question": "It writes configuration that the CLI then rejects",
+			"answer": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup."
+		}
+	]}
+/>
 
 ## Other agents
 
-<AgentCardGrid agent="windsurf" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/claude-code.mdx b/src/content/docs/pt-br/pages/agent-setup/claude-code.mdx
index 027333ba06..879b880693 100644
--- a/src/content/docs/pt-br/pages/agent-setup/claude-code.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/claude-code.mdx
@@ -4,24 +4,106 @@ description: Agente de terminal que lê sua base de código, executa comandos e
 meta_tags: 'claude code, configuração de agentes, mcp'
 namespace: documentation_agent_setup_claude_code
 permalink: /documentacao/agent-setup/claude-code/
-page_header: false
+agent:
+  mark: claude
+  vendor: Anthropic
+  tags:
+    - Terminal
+    - Assinatura
+    - Fixo
+    - Memória de projeto
+  links:
+    - label: Servidor MCP da Azion
+      href: /pt-br/documentacao/devtools/mcp/
+    - label: Azion CLI
+      href: /pt-br/documentacao/devtools/cli/
+    - label: Documentação do Claude Code
+      href: https://docs.anthropic.com/en/docs/claude-code
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/pt-br/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/pt-br/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/pt-br/mcp-tools.mdx';
+import CursorCard from '~/includes/agent-setup/pt-br/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/pt-br/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/pt-br/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/pt-br/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/pt-br/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/pt-br/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="claude-code" />
-
 ## Início rápido
 
-<AgentQuickStart client:visible agent="claude-code" lang="pt-br" />
+<AgentQuickStart client:visible
+	tryIt="Experimente"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Instale o Claude Code",
+			"body": "Instale a CLI globalmente e execute-a uma vez a partir do seu projeto para que ela indexe o repositório.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g @anthropic-ai/claude-code"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Crie um Personal Token",
+			"body": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o Claude Code tenha, e copie-o — ele é mostrado uma única vez.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Conecte o servidor MCP da Azion",
+			"body": "Um comando registra o servidor para todas as sessões. O Claude Code o guarda na sua configuração de usuário, então não é um arquivo que você commita.",
+			"samples": [
+				{
+					"label": "Terminal",
+					"language": "bash",
+					"code": "claude mcp add \"azion-mcp\" \"https://mcp.azion.com\" -t http -H \"Authorization: Bearer YOUR_PERSONAL_TOKEN\""
+				}
+			]
+		},
+		{
+			"key": "verify",
+			"title": "Verifique, depois teste um prompt",
+			"body": "`claude mcp list` lista os servidores que ele conhece; `/mcp` dentro de uma sessão lista as ferramentas que cada um expõe.",
+			"samples": [
+				{
+					"label": "Terminal",
+					"language": "bash",
+					"code": "claude mcp list"
+				}
+			],
+			"prompt": "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação."
+		}
+	]}
+/>
 
 ## Acesso à plataforma Azion
 
@@ -31,25 +113,34 @@ Três camadas, e um agente conectado usa as três: o servidor MCP para consultar
 
 Um endpoint HTTP em `https://mcp.azion.com`, autenticado com seu Personal Token. Ele expõe nove ferramentas — seis que leem um corpus, três que escrevem:
 
-<AgentToolsTable lang="pt-br" />
+<McpTools />
 
 ### Azion CLI
 
 Builds locais, deploys e os comandos de produto que a API não cobre. Instale uma vez e o Claude Code a executa por você — o primeiro `azion login` é interativo, então execute esse você mesmo.
 
-<Samples client:visible group="cli" lang="pt-br" />
+<CliSamples />
 
 ### Contexto do agente
 
 O Claude Code lê `CLAUDE.md` na raiz do repositório antes de responder. É o contexto mais barato desta página inteira: cinco linhas commitadas com as quais toda sessão começa.
 
-<Samples client:visible group="context" agent="claude-code" lang="pt-br" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "CLAUDE.md",
+			"language": "markdown",
+			"fileName": "CLAUDE.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Documentação amigável para agentes
 
 Referências econômicas em tokens que um agente busca sozinho, sem chamada de ferramenta e sem token. Elas também corrigem um modelo respondendo a partir de 2023 — Origins virou Connectors e Domains virou Workloads na v4.
 
-<AgentDocsList lang="pt-br" />
+<AgentDocs />
 
 Sua ferramenta não suporta MCP? Prepare-a manualmente, uma vez por sessão:
 
@@ -77,12 +168,83 @@ Cada um destes exercita uma parte diferente da conexão — a busca na documenta
 
 ## FAQ
 
-<AgentFaq client:load agent="claude-code" group="faq" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre.",
+			"cta": "Configure a CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Devo usar o servidor MCP, a CLI ou ambos?",
+			"answer": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o Claude Code consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
+		},
+		{
+			"question": "O que o Claude Code pode fazer com meu Personal Token?",
+			"answer": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
+		},
+		{
+			"question": "O Claude Code consegue fazer deploy na Azion sem sair do terminal?",
+			"answer": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
+		}
+	]}
+/>
 
 ## Solução de problemas
 
-<AgentFaq client:load agent="claude-code" group="troubleshooting" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		}
+	}}
+	items={[
+		{
+			"question": "O servidor nunca conecta no Claude Code",
+			"answer": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. Depois reinicie o cliente: todos eles leem a configuração de MCP na inicialização."
+		},
+		{
+			"question": "Ele responde com nomes de produtos que não existem mais",
+			"answer": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
+		},
+		{
+			"question": "Ele escreve configuração que a CLI depois rejeita",
+			"answer": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
+		}
+	]}
+/>
 
 ## Outros agentes
 
-<AgentCardGrid agent="claude-code" />
+<DocCardGroup cols={3}>
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/codex.mdx b/src/content/docs/pt-br/pages/agent-setup/codex.mdx
index 58224b9688..7aa8bd66ed 100644
--- a/src/content/docs/pt-br/pages/agent-setup/codex.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/codex.mdx
@@ -4,24 +4,101 @@ description: Agente de terminal que executa comandos em um sandbox e lê AGENTS.
 meta_tags: 'codex, configuração de agentes, mcp'
 namespace: documentation_agent_setup_codex
 permalink: /documentacao/agent-setup/codex/
-page_header: false
+agent:
+  mark: codex
+  vendor: OpenAI
+  tags:
+    - Terminal
+    - Híbrido
+    - Fixo
+    - Memória de projeto
+    - Código aberto
+  links:
+    - label: Servidor MCP da Azion
+      href: /pt-br/documentacao/devtools/mcp/
+    - label: Azion CLI
+      href: /pt-br/documentacao/devtools/cli/
+    - label: Documentação do Codex
+      href: https://developers.openai.com/codex
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/pt-br/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/pt-br/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/pt-br/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/pt-br/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/pt-br/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/pt-br/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/pt-br/cards/windsurf.mdx';
+import GeminiCliCard from '~/includes/agent-setup/pt-br/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/pt-br/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="codex" />
-
 ## Início rápido
 
-<AgentQuickStart client:visible agent="codex" lang="pt-br" />
+<AgentQuickStart client:visible
+	tryIt="Experimente"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Instale o Codex",
+			"body": "Instale a CLI globalmente e entre com sua conta da OpenAI.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g @openai/codex\ncodex login"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Crie um Personal Token",
+			"body": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o Codex tenha, e copie-o — ele é mostrado uma única vez.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Conecte o servidor MCP da Azion",
+			"body": "O Codex lê uma configuração TOML para todos os projetos. Adicione o servidor ali e ele fica disponível em cada sandbox que o Codex abre.",
+			"samples": [
+				{
+					"label": "TOML",
+					"language": "toml",
+					"code": "[mcp.servers.azion]\ntype = \"http\"\nurl = \"https://mcp.azion.com\"\nauth = \"Bearer YOUR_PERSONAL_TOKEN\"",
+					"fileName": "~/.codex/config.toml"
+				}
+			]
+		},
+		{
+			"key": "verify",
+			"title": "Verifique, depois teste um prompt",
+			"body": "Inicie uma sessão e pergunte quais ferramentas ele tem. As nove ferramentas `azion_*` aparecem ao lado das ferramentas de shell e de arquivos dele.",
+			"prompt": "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação."
+		}
+	]}
+/>
 
 ## Acesso à plataforma Azion
 
@@ -31,25 +108,34 @@ Três camadas, e um agente conectado usa as três: o servidor MCP para consultar
 
 Um endpoint HTTP em `https://mcp.azion.com`, autenticado com seu Personal Token. Ele expõe nove ferramentas — seis que leem um corpus, três que escrevem:
 
-<AgentToolsTable lang="pt-br" />
+<McpTools />
 
 ### Azion CLI
 
 Builds locais, deploys e os comandos de produto que a API não cobre. Instale uma vez e o Codex a executa por você — o primeiro `azion login` é interativo, então execute esse você mesmo.
 
-<Samples client:visible group="cli" lang="pt-br" />
+<CliSamples />
 
 ### Contexto do agente
 
 O Codex lê `AGENTS.md` na raiz do repositório antes de responder. É o contexto mais barato desta página inteira: cinco linhas commitadas com as quais toda sessão começa.
 
-<Samples client:visible group="context" agent="codex" lang="pt-br" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "AGENTS.md",
+			"language": "markdown",
+			"fileName": "AGENTS.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Documentação amigável para agentes
 
 Referências econômicas em tokens que um agente busca sozinho, sem chamada de ferramenta e sem token. Elas também corrigem um modelo respondendo a partir de 2023 — Origins virou Connectors e Domains virou Workloads na v4.
 
-<AgentDocsList lang="pt-br" />
+<AgentDocs />
 
 Sua ferramenta não suporta MCP? Prepare-a manualmente, uma vez por sessão:
 
@@ -77,12 +163,83 @@ Cada um destes exercita uma parte diferente da conexão — a busca na documenta
 
 ## FAQ
 
-<AgentFaq client:load agent="codex" group="faq" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre.",
+			"cta": "Configure a CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Devo usar o servidor MCP, a CLI ou ambos?",
+			"answer": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o Codex consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
+		},
+		{
+			"question": "O que o Codex pode fazer com meu Personal Token?",
+			"answer": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
+		},
+		{
+			"question": "O Codex consegue fazer deploy na Azion sem sair do terminal?",
+			"answer": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
+		}
+	]}
+/>
 
 ## Solução de problemas
 
-<AgentFaq client:load agent="codex" group="troubleshooting" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		}
+	}}
+	items={[
+		{
+			"question": "O servidor nunca conecta no Codex",
+			"answer": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. Depois reinicie o cliente: todos eles leem a configuração de MCP na inicialização."
+		},
+		{
+			"question": "Ele responde com nomes de produtos que não existem mais",
+			"answer": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
+		},
+		{
+			"question": "Ele escreve configuração que a CLI depois rejeita",
+			"answer": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
+		}
+	]}
+/>
 
 ## Outros agentes
 
-<AgentCardGrid agent="codex" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/cursor.mdx b/src/content/docs/pt-br/pages/agent-setup/cursor.mdx
index b94302b552..cd0c162115 100644
--- a/src/content/docs/pt-br/pages/agent-setup/cursor.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/cursor.mdx
@@ -4,24 +4,98 @@ description: IDE AI-first construída sobre o VS Code, com edições multiarquiv
 meta_tags: 'cursor, configuração de agentes, mcp'
 namespace: documentation_agent_setup_cursor
 permalink: /documentacao/agent-setup/cursor/
-page_header: false
+agent:
+  mark: cursor
+  vendor: Cursor
+  tags:
+    - IDE
+    - Assinatura
+    - Multiprovedor
+    - Codebase indexado
+  links:
+    - label: Servidor MCP da Azion
+      href: /pt-br/documentacao/devtools/mcp/
+    - label: Azion CLI
+      href: /pt-br/documentacao/devtools/cli/
+    - label: Documentação do Cursor
+      href: https://docs.cursor.com
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/pt-br/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/pt-br/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/pt-br/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/pt-br/cards/claude-code.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/pt-br/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/pt-br/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/pt-br/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/pt-br/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/pt-br/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="cursor" />
-
 ## Início rápido
 
-<AgentQuickStart client:visible agent="cursor" lang="pt-br" />
+<AgentQuickStart client:visible
+	tryIt="Experimente"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Instale o Cursor",
+			"body": "Baixe o Cursor para macOS, Windows ou Linux e abra a pasta do seu projeto nele.",
+			"link": {
+				"label": "Downloads do Cursor",
+				"href": "https://cursor.com/downloads"
+			}
+		},
+		{
+			"key": "token",
+			"title": "Crie um Personal Token",
+			"body": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o Cursor tenha, e copie-o — ele é mostrado uma única vez.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Conecte o servidor MCP da Azion",
+			"body": "Adicione o servidor em **Settings › Tools & Integrations › New MCP server**, ou commite o arquivo abaixo para que toda a equipe o receba com o repositório.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"type\": \"streamable-http\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Token YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": ".cursor/mcp.json"
+				}
+			],
+			"note": "O Cursor é o único cliente que exige `Token` no cabeçalho Authorization, não `Bearer`. Um prefixo `Bearer` aqui falha com 401 e nenhum outro sintoma."
+		},
+		{
+			"key": "verify",
+			"title": "Verifique, depois teste um prompt",
+			"body": "Reabra **Settings › Tools & Integrations**: `azion` deve listar nove ferramentas. Se a linha está lá mas vazia, o token está errado.",
+			"prompt": "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação."
+		}
+	]}
+/>
 
 ## Acesso à plataforma Azion
 
@@ -31,25 +105,34 @@ Três camadas, e um agente conectado usa as três: o servidor MCP para consultar
 
 Um endpoint HTTP em `https://mcp.azion.com`, autenticado com seu Personal Token. Ele expõe nove ferramentas — seis que leem um corpus, três que escrevem:
 
-<AgentToolsTable lang="pt-br" />
+<McpTools />
 
 ### Azion CLI
 
 Builds locais, deploys e os comandos de produto que a API não cobre. Instale uma vez e o Cursor a executa por você — o primeiro `azion login` é interativo, então execute esse você mesmo.
 
-<Samples client:visible group="cli" lang="pt-br" />
+<CliSamples />
 
 ### Contexto do agente
 
 O Cursor lê `.cursor/rules/azion.mdc` na raiz do repositório antes de responder. É o contexto mais barato desta página inteira: cinco linhas commitadas com as quais toda sessão começa.
 
-<Samples client:visible group="context" agent="cursor" lang="pt-br" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": ".cursor/rules/azion.mdc",
+			"language": "markdown",
+			"fileName": ".cursor/rules/azion.mdc",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Documentação amigável para agentes
 
 Referências econômicas em tokens que um agente busca sozinho, sem chamada de ferramenta e sem token. Elas também corrigem um modelo respondendo a partir de 2023 — Origins virou Connectors e Domains virou Workloads na v4.
 
-<AgentDocsList lang="pt-br" />
+<AgentDocs />
 
 Sua ferramenta não suporta MCP? Prepare-a manualmente, uma vez por sessão:
 
@@ -77,12 +160,83 @@ Cada um destes exercita uma parte diferente da conexão — a busca na documenta
 
 ## FAQ
 
-<AgentFaq client:load agent="cursor" group="faq" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre.",
+			"cta": "Configure a CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Devo usar o servidor MCP, a CLI ou ambos?",
+			"answer": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o Cursor consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
+		},
+		{
+			"question": "O que o Cursor pode fazer com meu Personal Token?",
+			"answer": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
+		},
+		{
+			"question": "O Cursor consegue fazer deploy na Azion sem sair do editor?",
+			"answer": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
+		}
+	]}
+/>
 
 ## Solução de problemas
 
-<AgentFaq client:load agent="cursor" group="troubleshooting" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		}
+	}}
+	items={[
+		{
+			"question": "O servidor nunca conecta no Cursor",
+			"answer": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. O Cursor é o único cliente que exige `Token` no cabeçalho Authorization, não `Bearer`. Um prefixo `Bearer` aqui falha com 401 e nenhum outro sintoma."
+		},
+		{
+			"question": "Ele responde com nomes de produtos que não existem mais",
+			"answer": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
+		},
+		{
+			"question": "Ele escreve configuração que a CLI depois rejeita",
+			"answer": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
+		}
+	]}
+/>
 
 ## Outros agentes
 
-<AgentCardGrid agent="cursor" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/gemini-cli.mdx b/src/content/docs/pt-br/pages/agent-setup/gemini-cli.mdx
index 1b8f8ad2a4..839673c79f 100644
--- a/src/content/docs/pt-br/pages/agent-setup/gemini-cli.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/gemini-cli.mdx
@@ -4,24 +4,108 @@ description: Agente de terminal de código aberto com um plano gratuito. Declare
 meta_tags: 'gemini cli, configuração de agentes, mcp'
 namespace: documentation_agent_setup_gemini_cli
 permalink: /documentacao/agent-setup/gemini-cli/
-page_header: false
+agent:
+  mark: gemini
+  vendor: Google
+  tags:
+    - Terminal
+    - Híbrido
+    - Fixo
+    - Memória de projeto
+    - Código aberto
+  links:
+    - label: Servidor MCP da Azion
+      href: /pt-br/documentacao/devtools/mcp/
+    - label: Azion CLI
+      href: /pt-br/documentacao/devtools/cli/
+    - label: Documentação do Gemini CLI
+      href: https://github.com/google-gemini/gemini-cli
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/pt-br/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/pt-br/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/pt-br/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/pt-br/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/pt-br/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/pt-br/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/pt-br/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/pt-br/cards/codex.mdx';
+import OpencodeCard from '~/includes/agent-setup/pt-br/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="gemini-cli" />
-
 ## Início rápido
 
-<AgentQuickStart client:visible agent="gemini-cli" lang="pt-br" />
+<AgentQuickStart client:visible
+	tryIt="Experimente"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Instale o Gemini CLI",
+			"body": "Instale a CLI globalmente e execute `gemini` uma vez para autenticar com sua conta Google.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g @google/gemini-cli"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Crie um Personal Token",
+			"body": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o Gemini CLI tenha, e copie-o — ele é mostrado uma única vez.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Conecte o servidor MCP da Azion",
+			"body": "Declare o servidor no arquivo de configurações do usuário. `httpUrl` é o que diz à Gemini CLI para falar HTTP em vez de iniciar um processo.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"httpUrl\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": "~/.gemini/settings.json"
+				}
+			]
+		},
+		{
+			"key": "verify",
+			"title": "Verifique, depois teste um prompt",
+			"body": "Digite `/mcp` em uma sessão. Ele imprime cada servidor com seu status e as ferramentas que expõe.",
+			"samples": [
+				{
+					"label": "Session",
+					"language": "bash",
+					"code": "/mcp"
+				}
+			],
+			"prompt": "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação."
+		}
+	]}
+/>
 
 ## Acesso à plataforma Azion
 
@@ -31,25 +115,34 @@ Três camadas, e um agente conectado usa as três: o servidor MCP para consultar
 
 Um endpoint HTTP em `https://mcp.azion.com`, autenticado com seu Personal Token. Ele expõe nove ferramentas — seis que leem um corpus, três que escrevem:
 
-<AgentToolsTable lang="pt-br" />
+<McpTools />
 
 ### Azion CLI
 
 Builds locais, deploys e os comandos de produto que a API não cobre. Instale uma vez e o Gemini CLI a executa por você — o primeiro `azion login` é interativo, então execute esse você mesmo.
 
-<Samples client:visible group="cli" lang="pt-br" />
+<CliSamples />
 
 ### Contexto do agente
 
 O Gemini CLI lê `GEMINI.md` na raiz do repositório antes de responder. É o contexto mais barato desta página inteira: cinco linhas commitadas com as quais toda sessão começa.
 
-<Samples client:visible group="context" agent="gemini-cli" lang="pt-br" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "GEMINI.md",
+			"language": "markdown",
+			"fileName": "GEMINI.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Documentação amigável para agentes
 
 Referências econômicas em tokens que um agente busca sozinho, sem chamada de ferramenta e sem token. Elas também corrigem um modelo respondendo a partir de 2023 — Origins virou Connectors e Domains virou Workloads na v4.
 
-<AgentDocsList lang="pt-br" />
+<AgentDocs />
 
 Sua ferramenta não suporta MCP? Prepare-a manualmente, uma vez por sessão:
 
@@ -77,12 +170,83 @@ Cada um destes exercita uma parte diferente da conexão — a busca na documenta
 
 ## FAQ
 
-<AgentFaq client:load agent="gemini-cli" group="faq" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre.",
+			"cta": "Configure a CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Devo usar o servidor MCP, a CLI ou ambos?",
+			"answer": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o Gemini CLI consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
+		},
+		{
+			"question": "O que o Gemini CLI pode fazer com meu Personal Token?",
+			"answer": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
+		},
+		{
+			"question": "O Gemini CLI consegue fazer deploy na Azion sem sair do terminal?",
+			"answer": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
+		}
+	]}
+/>
 
 ## Solução de problemas
 
-<AgentFaq client:load agent="gemini-cli" group="troubleshooting" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		}
+	}}
+	items={[
+		{
+			"question": "O servidor nunca conecta no Gemini CLI",
+			"answer": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. Depois reinicie o cliente: todos eles leem a configuração de MCP na inicialização."
+		},
+		{
+			"question": "Ele responde com nomes de produtos que não existem mais",
+			"answer": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
+		},
+		{
+			"question": "Ele escreve configuração que a CLI depois rejeita",
+			"answer": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
+		}
+	]}
+/>
 
 ## Outros agentes
 
-<AgentCardGrid agent="gemini-cli" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/github-copilot.mdx b/src/content/docs/pt-br/pages/agent-setup/github-copilot.mdx
index d8befc764c..4b3caffe31 100644
--- a/src/content/docs/pt-br/pages/agent-setup/github-copilot.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/github-copilot.mdx
@@ -4,24 +4,99 @@ description: Modo agente dentro do VS Code, com contexto do workspace e integra
 meta_tags: 'github copilot, configuração de agentes, mcp'
 namespace: documentation_agent_setup_github_copilot
 permalink: /documentacao/agent-setup/github-copilot/
-page_header: false
+agent:
+  mark: copilot
+  vendor: GitHub
+  tags:
+    - Extensão
+    - IDE
+    - Assinatura
+    - Multiprovedor
+    - Codebase indexado
+  links:
+    - label: Servidor MCP da Azion
+      href: /pt-br/documentacao/devtools/mcp/
+    - label: Azion CLI
+      href: /pt-br/documentacao/devtools/cli/
+    - label: Documentação do GitHub Copilot
+      href: https://docs.github.com/copilot
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/pt-br/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/pt-br/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/pt-br/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/pt-br/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/pt-br/cards/cursor.mdx';
+import WindsurfCard from '~/includes/agent-setup/pt-br/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/pt-br/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/pt-br/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/pt-br/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="github-copilot" />
-
 ## Início rápido
 
-<AgentQuickStart client:visible agent="github-copilot" lang="pt-br" />
+<AgentQuickStart client:visible
+	tryIt="Experimente"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Instale o GitHub Copilot",
+			"body": "Instale a extensão GitHub Copilot no VS Code e mude a visualização de Chat para o modo **Agent** — chamadas de ferramentas só acontecem no modo agente.",
+			"link": {
+				"label": "GitHub Copilot no VS Code",
+				"href": "https://marketplace.visualstudio.com/items?itemName=GitHub.copilot"
+			}
+		},
+		{
+			"key": "token",
+			"title": "Crie um Personal Token",
+			"body": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o GitHub Copilot tenha, e copie-o — ele é mostrado uma única vez.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Conecte o servidor MCP da Azion",
+			"body": "Declare o servidor no projeto. O arquivo vive no repositório, então todo colaborador com um token recebe as mesmas ferramentas.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"type\": \"http\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": ".vscode/mcp.json"
+				}
+			],
+			"note": "Commite o arquivo, nunca o token. O VS Code resolve `${input:azion-token}` perguntando uma vez por janela, o que mantém a credencial fora do histórico do git."
+		},
+		{
+			"key": "verify",
+			"title": "Verifique, depois teste um prompt",
+			"body": "Abra o seletor de ferramentas na visualização de Chat: `azion` aparece com suas nove ferramentas assim que o VS Code inicia o servidor.",
+			"prompt": "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação."
+		}
+	]}
+/>
 
 ## Acesso à plataforma Azion
 
@@ -31,25 +106,34 @@ Três camadas, e um agente conectado usa as três: o servidor MCP para consultar
 
 Um endpoint HTTP em `https://mcp.azion.com`, autenticado com seu Personal Token. Ele expõe nove ferramentas — seis que leem um corpus, três que escrevem:
 
-<AgentToolsTable lang="pt-br" />
+<McpTools />
 
 ### Azion CLI
 
 Builds locais, deploys e os comandos de produto que a API não cobre. Instale uma vez e o GitHub Copilot a executa por você — o primeiro `azion login` é interativo, então execute esse você mesmo.
 
-<Samples client:visible group="cli" lang="pt-br" />
+<CliSamples />
 
 ### Contexto do agente
 
 O GitHub Copilot lê `.github/copilot-instructions.md` na raiz do repositório antes de responder. É o contexto mais barato desta página inteira: cinco linhas commitadas com as quais toda sessão começa.
 
-<Samples client:visible group="context" agent="github-copilot" lang="pt-br" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": ".github/copilot-instructions.md",
+			"language": "markdown",
+			"fileName": ".github/copilot-instructions.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Documentação amigável para agentes
 
 Referências econômicas em tokens que um agente busca sozinho, sem chamada de ferramenta e sem token. Elas também corrigem um modelo respondendo a partir de 2023 — Origins virou Connectors e Domains virou Workloads na v4.
 
-<AgentDocsList lang="pt-br" />
+<AgentDocs />
 
 Sua ferramenta não suporta MCP? Prepare-a manualmente, uma vez por sessão:
 
@@ -77,12 +161,83 @@ Cada um destes exercita uma parte diferente da conexão — a busca na documenta
 
 ## FAQ
 
-<AgentFaq client:load agent="github-copilot" group="faq" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre.",
+			"cta": "Configure a CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Devo usar o servidor MCP, a CLI ou ambos?",
+			"answer": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o GitHub Copilot consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
+		},
+		{
+			"question": "O que o GitHub Copilot pode fazer com meu Personal Token?",
+			"answer": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
+		},
+		{
+			"question": "O GitHub Copilot consegue fazer deploy na Azion sem sair do editor?",
+			"answer": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
+		}
+	]}
+/>
 
 ## Solução de problemas
 
-<AgentFaq client:load agent="github-copilot" group="troubleshooting" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		}
+	}}
+	items={[
+		{
+			"question": "O servidor nunca conecta no GitHub Copilot",
+			"answer": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. Commite o arquivo, nunca o token. O VS Code resolve `${input:azion-token}` perguntando uma vez por janela, o que mantém a credencial fora do histórico do git."
+		},
+		{
+			"question": "Ele responde com nomes de produtos que não existem mais",
+			"answer": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
+		},
+		{
+			"question": "Ele escreve configuração que a CLI depois rejeita",
+			"answer": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
+		}
+	]}
+/>
 
 ## Outros agentes
 
-<AgentCardGrid agent="github-copilot" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/index.mdx b/src/content/docs/pt-br/pages/agent-setup/index.mdx
index ef749318a1..445da731dc 100644
--- a/src/content/docs/pt-br/pages/agent-setup/index.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/index.mdx
@@ -6,22 +6,231 @@ namespace: documentation_agent_setup
 permalink: /documentacao/agent-setup/
 ---
 
-import AgentPicker from '~/components/agents/AgentPicker.astro';
-import AgentCompareTable from '~/components/agents/AgentCompareTable.astro';
-import ConceptCards from '~/components/agents/ConceptCards.vue';
+import AgentCompareTable from '~/components/webkit/AgentCompareTable.vue';
+import AgentPicker from '~/components/webkit/AgentPicker.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
 ## Escolha seu agente
 
 Selecione um agente para ver as instruções de configuração passo a passo.
 
-<AgentPicker />
+<AgentPicker client:load
+	filters={[
+		{
+			"key": "All",
+			"label": "Todos"
+		},
+		{
+			"key": "Terminal",
+			"label": "Terminal",
+			"workflow": "Terminal"
+		},
+		{
+			"key": "IDE",
+			"label": "IDE",
+			"workflow": "IDE"
+		},
+		{
+			"key": "Extension",
+			"label": "Extensão",
+			"workflow": "Extension"
+		}
+	]}
+	agents={[
+		{
+			"slug": "claude-code",
+			"name": "Claude Code",
+			"vendor": "Anthropic",
+			"mark": "claude",
+			"href": "/pt-br/documentacao/agent-setup/claude-code/",
+			"description": "Agente de terminal que lê sua base de código, executa comandos e edita arquivos. Um comando da CLI conecta o servidor MCP da Azion.",
+			"workflows": [
+				"Terminal"
+			]
+		},
+		{
+			"slug": "cursor",
+			"name": "Cursor",
+			"vendor": "Cursor",
+			"mark": "cursor",
+			"href": "/pt-br/documentacao/agent-setup/cursor/",
+			"description": "IDE AI-first construída sobre o VS Code, com edições multiarquivo no Composer e agentes em segundo plano. A Azion entra nas suas configurações de MCP.",
+			"workflows": [
+				"IDE"
+			]
+		},
+		{
+			"slug": "github-copilot",
+			"name": "GitHub Copilot",
+			"vendor": "GitHub",
+			"mark": "copilot",
+			"href": "/pt-br/documentacao/agent-setup/github-copilot/",
+			"description": "Modo agente dentro do VS Code, com contexto do workspace e integração nativa com pull requests. Um arquivo no projeto conecta a Azion.",
+			"workflows": [
+				"Extension",
+				"IDE"
+			]
+		},
+		{
+			"slug": "windsurf",
+			"name": "Windsurf",
+			"vendor": "Cognition",
+			"mark": "windsurf",
+			"href": "/pt-br/documentacao/agent-setup/windsurf/",
+			"description": "IDE agêntica construída em torno do Cascade para tarefas em várias etapas. Conecta-se à Azion por meio do mcp-remote.",
+			"workflows": [
+				"IDE"
+			]
+		},
+		{
+			"slug": "codex",
+			"name": "Codex",
+			"vendor": "OpenAI",
+			"mark": "codex",
+			"href": "/pt-br/documentacao/agent-setup/codex/",
+			"description": "Agente de terminal que executa comandos em um sandbox e lê AGENTS.md nativamente. A Azion entra no config.toml.",
+			"workflows": [
+				"Terminal"
+			]
+		},
+		{
+			"slug": "gemini-cli",
+			"name": "Gemini CLI",
+			"vendor": "Google",
+			"mark": "gemini",
+			"href": "/pt-br/documentacao/agent-setup/gemini-cli/",
+			"description": "Agente de terminal de código aberto com um plano gratuito. Declare a Azion uma vez no settings.json e verifique com /mcp.",
+			"workflows": [
+				"Terminal"
+			]
+		},
+		{
+			"slug": "opencode",
+			"name": "OpenCode",
+			"vendor": "SST",
+			"mark": "opencode",
+			"href": "/pt-br/documentacao/agent-setup/opencode/",
+			"description": "Agente de terminal de código aberto e agnóstico de provedor. A Azion é uma entrada no bloco MCP dele, qualquer que seja o modelo que você apontar.",
+			"workflows": [
+				"Terminal"
+			]
+		}
+	]}
+/>
 
 Usa outra ferramenta que fala MCP? O servidor é um único endpoint HTTP — aponte seu cliente para `mcp.azion.com` com um Personal Token e as nove ferramentas aparecem.
 
 ## Compare os agentes
 
-<AgentCompareTable />
+<AgentCompareTable
+	columns={{
+		"agent": "Agente",
+		"terminal": "Terminal",
+		"ide": "IDE",
+		"extension": "Extensão",
+		"openSource": "Código aberto",
+		"pricing": "Preço",
+		"model": "Modelo",
+		"context": "Contexto"
+	}}
+	yes="Sim"
+	no="Não"
+	rows={[
+		{
+			"id": "claude-code",
+			"name": "Claude Code",
+			"mark": "claude",
+			"href": "/pt-br/documentacao/agent-setup/claude-code/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": false,
+			"pricing": "Assinatura",
+			"model": "Fixo",
+			"context": "Memória de projeto"
+		},
+		{
+			"id": "cursor",
+			"name": "Cursor",
+			"mark": "cursor",
+			"href": "/pt-br/documentacao/agent-setup/cursor/",
+			"terminal": false,
+			"ide": true,
+			"extension": false,
+			"openSource": false,
+			"pricing": "Assinatura",
+			"model": "Multiprovedor",
+			"context": "Codebase indexado"
+		},
+		{
+			"id": "github-copilot",
+			"name": "GitHub Copilot",
+			"mark": "copilot",
+			"href": "/pt-br/documentacao/agent-setup/github-copilot/",
+			"terminal": false,
+			"ide": true,
+			"extension": true,
+			"openSource": false,
+			"pricing": "Assinatura",
+			"model": "Multiprovedor",
+			"context": "Codebase indexado"
+		},
+		{
+			"id": "windsurf",
+			"name": "Windsurf",
+			"mark": "windsurf",
+			"href": "/pt-br/documentacao/agent-setup/windsurf/",
+			"terminal": false,
+			"ide": true,
+			"extension": false,
+			"openSource": false,
+			"pricing": "Assinatura",
+			"model": "Multiprovedor",
+			"context": "Codebase indexado"
+		},
+		{
+			"id": "codex",
+			"name": "Codex",
+			"mark": "codex",
+			"href": "/pt-br/documentacao/agent-setup/codex/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": true,
+			"pricing": "Híbrido",
+			"model": "Fixo",
+			"context": "Memória de projeto"
+		},
+		{
+			"id": "gemini-cli",
+			"name": "Gemini CLI",
+			"mark": "gemini",
+			"href": "/pt-br/documentacao/agent-setup/gemini-cli/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": true,
+			"pricing": "Híbrido",
+			"model": "Fixo",
+			"context": "Memória de projeto"
+		},
+		{
+			"id": "opencode",
+			"name": "OpenCode",
+			"mark": "opencode",
+			"href": "/pt-br/documentacao/agent-setup/opencode/",
+			"terminal": true,
+			"ide": false,
+			"extension": false,
+			"openSource": true,
+			"pricing": "BYOK",
+			"model": "Multiprovedor",
+			"context": "Memória de projeto"
+		}
+	]}
+/>
 
 <DocCallout kind="note" label="Todo agente listado se conecta ao servidor MCP da Azion. As colunas de fluxo de trabalho dizem onde a ferramenta roda, não o que ela pode fazer." />
 
@@ -31,12 +240,27 @@ Tipos, conceitos e compromissos comuns.
 
 ### Fluxo de trabalho
 
-<ConceptCards group="workflows" lang="pt-br" />
+<DocCardGroup cols={2}>
+	<DocCard title="Terminal" icon="pi pi-desktop" label="Roda em um shell. Ideal para automação, scripts e pipelines de CI." />
+	<DocCard title="IDE" icon="pi pi-code" label="Um editor completo com o agente em primeiro plano: diffs visuais e edições multiarquivo." />
+	<DocCard title="Extensão" icon="pi pi-th-large" label="Encaixa-se no editor que você já usa. Instalação mais leve, mantém sua configuração." />
+	<DocCard title="Nuvem" icon="pi pi-cloud" label="Hospedado, sem instalação local. Ideal para trabalho assíncrono e de longa duração — e a forma que o Assistente de IA do Console assume." />
+</DocCardGroup>
 
 ### Conceitos-chave
 
-<ConceptCards group="concepts" lang="pt-br" />
+<DocCardGroup cols={2}>
+	<DocCard title="MCP" icon="pi pi-server" label="O Model Context Protocol — o padrão que permite a um agente chamar ferramentas externas. A Azion publica um servidor MCP, em mcp.azion.com, e todo agente desta página o fala." />
+	<DocCard title="Contexto do agente" icon="pi pi-file" label="Os arquivos que um agente lê antes de responder: llms.txt para o índice da documentação, AGENTS.md para as convenções do seu projeto." />
+	<DocCard title="Flexibilidade de modelo" icon="pi pi-sliders-h" label="Fixo prende você aos modelos do próprio fabricante. BYOK usa a chave do seu provedor. Multiprovedor alterna entre vários." />
+	<DocCard title="Contexto" icon="pi pi-database" label="Sessão esquece ao fim de uma conversa. Memória de projeto persiste em um arquivo que você commita. Codebase indexado mantém um índice pesquisável de todo o repositório." />
+</DocCardGroup>
 
 ### Compromissos comuns
 
-<ConceptCards group="tradeoffs" lang="pt-br" />
+<DocCardGroup cols={2}>
+	<DocCard title="Nuvem vs. local" icon="pi pi-cloud-upload" label="A nuvem executa tarefas longas sem ocupar sua máquina, e envia seu código para algum lugar. Local mantém tudo em disco, e para quando seu laptop para." />
+	<DocCard title="Proprietário vs. código aberto" icon="pi pi-github" label="Código aberto pode ser auditado, bifurcado e hospedado por você. Proprietário tende a entregar a capacidade mais nova primeiro." />
+	<DocCard title="Modelo fixo vs. BYOK" icon="pi pi-key" label="Um modelo fixo é ajustado para o próprio agente e cobrado como uma assinatura. BYOK permite escolher o modelo por tarefa e pagar por token." />
+	<DocCard title="Sessão vs. codebase indexado" icon="pi pi-search" label="Um índice responde perguntas sobre código que ninguém abriu, ao custo de uma cópia do repositório. Uma sessão só sabe o que lhe foi mostrado." />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/opencode.mdx b/src/content/docs/pt-br/pages/agent-setup/opencode.mdx
index 71dabac154..6eeb48a928 100644
--- a/src/content/docs/pt-br/pages/agent-setup/opencode.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/opencode.mdx
@@ -4,24 +4,109 @@ description: Agente de terminal de código aberto e agnóstico de provedor. A Az
 meta_tags: 'opencode, configuração de agentes, mcp'
 namespace: documentation_agent_setup_opencode
 permalink: /documentacao/agent-setup/opencode/
-page_header: false
+agent:
+  mark: opencode
+  vendor: SST
+  tags:
+    - Terminal
+    - BYOK
+    - Multiprovedor
+    - Memória de projeto
+    - Código aberto
+  links:
+    - label: Servidor MCP da Azion
+      href: /pt-br/documentacao/devtools/mcp/
+    - label: Azion CLI
+      href: /pt-br/documentacao/devtools/cli/
+    - label: Documentação do OpenCode
+      href: https://opencode.ai/docs
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/pt-br/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/pt-br/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/pt-br/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/pt-br/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/pt-br/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/pt-br/cards/github-copilot.mdx';
+import WindsurfCard from '~/includes/agent-setup/pt-br/cards/windsurf.mdx';
+import CodexCard from '~/includes/agent-setup/pt-br/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/pt-br/cards/gemini-cli.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="opencode" />
-
 ## Início rápido
 
-<AgentQuickStart client:visible agent="opencode" lang="pt-br" />
+<AgentQuickStart client:visible
+	tryIt="Experimente"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Instale o OpenCode",
+			"body": "Instale a TUI globalmente e aponte-a para o provedor de modelo que você já paga.",
+			"samples": [
+				{
+					"label": "npm",
+					"language": "bash",
+					"code": "npm install -g opencode-ai"
+				}
+			]
+		},
+		{
+			"key": "token",
+			"title": "Crie um Personal Token",
+			"body": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o OpenCode tenha, e copie-o — ele é mostrado uma única vez.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Conecte o servidor MCP da Azion",
+			"body": "O OpenCode guarda os servidores MCP no arquivo de configuração do próprio projeto, ao lado da escolha de modelo.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"$schema\": \"https://opencode.ai/config.json\",\n  \"mcp\": {\n    \"azion\": {\n      \"type\": \"remote\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}",
+					"fileName": "opencode.json"
+				}
+			],
+			"note": "O servidor é `\"type\": \"remote\"` — a palavra do OpenCode para um endpoint HTTP. `\"local\"` é para um comando que ele mesmo inicia, e ele vai tentar executar a URL."
+		},
+		{
+			"key": "verify",
+			"title": "Verifique, depois teste um prompt",
+			"body": "Execute `/mcp` na TUI. Cada servidor imprime seu estado de conexão e a contagem de ferramentas.",
+			"samples": [
+				{
+					"label": "Session",
+					"language": "bash",
+					"code": "/mcp"
+				}
+			],
+			"prompt": "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação."
+		}
+	]}
+/>
 
 ## Acesso à plataforma Azion
 
@@ -31,25 +116,34 @@ Três camadas, e um agente conectado usa as três: o servidor MCP para consultar
 
 Um endpoint HTTP em `https://mcp.azion.com`, autenticado com seu Personal Token. Ele expõe nove ferramentas — seis que leem um corpus, três que escrevem:
 
-<AgentToolsTable lang="pt-br" />
+<McpTools />
 
 ### Azion CLI
 
 Builds locais, deploys e os comandos de produto que a API não cobre. Instale uma vez e o OpenCode a executa por você — o primeiro `azion login` é interativo, então execute esse você mesmo.
 
-<Samples client:visible group="cli" lang="pt-br" />
+<CliSamples />
 
 ### Contexto do agente
 
 O OpenCode lê `AGENTS.md` na raiz do repositório antes de responder. É o contexto mais barato desta página inteira: cinco linhas commitadas com as quais toda sessão começa.
 
-<Samples client:visible group="context" agent="opencode" lang="pt-br" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "AGENTS.md",
+			"language": "markdown",
+			"fileName": "AGENTS.md",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Documentação amigável para agentes
 
 Referências econômicas em tokens que um agente busca sozinho, sem chamada de ferramenta e sem token. Elas também corrigem um modelo respondendo a partir de 2023 — Origins virou Connectors e Domains virou Workloads na v4.
 
-<AgentDocsList lang="pt-br" />
+<AgentDocs />
 
 Sua ferramenta não suporta MCP? Prepare-a manualmente, uma vez por sessão:
 
@@ -77,12 +171,83 @@ Cada um destes exercita uma parte diferente da conexão — a busca na documenta
 
 ## FAQ
 
-<AgentFaq client:load agent="opencode" group="faq" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre.",
+			"cta": "Configure a CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Devo usar o servidor MCP, a CLI ou ambos?",
+			"answer": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o OpenCode consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
+		},
+		{
+			"question": "O que o OpenCode pode fazer com meu Personal Token?",
+			"answer": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
+		},
+		{
+			"question": "O OpenCode consegue fazer deploy na Azion sem sair do terminal?",
+			"answer": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
+		}
+	]}
+/>
 
 ## Solução de problemas
 
-<AgentFaq client:load agent="opencode" group="troubleshooting" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		}
+	}}
+	items={[
+		{
+			"question": "O servidor nunca conecta no OpenCode",
+			"answer": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. O servidor é `\"type\": \"remote\"` — a palavra do OpenCode para um endpoint HTTP. `\"local\"` é para um comando que ele mesmo inicia, e ele vai tentar executar a URL."
+		},
+		{
+			"question": "Ele responde com nomes de produtos que não existem mais",
+			"answer": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
+		},
+		{
+			"question": "Ele escreve configuração que a CLI depois rejeita",
+			"answer": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
+		}
+	]}
+/>
 
 ## Outros agentes
 
-<AgentCardGrid agent="opencode" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<WindsurfCard />
+	<CodexCard />
+	<GeminiCliCard />
+</DocCardGroup>
diff --git a/src/content/docs/pt-br/pages/agent-setup/windsurf.mdx b/src/content/docs/pt-br/pages/agent-setup/windsurf.mdx
index 599741c31a..5f1a0643a0 100644
--- a/src/content/docs/pt-br/pages/agent-setup/windsurf.mdx
+++ b/src/content/docs/pt-br/pages/agent-setup/windsurf.mdx
@@ -4,24 +4,98 @@ description: IDE agêntica construída em torno do Cascade para tarefas em vári
 meta_tags: 'windsurf, configuração de agentes, mcp'
 namespace: documentation_agent_setup_windsurf
 permalink: /documentacao/agent-setup/windsurf/
-page_header: false
+agent:
+  mark: windsurf
+  vendor: Cognition
+  tags:
+    - IDE
+    - Assinatura
+    - Multiprovedor
+    - Codebase indexado
+  links:
+    - label: Servidor MCP da Azion
+      href: /pt-br/documentacao/devtools/mcp/
+    - label: Azion CLI
+      href: /pt-br/documentacao/devtools/cli/
+    - label: Documentação do Windsurf
+      href: https://docs.windsurf.com
 ---
 
-import AgentHeader from '~/components/agents/AgentHeader.astro';
-import AgentQuickStart from '~/components/agents/AgentQuickStart.vue';
-import AgentToolsTable from '~/components/agents/AgentToolsTable.vue';
-import Samples from '~/components/agents/Samples.vue';
-import AgentDocsList from '~/components/agents/AgentDocsList.vue';
-import AgentFaq from '~/components/agents/AgentFaq.vue';
-import AgentCardGrid from '~/components/agents/AgentCardGrid.astro';
+import AgentFaq from '~/components/webkit/AgentFaq.vue';
+import AgentQuickStart from '~/components/webkit/AgentQuickStart.vue';
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+import AgentDocs from '~/includes/agent-setup/pt-br/agent-docs.mdx';
+import CliSamples from '~/includes/agent-setup/pt-br/cli-samples.mdx';
+import McpTools from '~/includes/agent-setup/pt-br/mcp-tools.mdx';
+import ClaudeCodeCard from '~/includes/agent-setup/pt-br/cards/claude-code.mdx';
+import CursorCard from '~/includes/agent-setup/pt-br/cards/cursor.mdx';
+import GithubCopilotCard from '~/includes/agent-setup/pt-br/cards/github-copilot.mdx';
+import CodexCard from '~/includes/agent-setup/pt-br/cards/codex.mdx';
+import GeminiCliCard from '~/includes/agent-setup/pt-br/cards/gemini-cli.mdx';
+import OpencodeCard from '~/includes/agent-setup/pt-br/cards/opencode.mdx';
+import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import DocPrompt from '@aziontech/webkit/doc-prompt';
 import DocCallout from '@aziontech/webkit/doc-callout';
 
-<AgentHeader agent="windsurf" />
-
 ## Início rápido
 
-<AgentQuickStart client:visible agent="windsurf" lang="pt-br" />
+<AgentQuickStart client:visible
+	tryIt="Experimente"
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	steps={[
+		{
+			"key": "install",
+			"title": "Instale o Windsurf",
+			"body": "Baixe o Windsurf, abra seu projeto e inicie uma conversa no Cascade.",
+			"link": {
+				"label": "Downloads do Windsurf",
+				"href": "https://windsurf.com/download"
+			}
+		},
+		{
+			"key": "token",
+			"title": "Crie um Personal Token",
+			"body": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o Windsurf tenha, e copie-o — ele é mostrado uma única vez.",
+			"link": {
+				"label": "Console › Personal Tokens",
+				"href": "https://console.azion.com/personal-tokens"
+			}
+		},
+		{
+			"key": "connect",
+			"title": "Conecte o servidor MCP da Azion",
+			"body": "O Windsurf fala stdio, então alcança um servidor HTTP por meio do `mcp-remote`. O Node.js 18 ou mais novo precisa estar no seu PATH.",
+			"samples": [
+				{
+					"label": "JSON",
+					"language": "json",
+					"code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"mcp-remote\",\n        \"https://mcp.azion.com\",\n        \"--header\",\n        \"Authorization: Bearer YOUR_PERSONAL_TOKEN\"\n      ]\n    }\n  }\n}",
+					"fileName": ".codeium/windsurf/mcp_config.json"
+				}
+			],
+			"note": "O `mcp-remote` é uma ponte, não um pacote da Azion: ele converte o transporte stdio que o Windsurf fala no HTTP que o servidor fala. O Cascade o mostra como um processo local."
+		},
+		{
+			"key": "verify",
+			"title": "Verifique, depois teste um prompt",
+			"body": "Abra o painel MCP no Cascade e atualize. `azion` deve reportar nove ferramentas; uma linha vermelha normalmente significa que o `npx` não alcançou a rede.",
+			"prompt": "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação."
+		}
+	]}
+/>
 
 ## Acesso à plataforma Azion
 
@@ -31,25 +105,34 @@ Três camadas, e um agente conectado usa as três: o servidor MCP para consultar
 
 Um endpoint HTTP em `https://mcp.azion.com`, autenticado com seu Personal Token. Ele expõe nove ferramentas — seis que leem um corpus, três que escrevem:
 
-<AgentToolsTable lang="pt-br" />
+<McpTools />
 
 ### Azion CLI
 
 Builds locais, deploys e os comandos de produto que a API não cobre. Instale uma vez e o Windsurf a executa por você — o primeiro `azion login` é interativo, então execute esse você mesmo.
 
-<Samples client:visible group="cli" lang="pt-br" />
+<CliSamples />
 
 ### Contexto do agente
 
 O Windsurf lê `.windsurfrules` na raiz do repositório antes de responder. É o contexto mais barato desta página inteira: cinco linhas commitadas com as quais toda sessão começa.
 
-<Samples client:visible group="context" agent="windsurf" lang="pt-br" />
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": ".windsurfrules",
+			"language": "markdown",
+			"fileName": ".windsurfrules",
+			"code": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases."
+		}
+	]}
+/>
 
 ## Documentação amigável para agentes
 
 Referências econômicas em tokens que um agente busca sozinho, sem chamada de ferramenta e sem token. Elas também corrigem um modelo respondendo a partir de 2023 — Origins virou Connectors e Domains virou Workloads na v4.
 
-<AgentDocsList lang="pt-br" />
+<AgentDocs />
 
 Sua ferramenta não suporta MCP? Prepare-a manualmente, uma vez por sessão:
 
@@ -77,12 +160,83 @@ Cada um destes exercita uma parte diferente da conexão — a busca na documenta
 
 ## FAQ
 
-<AgentFaq client:load agent="windsurf" group="faq" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"mcp": {
+			"headline": "MCP",
+			"tip": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado.",
+			"cta": "Veja as nove ferramentas",
+			"href": "#mcp-server"
+		},
+		"cli": {
+			"headline": "Azion CLI",
+			"tip": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre.",
+			"cta": "Configure a CLI",
+			"href": "#azion-cli"
+		},
+		"token": {
+			"headline": "Personal Token",
+			"tip": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria.",
+			"cta": "Console › Personal Tokens",
+			"href": "https://console.azion.com/personal-tokens"
+		}
+	}}
+	items={[
+		{
+			"question": "Devo usar o servidor MCP, a CLI ou ambos?",
+			"answer": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o Windsurf consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
+		},
+		{
+			"question": "O que o Windsurf pode fazer com meu Personal Token?",
+			"answer": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
+		},
+		{
+			"question": "O Windsurf consegue fazer deploy na Azion sem sair do editor?",
+			"answer": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
+		}
+	]}
+/>
 
 ## Solução de problemas
 
-<AgentFaq client:load agent="windsurf" group="troubleshooting" lang="pt-br" />
+<AgentFaq client:load
+	tooltips={{
+		"connector": {
+			"headline": "Connectors",
+			"tip": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		},
+		"workload": {
+			"headline": "Workloads",
+			"tip": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4.",
+			"cta": "Visão geral da plataforma",
+			"href": "/pt-br/documentacao/plataforma/"
+		}
+	}}
+	items={[
+		{
+			"question": "O servidor nunca conecta no Windsurf",
+			"answer": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. O `mcp-remote` é uma ponte, não um pacote da Azion: ele converte o transporte stdio que o Windsurf fala no HTTP que o servidor fala. O Cascade o mostra como um processo local."
+		},
+		{
+			"question": "Ele responde com nomes de produtos que não existem mais",
+			"answer": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
+		},
+		{
+			"question": "Ele escreve configuração que a CLI depois rejeita",
+			"answer": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
+		}
+	]}
+/>
 
 ## Outros agentes
 
-<AgentCardGrid agent="windsurf" />
+<DocCardGroup cols={3}>
+	<ClaudeCodeCard />
+	<CursorCard />
+	<GithubCopilotCard />
+	<CodexCard />
+	<GeminiCliCard />
+	<OpencodeCard />
+</DocCardGroup>
diff --git a/src/data/agent-setup.json b/src/data/agent-setup.json
deleted file mode 100644
index 6adb925f4e..0000000000
--- a/src/data/agent-setup.json
+++ /dev/null
@@ -1,1077 +0,0 @@
-{
-  "mcpUrl": "https://mcp.azion.com",
-  "tokensUrl": "https://console.azion.com/personal-tokens",
-  "agents": [
-    {
-      "slug": "claude-code",
-      "namespace": "documentation_agent_setup_claude_code",
-      "name": "Claude Code",
-      "vendor": "Anthropic",
-      "mark": "claude",
-      "workflows": ["Terminal"],
-      "pricing": "Subscription",
-      "model": "Locked",
-      "context": "Project memory",
-      "openSource": false,
-      "docsUrl": "https://docs.anthropic.com/en/docs/claude-code",
-      "contextFile": "CLAUDE.md",
-      "description": {
-        "en": "Terminal agent that reads your codebase, runs commands, and edits files. One CLI command connects the Azion MCP server.",
-        "pt-br": "Agente de terminal que lê sua base de código, executa comandos e edita arquivos. Um comando da CLI conecta o servidor MCP da Azion."
-      },
-      "install": {
-        "body": {
-          "en": "Install the CLI globally, then run it once from your project so it can index the repository.",
-          "pt-br": "Instale a CLI globalmente e execute-a uma vez a partir do seu projeto para que ela indexe o repositório."
-        },
-        "samples": [
-          {
-            "label": "npm",
-            "language": "bash",
-            "code": "npm install -g @anthropic-ai/claude-code"
-          }
-        ]
-      },
-      "connect": {
-        "body": {
-          "en": "One command registers the server for every session. Claude Code stores it in your user configuration, so it is not a file you commit.",
-          "pt-br": "Um comando registra o servidor para todas as sessões. O Claude Code o guarda na sua configuração de usuário, então não é um arquivo que você commita."
-        },
-        "samples": [
-          {
-            "label": "Terminal",
-            "language": "bash",
-            "code": "claude mcp add \"azion-mcp\" \"https://mcp.azion.com\" -t http -H \"Authorization: Bearer YOUR_PERSONAL_TOKEN\""
-          }
-        ]
-      },
-      "verify": {
-        "body": {
-          "en": "`claude mcp list` names the servers it knows about; `/mcp` inside a session lists the tools each one exposes.",
-          "pt-br": "`claude mcp list` lista os servidores que ele conhece; `/mcp` dentro de uma sessão lista as ferramentas que cada um expõe."
-        },
-        "samples": [
-          {
-            "label": "Terminal",
-            "language": "bash",
-            "code": "claude mcp list"
-          }
-        ]
-      },
-      "tips": {
-        "en": [
-          "Claude Code reads `CLAUDE.md` at the repository root before it answers. Put your workload names, connector ids and the one thing nobody may redeploy in there, and every session starts knowing them.",
-          "Ask for a plan before a deploy. Claude Code runs commands for real, and `azion deploy` is not a dry run."
-        ],
-        "pt-br": [
-          "O Claude Code lê o `CLAUDE.md` na raiz do repositório antes de responder. Coloque ali os nomes dos seus workloads, os ids dos connectors e aquilo que ninguém pode reimplantar, e toda sessão começa sabendo disso.",
-          "Peça um plano antes de um deploy. O Claude Code executa comandos de verdade, e `azion deploy` não é um ensaio."
-        ]
-      }
-    },
-    {
-      "slug": "cursor",
-      "namespace": "documentation_agent_setup_cursor",
-      "name": "Cursor",
-      "vendor": "Cursor",
-      "mark": "cursor",
-      "workflows": ["IDE"],
-      "pricing": "Subscription",
-      "model": "Multi-provider",
-      "context": "Indexed codebase",
-      "openSource": false,
-      "docsUrl": "https://docs.cursor.com",
-      "contextFile": ".cursor/rules/azion.mdc",
-      "description": {
-        "en": "AI-first IDE built on VS Code, with multi-file Composer edits and background agents. Azion plugs into its MCP settings.",
-        "pt-br": "IDE AI-first construída sobre o VS Code, com edições multiarquivo no Composer e agentes em segundo plano. A Azion entra nas suas configurações de MCP."
-      },
-      "install": {
-        "body": {
-          "en": "Download Cursor for macOS, Windows or Linux, then open your project folder in it.",
-          "pt-br": "Baixe o Cursor para macOS, Windows ou Linux e abra a pasta do seu projeto nele."
-        },
-        "link": {
-          "label": {
-            "en": "Cursor downloads",
-            "pt-br": "Downloads do Cursor"
-          },
-          "href": "https://cursor.com/downloads"
-        }
-      },
-      "connect": {
-        "body": {
-          "en": "Add the server under **Settings › Tools & Integrations › New MCP server**, or commit the file below so the whole team gets it with the repository.",
-          "pt-br": "Adicione o servidor em **Settings › Tools & Integrations › New MCP server**, ou commite o arquivo abaixo para que toda a equipe o receba com o repositório."
-        },
-        "samples": [
-          {
-            "label": "JSON",
-            "language": "json",
-            "fileName": ".cursor/mcp.json",
-            "code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"type\": \"streamable-http\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Token YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}"
-          }
-        ],
-        "note": {
-          "en": "Cursor is the one client that wants `Token` in the Authorization header, not `Bearer`. A `Bearer` prefix here fails with a 401 and no other symptom.",
-          "pt-br": "O Cursor é o único cliente que exige `Token` no cabeçalho Authorization, não `Bearer`. Um prefixo `Bearer` aqui falha com 401 e nenhum outro sintoma."
-        }
-      },
-      "verify": {
-        "body": {
-          "en": "Reopen **Settings › Tools & Integrations**: `azion` should list nine tools. If the row is there but empty, the token is wrong.",
-          "pt-br": "Reabra **Settings › Tools & Integrations**: `azion` deve listar nove ferramentas. Se a linha está lá mas vazia, o token está errado."
-        }
-      },
-      "tips": {
-        "en": [
-          "Reference the file you want changed with `@azion.config.js` in a Composer prompt. Cursor edits the real configuration instead of describing one.",
-          "Cursor indexes the repository, so it already knows your framework. Ask for the deploy, not for a tutorial about it."
-        ],
-        "pt-br": [
-          "Referencie o arquivo que você quer alterar com `@azion.config.js` em um prompt do Composer. O Cursor edita a configuração real em vez de descrever uma.",
-          "O Cursor indexa o repositório, então já conhece seu framework. Peça o deploy, não um tutorial sobre ele."
-        ]
-      }
-    },
-    {
-      "slug": "github-copilot",
-      "namespace": "documentation_agent_setup_github_copilot",
-      "name": "GitHub Copilot",
-      "vendor": "GitHub",
-      "mark": "copilot",
-      "workflows": ["Extension", "IDE"],
-      "pricing": "Subscription",
-      "model": "Multi-provider",
-      "context": "Indexed codebase",
-      "openSource": false,
-      "docsUrl": "https://docs.github.com/copilot",
-      "contextFile": ".github/copilot-instructions.md",
-      "description": {
-        "en": "Agent mode inside VS Code, with workspace context and native pull-request integration. A file in the project connects Azion.",
-        "pt-br": "Modo agente dentro do VS Code, com contexto do workspace e integração nativa com pull requests. Um arquivo no projeto conecta a Azion."
-      },
-      "install": {
-        "body": {
-          "en": "Install the GitHub Copilot extension in VS Code, then switch the Chat view to **Agent** mode — tool calls only happen in agent mode.",
-          "pt-br": "Instale a extensão GitHub Copilot no VS Code e mude a visualização de Chat para o modo **Agent** — chamadas de ferramentas só acontecem no modo agente."
-        },
-        "link": {
-          "label": {
-            "en": "GitHub Copilot in VS Code",
-            "pt-br": "GitHub Copilot no VS Code"
-          },
-          "href": "https://marketplace.visualstudio.com/items?itemName=GitHub.copilot"
-        }
-      },
-      "connect": {
-        "body": {
-          "en": "Declare the server in the project. The file lives in the repository, so every contributor with a token gets the same tools.",
-          "pt-br": "Declare o servidor no projeto. O arquivo vive no repositório, então todo colaborador com um token recebe as mesmas ferramentas."
-        },
-        "samples": [
-          {
-            "label": "JSON",
-            "language": "json",
-            "fileName": ".vscode/mcp.json",
-            "code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"type\": \"http\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}"
-          }
-        ],
-        "note": {
-          "en": "Commit the file, never the token. VS Code resolves `${input:azion-token}` by prompting once per window, which keeps the credential out of git history.",
-          "pt-br": "Commite o arquivo, nunca o token. O VS Code resolve `${input:azion-token}` perguntando uma vez por janela, o que mantém a credencial fora do histórico do git."
-        }
-      },
-      "verify": {
-        "body": {
-          "en": "Open the tools picker in the Chat view: `azion` appears with its nine tools once VS Code has started the server.",
-          "pt-br": "Abra o seletor de ferramentas na visualização de Chat: `azion` aparece com suas nove ferramentas assim que o VS Code inicia o servidor."
-        }
-      },
-      "tips": {
-        "en": [
-          "Agent mode is what calls tools. In Ask mode Copilot will happily describe the Azion API from memory and never touch the MCP server.",
-          "Copilot reads the open editors first. Open `azion.config.js` before asking about your build, and it stops guessing at your framework."
-        ],
-        "pt-br": [
-          "O modo agente é o que chama ferramentas. No modo Ask, o Copilot descreve a API da Azion de memória e nunca toca o servidor MCP.",
-          "O Copilot lê primeiro os editores abertos. Abra o `azion.config.js` antes de perguntar sobre o build, e ele para de adivinhar seu framework."
-        ]
-      }
-    },
-    {
-      "slug": "windsurf",
-      "namespace": "documentation_agent_setup_windsurf",
-      "name": "Windsurf",
-      "vendor": "Cognition",
-      "mark": "windsurf",
-      "workflows": ["IDE"],
-      "pricing": "Subscription",
-      "model": "Multi-provider",
-      "context": "Indexed codebase",
-      "openSource": false,
-      "docsUrl": "https://docs.windsurf.com",
-      "contextFile": ".windsurfrules",
-      "description": {
-        "en": "Agentic IDE built around Cascade for multi-step tasks. Connects to Azion through mcp-remote.",
-        "pt-br": "IDE agêntica construída em torno do Cascade para tarefas em várias etapas. Conecta-se à Azion por meio do mcp-remote."
-      },
-      "install": {
-        "body": {
-          "en": "Download Windsurf, open your project, and start a Cascade conversation.",
-          "pt-br": "Baixe o Windsurf, abra seu projeto e inicie uma conversa no Cascade."
-        },
-        "link": {
-          "label": {
-            "en": "Windsurf downloads",
-            "pt-br": "Downloads do Windsurf"
-          },
-          "href": "https://windsurf.com/download"
-        }
-      },
-      "connect": {
-        "body": {
-          "en": "Windsurf speaks stdio, so it reaches an HTTP server through `mcp-remote`. Node.js 18 or newer has to be on your PATH.",
-          "pt-br": "O Windsurf fala stdio, então alcança um servidor HTTP por meio do `mcp-remote`. O Node.js 18 ou mais novo precisa estar no seu PATH."
-        },
-        "samples": [
-          {
-            "label": "JSON",
-            "language": "json",
-            "fileName": ".codeium/windsurf/mcp_config.json",
-            "code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"mcp-remote\",\n        \"https://mcp.azion.com\",\n        \"--header\",\n        \"Authorization: Bearer YOUR_PERSONAL_TOKEN\"\n      ]\n    }\n  }\n}"
-          }
-        ],
-        "note": {
-          "en": "`mcp-remote` is a bridge, not an Azion package: it turns the stdio transport Windsurf speaks into the HTTP one the server speaks. Cascade shows it as a local process.",
-          "pt-br": "O `mcp-remote` é uma ponte, não um pacote da Azion: ele converte o transporte stdio que o Windsurf fala no HTTP que o servidor fala. O Cascade o mostra como um processo local."
-        }
-      },
-      "verify": {
-        "body": {
-          "en": "Open the MCP panel in Cascade and refresh. `azion` should report nine tools; a red row usually means `npx` could not reach the network.",
-          "pt-br": "Abra o painel MCP no Cascade e atualize. `azion` deve reportar nove ferramentas; uma linha vermelha normalmente significa que o `npx` não alcançou a rede."
-        }
-      },
-      "tips": {
-        "en": [
-          "Cascade holds a plan across steps, which suits a migration: ask it to inventory the origins first, then convert them to Connectors one at a time.",
-          "A hanging server is almost always `mcp-remote` waiting on a proxy. Run the `npx` line by hand once to see its output."
-        ],
-        "pt-br": [
-          "O Cascade mantém um plano ao longo das etapas, o que serve bem a uma migração: peça para inventariar as origens primeiro e depois convertê-las em Connectors uma de cada vez.",
-          "Um servidor travado é quase sempre o `mcp-remote` esperando um proxy. Execute a linha do `npx` manualmente uma vez para ver a saída."
-        ]
-      }
-    },
-    {
-      "slug": "codex",
-      "namespace": "documentation_agent_setup_codex",
-      "name": "Codex",
-      "vendor": "OpenAI",
-      "mark": "codex",
-      "workflows": ["Terminal"],
-      "pricing": "Hybrid",
-      "model": "Locked",
-      "context": "Project memory",
-      "openSource": true,
-      "docsUrl": "https://developers.openai.com/codex",
-      "contextFile": "AGENTS.md",
-      "description": {
-        "en": "Terminal agent that runs commands in a sandbox and reads AGENTS.md natively. Azion goes in config.toml.",
-        "pt-br": "Agente de terminal que executa comandos em um sandbox e lê AGENTS.md nativamente. A Azion entra no config.toml."
-      },
-      "install": {
-        "body": {
-          "en": "Install the CLI globally and sign in with your OpenAI account.",
-          "pt-br": "Instale a CLI globalmente e entre com sua conta da OpenAI."
-        },
-        "samples": [
-          {
-            "label": "npm",
-            "language": "bash",
-            "code": "npm install -g @openai/codex\ncodex login"
-          }
-        ]
-      },
-      "connect": {
-        "body": {
-          "en": "Codex reads one TOML configuration for every project. Add the server there and it is available in each sandbox it opens.",
-          "pt-br": "O Codex lê uma configuração TOML para todos os projetos. Adicione o servidor ali e ele fica disponível em cada sandbox que o Codex abre."
-        },
-        "samples": [
-          {
-            "label": "TOML",
-            "language": "toml",
-            "fileName": "~/.codex/config.toml",
-            "code": "[mcp.servers.azion]\ntype = \"http\"\nurl = \"https://mcp.azion.com\"\nauth = \"Bearer YOUR_PERSONAL_TOKEN\""
-          }
-        ]
-      },
-      "verify": {
-        "body": {
-          "en": "Start a session and ask which tools it has. The nine `azion_*` tools are listed alongside its own shell and file tools.",
-          "pt-br": "Inicie uma sessão e pergunte quais ferramentas ele tem. As nove ferramentas `azion_*` aparecem ao lado das ferramentas de shell e de arquivos dele."
-        }
-      },
-      "tips": {
-        "en": [
-          "Codex reads `AGENTS.md` natively — it is the file this convention is named after. Everything you would have pasted into the prompt goes there instead.",
-          "The sandbox has no network by default. Allow it before asking for a deploy, or `azion deploy` fails on the first API call."
-        ],
-        "pt-br": [
-          "O Codex lê `AGENTS.md` nativamente — é o arquivo que dá nome a essa convenção. Tudo o que você colaria no prompt vai para lá.",
-          "O sandbox não tem rede por padrão. Permita a rede antes de pedir um deploy, ou `azion deploy` falha na primeira chamada à API."
-        ]
-      }
-    },
-    {
-      "slug": "gemini-cli",
-      "namespace": "documentation_agent_setup_gemini_cli",
-      "name": "Gemini CLI",
-      "vendor": "Google",
-      "mark": "gemini",
-      "workflows": ["Terminal"],
-      "pricing": "Hybrid",
-      "model": "Locked",
-      "context": "Project memory",
-      "openSource": true,
-      "docsUrl": "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/google-gemini/gemini-cli",
-      "contextFile": "GEMINI.md",
-      "description": {
-        "en": "Open source terminal agent with a free tier. Declare Azion once in settings.json and verify with /mcp.",
-        "pt-br": "Agente de terminal de código aberto com um plano gratuito. Declare a Azion uma vez no settings.json e verifique com /mcp."
-      },
-      "install": {
-        "body": {
-          "en": "Install the CLI globally, then run `gemini` once to authenticate with your Google account.",
-          "pt-br": "Instale a CLI globalmente e execute `gemini` uma vez para autenticar com sua conta Google."
-        },
-        "samples": [
-          {
-            "label": "npm",
-            "language": "bash",
-            "code": "npm install -g @google/gemini-cli"
-          }
-        ]
-      },
-      "connect": {
-        "body": {
-          "en": "Declare the server in the user settings file. `httpUrl` is what tells Gemini CLI to speak HTTP rather than to spawn a process.",
-          "pt-br": "Declare o servidor no arquivo de configurações do usuário. `httpUrl` é o que diz à Gemini CLI para falar HTTP em vez de iniciar um processo."
-        },
-        "samples": [
-          {
-            "label": "JSON",
-            "language": "json",
-            "fileName": "~/.gemini/settings.json",
-            "code": "{\n  \"mcpServers\": {\n    \"azion\": {\n      \"httpUrl\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}"
-          }
-        ]
-      },
-      "verify": {
-        "body": {
-          "en": "Type `/mcp` in a session. It prints every server with its status and the tools it exposes.",
-          "pt-br": "Digite `/mcp` em uma sessão. Ele imprime cada servidor com seu status e as ferramentas que expõe."
-        },
-        "samples": [
-          {
-            "label": "Session",
-            "language": "bash",
-            "code": "/mcp"
-          }
-        ]
-      },
-      "tips": {
-        "en": [
-          "`GEMINI.md` at the repository root is this agent’s project memory. It is read on every run, so it is the cheapest place to put your account’s conventions.",
-          "The free tier is rate-limited per minute. A long migration goes faster in fewer, larger prompts."
-        ],
-        "pt-br": [
-          "O `GEMINI.md` na raiz do repositório é a memória de projeto deste agente. Ele é lido em toda execução, então é o lugar mais barato para as convenções da sua conta.",
-          "O plano gratuito tem limite de requisições por minuto. Uma migração longa anda mais rápido em menos prompts, maiores."
-        ]
-      }
-    },
-    {
-      "slug": "opencode",
-      "namespace": "documentation_agent_setup_opencode",
-      "name": "OpenCode",
-      "vendor": "SST",
-      "mark": "opencode",
-      "workflows": ["Terminal"],
-      "pricing": "BYOK",
-      "model": "Multi-provider",
-      "context": "Project memory",
-      "openSource": true,
-      "docsUrl": "https://opencode.ai/docs",
-      "contextFile": "AGENTS.md",
-      "description": {
-        "en": "Open source, provider-agnostic terminal agent. Azion is one entry in its MCP block, whichever model you point it at.",
-        "pt-br": "Agente de terminal de código aberto e agnóstico de provedor. A Azion é uma entrada no bloco MCP dele, qualquer que seja o modelo que você apontar."
-      },
-      "install": {
-        "body": {
-          "en": "Install the TUI globally, then point it at whichever model provider you already pay for.",
-          "pt-br": "Instale a TUI globalmente e aponte-a para o provedor de modelo que você já paga."
-        },
-        "samples": [
-          {
-            "label": "npm",
-            "language": "bash",
-            "code": "npm install -g opencode-ai"
-          }
-        ]
-      },
-      "connect": {
-        "body": {
-          "en": "OpenCode keeps MCP servers in the project’s own configuration file, next to the model choice.",
-          "pt-br": "O OpenCode guarda os servidores MCP no arquivo de configuração do próprio projeto, ao lado da escolha de modelo."
-        },
-        "samples": [
-          {
-            "label": "JSON",
-            "language": "json",
-            "fileName": "opencode.json",
-            "code": "{\n  \"$schema\": \"https://opencode.ai/config.json\",\n  \"mcp\": {\n    \"azion\": {\n      \"type\": \"remote\",\n      \"url\": \"https://mcp.azion.com\",\n      \"headers\": {\n        \"Authorization\": \"Bearer YOUR_PERSONAL_TOKEN\"\n      }\n    }\n  }\n}"
-          }
-        ],
-        "note": {
-          "en": "The server is `\"type\": \"remote\"` — OpenCode’s word for an HTTP endpoint. `\"local\"` is for a command it spawns itself, and it will try to execute the URL.",
-          "pt-br": "O servidor é `\"type\": \"remote\"` — a palavra do OpenCode para um endpoint HTTP. `\"local\"` é para um comando que ele mesmo inicia, e ele vai tentar executar a URL."
-        }
-      },
-      "verify": {
-        "body": {
-          "en": "Run `/mcp` in the TUI. Each server prints its connection state and tool count.",
-          "pt-br": "Execute `/mcp` na TUI. Cada servidor imprime seu estado de conexão e a contagem de ferramentas."
-        },
-        "samples": [
-          {
-            "label": "Session",
-            "language": "bash",
-            "code": "/mcp"
-          }
-        ]
-      },
-      "tips": {
-        "en": [
-          "The model is yours to choose, and they are not equally good at this. A weaker model connected to the MCP server still writes better Azion than a strong one guessing from memory.",
-          "OpenCode reads `AGENTS.md`, so a project set up for Codex needs no second context file."
-        ],
-        "pt-br": [
-          "O modelo é você quem escolhe, e eles não são igualmente bons nisso. Um modelo mais fraco conectado ao servidor MCP ainda escreve Azion melhor do que um forte adivinhando de memória.",
-          "O OpenCode lê `AGENTS.md`, então um projeto preparado para o Codex não precisa de um segundo arquivo de contexto."
-        ]
-      }
-    }
-  ],
-  "tools": [
-    {
-      "id": "search_azion_docs_and_site",
-      "description": {
-        "en": "Search the documentation and the product pages.",
-        "pt-br": "Pesquisa a documentação e as páginas de produto."
-      }
-    },
-    {
-      "id": "search_azion_code_samples",
-      "description": {
-        "en": "Retrieve working examples from the code-samples library.",
-        "pt-br": "Recupera exemplos funcionais da biblioteca de code samples."
-      }
-    },
-    {
-      "id": "search_azion_cli_commands",
-      "description": {
-        "en": "Look up an Azion CLI command and its flags.",
-        "pt-br": "Consulta um comando da Azion CLI e suas flags."
-      }
-    },
-    {
-      "id": "search_azion_api_v4_commands",
-      "description": {
-        "en": "The current REST API — Connectors, Workloads, Applications.",
-        "pt-br": "A API REST atual — Connectors, Workloads, Applications."
-      }
-    },
-    {
-      "id": "search_azion_api_v3_commands",
-      "description": {
-        "en": "The legacy API, for accounts still on v3 resources.",
-        "pt-br": "A API legada, para contas ainda em recursos v3."
-      }
-    },
-    {
-      "id": "search_azion_terraform",
-      "description": {
-        "en": "The Terraform provider’s resources and arguments.",
-        "pt-br": "Os recursos e argumentos do provider Terraform."
-      }
-    },
-    {
-      "id": "create_rules_engine",
-      "description": {
-        "en": "Generate a Rules Engine configuration from a description.",
-        "pt-br": "Gera uma configuração do Rules Engine a partir de uma descrição."
-      }
-    },
-    {
-      "id": "create_graphql_query",
-      "description": {
-        "en": "Build a GraphQL query against the analytics API.",
-        "pt-br": "Monta uma consulta GraphQL na API de analytics."
-      }
-    },
-    {
-      "id": "deploy_azion_static_site",
-      "description": {
-        "en": "Walk a static project through to a deployed application.",
-        "pt-br": "Conduz um projeto estático até uma aplicação implantada."
-      }
-    }
-  ],
-  "cli": [
-    {
-      "label": {
-        "en": "Install",
-        "pt-br": "Instalar"
-      },
-      "language": "bash",
-      "code": "npm install -g azion\nazion login"
-    },
-    {
-      "label": {
-        "en": "Deploy",
-        "pt-br": "Deploy"
-      },
-      "language": "bash",
-      "code": "# From the project root — the agent runs these for you\nazion init\nazion deploy"
-    }
-  ],
-  "contextPrimer": "# Azion\n- Account: acme-prod · region: global\n- Workload: acme-www — production. Never deploy to it from a branch.\n- Connector: images-r2 (Object Storage bucket `acme-media`)\n- Deploy with `azion deploy`; edit azion.config.js, never the built manifest.\n- Ask before creating anything that bills: Applications, Workloads, Databases.",
-  "docs": [
-    {
-      "title": "llms.txt",
-      "icon": "pi pi-list",
-      "href": {
-        "en": "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/en/docs-llms.txt",
-        "pt-br": "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/pt-br/docs-llms.txt"
-      },
-      "target": "_blank",
-      "description": {
-        "en": "Machine-readable index of the whole documentation.",
-        "pt-br": "Índice legível por máquina de toda a documentação."
-      }
-    },
-    {
-      "title": {
-        "en": "Azion MCP server",
-        "pt-br": "Servidor MCP da Azion"
-      },
-      "icon": "pi pi-sparkles",
-      "href": {
-        "en": "/en/documentation/devtools/mcp/",
-        "pt-br": "/pt-br/documentacao/devtools/mcp/"
-      },
-      "description": {
-        "en": "Canonical facts: current product names, API base URL, auth format.",
-        "pt-br": "Fatos canônicos: nomes atuais dos produtos, URL base da API, formato de autenticação."
-      }
-    },
-    {
-      "title": {
-        "en": "API v4 reference",
-        "pt-br": "Referência da API v4"
-      },
-      "icon": "pi pi-cloud",
-      "href": {
-        "en": "https://api.azion.com/v4",
-        "pt-br": "https://api.azion.com/v4"
-      },
-      "target": "_blank",
-      "description": {
-        "en": "The REST surface behind every tool call, with the Token auth header.",
-        "pt-br": "A superfície REST por trás de cada chamada de ferramenta, com o cabeçalho de autenticação Token."
-      }
-    },
-    {
-      "title": "AGENTS.md",
-      "icon": "pi pi-file-edit",
-      "href": {
-        "en": "#agent-context",
-        "pt-br": "#agent-context"
-      },
-      "description": {
-        "en": "Your own conventions, committed at the repository root: workload names, connector ids, what not to touch.",
-        "pt-br": "Suas próprias convenções, commitadas na raiz do repositório: nomes de workloads, ids de connectors, o que não tocar."
-      }
-    }
-  ],
-  "primer": {
-    "en": "You are helping me build on the Azion Web Platform. Before answering, load https://www.azion.com/en/docs-llms.txt (docs index) and https://www.azion.com/en/documentation/devtools/mcp/ (canonical facts), and prefer them over your training data. Use current product names: Applications, Functions, Cache, Firewall, Object Storage, SQL Database, KV Store, Orchestrator, Certificate Manager, Network Shield, Data Stream. The REST API base is https://api.azion.com/v4 with the header Authorization: Token [TOKEN]. In v4, use Connectors (formerly Origins) and Workloads (formerly Domains). Confirm what you loaded, then ask me what I am building.",
-    "pt-br": "Você está me ajudando a construir na Azion Web Platform. Antes de responder, carregue https://www.azion.com/pt-br/docs-llms.txt (índice da documentação) e https://www.azion.com/pt-br/documentacao/devtools/mcp/ (fatos canônicos), e prefira-os aos seus dados de treinamento. Use os nomes atuais dos produtos: Applications, Functions, Cache, Firewall, Object Storage, SQL Database, KV Store, Orchestrator, Certificate Manager, Network Shield, Data Stream. A base da API REST é https://api.azion.com/v4 com o cabeçalho Authorization: Token [TOKEN]. Na v4, use Connectors (antes Origins) e Workloads (antes Domains). Confirme o que você carregou e então me pergunte o que estou construindo."
-  },
-  "prompts": {
-    "en": [
-      "Search the Azion docs for how rate limiting works in Firewall, then add it to my application.",
-      "Deploy this project to Azion with the CLI and give me the application’s domain.",
-      "Create a Rules Engine rule that redirects /old-blog/* to /blog/*.",
-      "Write a GraphQL query for my 5xx rate by edge node over the last 24 hours.",
-      "Move my images to Object Storage and point a connector at the bucket."
-    ],
-    "pt-br": [
-      "Pesquise na documentação da Azion como funciona o rate limiting no Firewall e adicione-o à minha aplicação.",
-      "Faça o deploy deste projeto na Azion com a CLI e me dê o domínio da aplicação.",
-      "Crie uma regra do Rules Engine que redirecione /old-blog/* para /blog/*.",
-      "Escreva uma consulta GraphQL da minha taxa de 5xx por edge node nas últimas 24 horas.",
-      "Mova minhas imagens para o Object Storage e aponte um connector para o bucket."
-    ]
-  },
-  "workflows": [
-    {
-      "title": {
-        "en": "Terminal",
-        "pt-br": "Terminal"
-      },
-      "icon": "pi pi-desktop",
-      "description": {
-        "en": "Runs in a shell. Best for automation, scripting, and CI pipelines.",
-        "pt-br": "Roda em um shell. Ideal para automação, scripts e pipelines de CI."
-      }
-    },
-    {
-      "title": {
-        "en": "IDE",
-        "pt-br": "IDE"
-      },
-      "icon": "pi pi-code",
-      "description": {
-        "en": "A full editor with the agent first-class: visual diffs and multi-file edits.",
-        "pt-br": "Um editor completo com o agente em primeiro plano: diffs visuais e edições multiarquivo."
-      }
-    },
-    {
-      "title": {
-        "en": "Extension",
-        "pt-br": "Extensão"
-      },
-      "icon": "pi pi-th-large",
-      "description": {
-        "en": "Plugs into the editor you already use. Lightest install, keeps your setup.",
-        "pt-br": "Encaixa-se no editor que você já usa. Instalação mais leve, mantém sua configuração."
-      }
-    },
-    {
-      "title": {
-        "en": "Cloud",
-        "pt-br": "Nuvem"
-      },
-      "icon": "pi pi-cloud",
-      "description": {
-        "en": "Hosted, with no local install. Ideal for asynchronous, long-running work — and the shape the AI Assistant in the Console takes.",
-        "pt-br": "Hospedado, sem instalação local. Ideal para trabalho assíncrono e de longa duração — e a forma que o Assistente de IA do Console assume."
-      }
-    }
-  ],
-  "concepts": [
-    {
-      "title": {
-        "en": "MCP",
-        "pt-br": "MCP"
-      },
-      "icon": "pi pi-server",
-      "description": {
-        "en": "The Model Context Protocol — the standard that lets an agent call external tools. Azion ships one MCP server, at mcp.azion.com, and every agent on this page speaks it.",
-        "pt-br": "O Model Context Protocol — o padrão que permite a um agente chamar ferramentas externas. A Azion publica um servidor MCP, em mcp.azion.com, e todo agente desta página o fala."
-      }
-    },
-    {
-      "title": {
-        "en": "Agent context",
-        "pt-br": "Contexto do agente"
-      },
-      "icon": "pi pi-file",
-      "description": {
-        "en": "The files an agent reads before it answers: llms.txt for the documentation index, AGENTS.md for your project’s own conventions.",
-        "pt-br": "Os arquivos que um agente lê antes de responder: llms.txt para o índice da documentação, AGENTS.md para as convenções do seu projeto."
-      }
-    },
-    {
-      "title": {
-        "en": "Model flexibility",
-        "pt-br": "Flexibilidade de modelo"
-      },
-      "icon": "pi pi-sliders-h",
-      "description": {
-        "en": "Locked ties you to the maker’s own models. BYOK takes your provider key. Multi-provider switches between several.",
-        "pt-br": "Fixo prende você aos modelos do próprio fabricante. BYOK usa a chave do seu provedor. Multiprovedor alterna entre vários."
-      }
-    },
-    {
-      "title": {
-        "en": "Context",
-        "pt-br": "Contexto"
-      },
-      "icon": "pi pi-database",
-      "description": {
-        "en": "Session forgets at the end of a conversation. Project memory persists in a file you commit. Indexed codebase keeps a searchable index of the whole repository.",
-        "pt-br": "Sessão esquece ao fim de uma conversa. Memória de projeto persiste em um arquivo que você commita. Codebase indexado mantém um índice pesquisável de todo o repositório."
-      }
-    }
-  ],
-  "tradeoffs": [
-    {
-      "title": {
-        "en": "Cloud vs. local",
-        "pt-br": "Nuvem vs. local"
-      },
-      "icon": "pi pi-cloud-upload",
-      "description": {
-        "en": "Cloud runs long tasks without holding your machine, and sends your code somewhere. Local keeps everything on disk, and stops when your laptop does.",
-        "pt-br": "A nuvem executa tarefas longas sem ocupar sua máquina, e envia seu código para algum lugar. Local mantém tudo em disco, e para quando seu laptop para."
-      }
-    },
-    {
-      "title": {
-        "en": "Proprietary vs. open source",
-        "pt-br": "Proprietário vs. código aberto"
-      },
-      "icon": "pi pi-github",
-      "description": {
-        "en": "Open source can be audited, forked and self-hosted. Proprietary tends to ship the newest capability first.",
-        "pt-br": "Código aberto pode ser auditado, bifurcado e hospedado por você. Proprietário tende a entregar a capacidade mais nova primeiro."
-      }
-    },
-    {
-      "title": {
-        "en": "Locked model vs. BYOK",
-        "pt-br": "Modelo fixo vs. BYOK"
-      },
-      "icon": "pi pi-key",
-      "description": {
-        "en": "A locked model is tuned for its own agent and priced as one subscription. BYOK lets you choose the model per task and pay per token.",
-        "pt-br": "Um modelo fixo é ajustado para o próprio agente e cobrado como uma assinatura. BYOK permite escolher o modelo por tarefa e pagar por token."
-      }
-    },
-    {
-      "title": {
-        "en": "Session vs. indexed codebase",
-        "pt-br": "Sessão vs. codebase indexado"
-      },
-      "icon": "pi pi-search",
-      "description": {
-        "en": "An index answers questions about code nobody opened, at the cost of a copy of the repository. A session only knows what it was shown.",
-        "pt-br": "Um índice responde perguntas sobre código que ninguém abriu, ao custo de uma cópia do repositório. Uma sessão só sabe o que lhe foi mostrado."
-      }
-    }
-  ],
-  "steps": {
-    "install": {
-      "en": "Install {name}",
-      "pt-br": "Instale o {name}"
-    },
-    "token": {
-      "title": {
-        "en": "Create a Personal Token",
-        "pt-br": "Crie um Personal Token"
-      },
-      "body": {
-        "en": "The [[mcp:MCP server]] authenticates as you. Create a [[token:Personal Token]] in the Console, give it only the scopes you want {name} to have, and copy it — it is shown once.",
-        "pt-br": "O [[mcp:servidor MCP]] autentica como você. Crie um [[token:Personal Token]] no Console, dê a ele apenas os escopos que você quer que o {name} tenha, e copie-o — ele é mostrado uma única vez."
-      },
-      "link": {
-        "en": "Console › Personal Tokens",
-        "pt-br": "Console › Personal Tokens"
-      }
-    },
-    "connect": {
-      "en": "Connect the Azion MCP server",
-      "pt-br": "Conecte o servidor MCP da Azion"
-    },
-    "verify": {
-      "en": "Verify, then try a prompt",
-      "pt-br": "Verifique, depois teste um prompt"
-    },
-    "tryIt": {
-      "en": "Try it",
-      "pt-br": "Experimente"
-    }
-  },
-  "tooltips": {
-    "mcp": {
-      "headline": "MCP",
-      "tip": {
-        "en": "Model Context Protocol — the open standard an agent uses to call tools it did not ship with. Azion exposes nine of them over one authenticated HTTP endpoint.",
-        "pt-br": "Model Context Protocol — o padrão aberto que um agente usa para chamar ferramentas que não vieram com ele. A Azion expõe nove delas em um endpoint HTTP autenticado."
-      },
-      "cta": {
-        "en": "See the nine tools",
-        "pt-br": "Veja as nove ferramentas"
-      },
-      "href": "#mcp-server"
-    },
-    "token": {
-      "headline": "Personal Token",
-      "tip": {
-        "en": "Your own API credential, scoped to the permissions you choose and revocable at any time. The agent authenticates as you with it — it never gets one of its own.",
-        "pt-br": "Sua própria credencial de API, limitada às permissões que você escolhe e revogável a qualquer momento. O agente autentica como você com ela — nunca recebe uma própria."
-      },
-      "cta": {
-        "en": "Console › Personal Tokens",
-        "pt-br": "Console › Personal Tokens"
-      },
-      "href": "https://console.azion.com/personal-tokens"
-    },
-    "cli": {
-      "headline": "Azion CLI",
-      "tip": {
-        "en": "The command-line tool that builds and deploys from your working copy, and covers the product commands the API does not.",
-        "pt-br": "A ferramenta de linha de comando que compila e implanta a partir da sua cópia de trabalho, e cobre os comandos de produto que a API não cobre."
-      },
-      "cta": {
-        "en": "Set up the CLI",
-        "pt-br": "Configure a CLI"
-      },
-      "href": "#azion-cli"
-    },
-    "connector": {
-      "headline": "Connectors",
-      "tip": {
-        "en": "Where an application fetches content from — a bucket, an origin server, a live stream. Called Origins before v4, which is why a model trained earlier still asks for one.",
-        "pt-br": "De onde uma aplicação busca conteúdo — um bucket, um servidor de origem, uma transmissão ao vivo. Chamados Origins antes da v4, por isso um modelo treinado antes ainda pede por um."
-      },
-      "cta": {
-        "en": "Platform overview",
-        "pt-br": "Visão geral da plataforma"
-      },
-      "href": {
-        "en": "/en/documentation/platform/",
-        "pt-br": "/pt-br/documentacao/plataforma/"
-      }
-    },
-    "workload": {
-      "headline": "Workloads",
-      "tip": {
-        "en": "The public entry point that binds a domain and its TLS to an application. Called Domains before v4.",
-        "pt-br": "O ponto de entrada público que liga um domínio e seu TLS a uma aplicação. Chamados Domains antes da v4."
-      },
-      "cta": {
-        "en": "Platform overview",
-        "pt-br": "Visão geral da plataforma"
-      },
-      "href": {
-        "en": "/en/documentation/platform/",
-        "pt-br": "/pt-br/documentacao/plataforma/"
-      }
-    }
-  },
-  "faq": [
-    {
-      "question": {
-        "en": "Should I use the MCP server, the CLI, or both?",
-        "pt-br": "Devo usar o servidor MCP, a CLI ou ambos?"
-      },
-      "answer": {
-        "en": "Both, and they do different jobs. The [[mcp:MCP server]] is how {name} looks things up and creates configuration through the API; the [[cli:Azion CLI]] is how it builds and deploys from your working copy. Ask for a deploy and a connected agent will reach for the CLI on its own.",
-        "pt-br": "Ambos, e eles fazem trabalhos diferentes. O [[mcp:servidor MCP]] é como o {name} consulta informações e cria configuração pela API; a [[cli:Azion CLI]] é como ele compila e implanta a partir da sua cópia de trabalho. Peça um deploy e um agente conectado recorre à CLI por conta própria."
-      }
-    },
-    {
-      "question": {
-        "en": "What can {name} do with my Personal Token?",
-        "pt-br": "O que o {name} pode fazer com meu Personal Token?"
-      },
-      "answer": {
-        "en": "Exactly what you scoped it for. The [[token:Personal Token]] is yours, not the agent’s — six of the nine tools only read documentation, and the three that write go through the same API a person would. Scope a token per project, and revoke it in the Console the moment the experiment is over.",
-        "pt-br": "Exatamente o que você definiu no escopo. O [[token:Personal Token]] é seu, não do agente — seis das nove ferramentas só leem documentação, e as três que escrevem passam pela mesma API que uma pessoa usaria. Crie um token por projeto e revogue-o no Console assim que o experimento terminar."
-      }
-    },
-    {
-      "question": {
-        "en": "Can {name} deploy to Azion without leaving {surface}?",
-        "pt-br": "O {name} consegue fazer deploy na Azion sem sair {surfaceDe}?"
-      },
-      "answer": {
-        "en": "Yes. It runs `azion deploy` for you and reads back the application’s domain. First deploy on a new account also needs `azion login`, which is interactive — run that one yourself.",
-        "pt-br": "Sim. Ele executa `azion deploy` por você e lê de volta o domínio da aplicação. O primeiro deploy em uma conta nova também precisa de `azion login`, que é interativo — execute esse você mesmo."
-      }
-    }
-  ],
-  "surface": {
-    "terminal": {
-      "en": "the terminal",
-      "pt-br": "do terminal"
-    },
-    "editor": {
-      "en": "the editor",
-      "pt-br": "do editor"
-    }
-  },
-  "troubleshooting": [
-    {
-      "question": {
-        "en": "The server never connects in {name}",
-        "pt-br": "O servidor nunca conecta no {name}"
-      },
-      "answer": {
-        "en": "Check the header before anything else — a wrong prefix or an expired token fails as a silent 401, not as an error in the tool. {note}",
-        "pt-br": "Verifique o cabeçalho antes de tudo — um prefixo errado ou um token expirado falha como um 401 silencioso, não como um erro na ferramenta. {note}"
-      },
-      "fallbackNote": {
-        "en": "Then restart the client: every one of them reads its MCP configuration at startup.",
-        "pt-br": "Depois reinicie o cliente: todos eles leem a configuração de MCP na inicialização."
-      }
-    },
-    {
-      "question": {
-        "en": "It answers with product names that no longer exist",
-        "pt-br": "Ele responde com nomes de produtos que não existem mais"
-      },
-      "answer": {
-        "en": "That is the training data, not the connection: Origins became [[connector:Connectors]] and Domains became [[workload:Workloads]] in v4. Point it at the Azion MCP server page once per session, or paste the primer above, and it corrects itself.",
-        "pt-br": "Isso é o dado de treinamento, não a conexão: Origins virou [[connector:Connectors]] e Domains virou [[workload:Workloads]] na v4. Aponte-o para a página do servidor MCP da Azion uma vez por sessão, ou cole o primer acima, e ele se corrige."
-      }
-    },
-    {
-      "question": {
-        "en": "It writes configuration that the CLI then rejects",
-        "pt-br": "Ele escreve configuração que a CLI depois rejeita"
-      },
-      "answer": {
-        "en": "Ask it to look the resource up first — `search_azion_api_v4_commands` returns the current shape, where the model’s memory returns last year’s. A rejected deploy almost always means it skipped the lookup.",
-        "pt-br": "Peça para ele consultar o recurso primeiro — `search_azion_api_v4_commands` retorna a forma atual, enquanto a memória do modelo retorna a do ano passado. Um deploy rejeitado quase sempre significa que ele pulou a consulta."
-      }
-    }
-  ],
-  "labels": {
-    "filters": {
-      "All": {
-        "en": "All",
-        "pt-br": "Todos"
-      },
-      "Terminal": {
-        "en": "Terminal",
-        "pt-br": "Terminal"
-      },
-      "IDE": {
-        "en": "IDE",
-        "pt-br": "IDE"
-      },
-      "Extension": {
-        "en": "Extension",
-        "pt-br": "Extensão"
-      }
-    },
-    "values": {
-      "Subscription": {
-        "en": "Subscription",
-        "pt-br": "Assinatura"
-      },
-      "Hybrid": {
-        "en": "Hybrid",
-        "pt-br": "Híbrido"
-      },
-      "BYOK": {
-        "en": "BYOK",
-        "pt-br": "BYOK"
-      },
-      "Locked": {
-        "en": "Locked",
-        "pt-br": "Fixo"
-      },
-      "Multi-provider": {
-        "en": "Multi-provider",
-        "pt-br": "Multiprovedor"
-      },
-      "Project memory": {
-        "en": "Project memory",
-        "pt-br": "Memória de projeto"
-      },
-      "Indexed codebase": {
-        "en": "Indexed codebase",
-        "pt-br": "Codebase indexado"
-      },
-      "Open source": {
-        "en": "Open source",
-        "pt-br": "Código aberto"
-      }
-    },
-    "columns": {
-      "agent": {
-        "en": "Agent",
-        "pt-br": "Agente"
-      },
-      "terminal": {
-        "en": "Terminal",
-        "pt-br": "Terminal"
-      },
-      "ide": {
-        "en": "IDE",
-        "pt-br": "IDE"
-      },
-      "extension": {
-        "en": "Extension",
-        "pt-br": "Extensão"
-      },
-      "openSource": {
-        "en": "Open source",
-        "pt-br": "Código aberto"
-      },
-      "pricing": {
-        "en": "Pricing",
-        "pt-br": "Preço"
-      },
-      "model": {
-        "en": "Model",
-        "pt-br": "Modelo"
-      },
-      "context": {
-        "en": "Context",
-        "pt-br": "Contexto"
-      },
-      "tool": {
-        "en": "Tool",
-        "pt-br": "Ferramenta"
-      },
-      "what": {
-        "en": "What it does",
-        "pt-br": "O que faz"
-      }
-    },
-    "yes": {
-      "en": "Yes",
-      "pt-br": "Sim"
-    },
-    "no": {
-      "en": "No",
-      "pt-br": "Não"
-    },
-    "links": {
-      "mcp": {
-        "en": "Azion MCP server",
-        "pt-br": "Servidor MCP da Azion"
-      },
-      "mcpConfig": {
-        "en": "MCP configuration",
-        "pt-br": "Configuração do MCP"
-      },
-      "cli": {
-        "en": "Azion CLI",
-        "pt-br": "Azion CLI"
-      },
-      "docs": {
-        "en": "{name} docs",
-        "pt-br": "Documentação do {name}"
-      }
-    },
-    "madeBy": {
-      "en": "Made by {vendor}.",
-      "pt-br": "Feito por {vendor}."
-    },
-    "plusAzion": {
-      "en": "{name} + Azion",
-      "pt-br": "{name} + Azion"
-    }
-  }
-}
diff --git a/src/includes/agent-setup/en/agent-docs.mdx b/src/includes/agent-setup/en/agent-docs.mdx
new file mode 100644
index 0000000000..0ace4f150d
--- /dev/null
+++ b/src/includes/agent-setup/en/agent-docs.mdx
@@ -0,0 +1,12 @@
+import DocItem from '@aziontech/webkit/doc-item';
+import FrameBox from '@aziontech/webkit/frame-box';
+import ItemList from '@aziontech/webkit/item-list';
+
+<FrameBox borders="all">
+<ItemList>
+	<DocItem title="llms.txt" icon="pi pi-list" href="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/en/docs-llms.txt" target="_blank">Machine-readable index of the whole documentation.</DocItem>
+	<DocItem title="Azion MCP server" icon="pi pi-sparkles" href="/en/documentation/devtools/mcp/" target="_self">Canonical facts: current product names, API base URL, auth format.</DocItem>
+	<DocItem title="API v4 reference" icon="pi pi-cloud" href="https://api.azion.com/v4" target="_blank">The REST surface behind every tool call, with the Token auth header.</DocItem>
+	<DocItem title="AGENTS.md" icon="pi pi-file-edit" href="#agent-context" target="_self">Your own conventions, committed at the repository root: workload names, connector ids, what not to touch.</DocItem>
+</ItemList>
+</FrameBox>
diff --git a/src/includes/agent-setup/en/cards/claude-code.mdx b/src/includes/agent-setup/en/cards/claude-code.mdx
new file mode 100644
index 0000000000..aa48270ea0
--- /dev/null
+++ b/src/includes/agent-setup/en/cards/claude-code.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Claude Code" overline="Anthropic" href="/en/documentation/agent-setup/claude-code/"><AgentMark slot="icon" name="claude" />Terminal agent that reads your codebase, runs commands, and edits files. One CLI command connects the Azion MCP server.</DocCard>
diff --git a/src/includes/agent-setup/en/cards/codex.mdx b/src/includes/agent-setup/en/cards/codex.mdx
new file mode 100644
index 0000000000..f92208535c
--- /dev/null
+++ b/src/includes/agent-setup/en/cards/codex.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Codex" overline="OpenAI" href="/en/documentation/agent-setup/codex/"><AgentMark slot="icon" name="codex" />Terminal agent that runs commands in a sandbox and reads AGENTS.md natively. Azion goes in config.toml.</DocCard>
diff --git a/src/includes/agent-setup/en/cards/cursor.mdx b/src/includes/agent-setup/en/cards/cursor.mdx
new file mode 100644
index 0000000000..dc2b67c7da
--- /dev/null
+++ b/src/includes/agent-setup/en/cards/cursor.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Cursor" overline="Cursor" href="/en/documentation/agent-setup/cursor/"><AgentMark slot="icon" name="cursor" />AI-first IDE built on VS Code, with multi-file Composer edits and background agents. Azion plugs into its MCP settings.</DocCard>
diff --git a/src/includes/agent-setup/en/cards/gemini-cli.mdx b/src/includes/agent-setup/en/cards/gemini-cli.mdx
new file mode 100644
index 0000000000..061c3a1930
--- /dev/null
+++ b/src/includes/agent-setup/en/cards/gemini-cli.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Gemini CLI" overline="Google" href="/en/documentation/agent-setup/gemini-cli/"><AgentMark slot="icon" name="gemini" />Open source terminal agent with a free tier. Declare Azion once in settings.json and verify with /mcp.</DocCard>
diff --git a/src/includes/agent-setup/en/cards/github-copilot.mdx b/src/includes/agent-setup/en/cards/github-copilot.mdx
new file mode 100644
index 0000000000..71dec78923
--- /dev/null
+++ b/src/includes/agent-setup/en/cards/github-copilot.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="GitHub Copilot" overline="GitHub" href="/en/documentation/agent-setup/github-copilot/"><AgentMark slot="icon" name="copilot" />Agent mode inside VS Code, with workspace context and native pull-request integration. A file in the project connects Azion.</DocCard>
diff --git a/src/includes/agent-setup/en/cards/opencode.mdx b/src/includes/agent-setup/en/cards/opencode.mdx
new file mode 100644
index 0000000000..3f4975c5ea
--- /dev/null
+++ b/src/includes/agent-setup/en/cards/opencode.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="OpenCode" overline="SST" href="/en/documentation/agent-setup/opencode/"><AgentMark slot="icon" name="opencode" />Open source, provider-agnostic terminal agent. Azion is one entry in its MCP block, whichever model you point it at.</DocCard>
diff --git a/src/includes/agent-setup/en/cards/windsurf.mdx b/src/includes/agent-setup/en/cards/windsurf.mdx
new file mode 100644
index 0000000000..b4c59bb0a5
--- /dev/null
+++ b/src/includes/agent-setup/en/cards/windsurf.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Windsurf" overline="Cognition" href="/en/documentation/agent-setup/windsurf/"><AgentMark slot="icon" name="windsurf" />Agentic IDE built around Cascade for multi-step tasks. Connects to Azion through mcp-remote.</DocCard>
diff --git a/src/includes/agent-setup/en/cli-samples.mdx b/src/includes/agent-setup/en/cli-samples.mdx
new file mode 100644
index 0000000000..5906d8bde8
--- /dev/null
+++ b/src/includes/agent-setup/en/cli-samples.mdx
@@ -0,0 +1,16 @@
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "Install",
+			"language": "bash",
+			"code": "npm install -g azion\nazion login"
+		},
+		{
+			"label": "Deploy",
+			"language": "bash",
+			"code": "# From the project root — the agent runs these for you\nazion init\nazion deploy"
+		}
+	]}
+/>
diff --git a/src/includes/agent-setup/en/mcp-tools.mdx b/src/includes/agent-setup/en/mcp-tools.mdx
new file mode 100644
index 0000000000..1177aa2fa5
--- /dev/null
+++ b/src/includes/agent-setup/en/mcp-tools.mdx
@@ -0,0 +1,46 @@
+import AgentToolsTable from '~/components/webkit/AgentToolsTable.vue';
+
+<AgentToolsTable
+	columns={{
+		"tool": "Tool",
+		"what": "What it does"
+	}}
+	tools={[
+		{
+			"id": "search_azion_docs_and_site",
+			"description": "Search the documentation and the product pages."
+		},
+		{
+			"id": "search_azion_code_samples",
+			"description": "Retrieve working examples from the code-samples library."
+		},
+		{
+			"id": "search_azion_cli_commands",
+			"description": "Look up an Azion CLI command and its flags."
+		},
+		{
+			"id": "search_azion_api_v4_commands",
+			"description": "The current REST API — Connectors, Workloads, Applications."
+		},
+		{
+			"id": "search_azion_api_v3_commands",
+			"description": "The legacy API, for accounts still on v3 resources."
+		},
+		{
+			"id": "search_azion_terraform",
+			"description": "The Terraform provider’s resources and arguments."
+		},
+		{
+			"id": "create_rules_engine",
+			"description": "Generate a Rules Engine configuration from a description."
+		},
+		{
+			"id": "create_graphql_query",
+			"description": "Build a GraphQL query against the analytics API."
+		},
+		{
+			"id": "deploy_azion_static_site",
+			"description": "Walk a static project through to a deployed application."
+		}
+	]}
+/>
diff --git a/src/includes/agent-setup/pt-br/agent-docs.mdx b/src/includes/agent-setup/pt-br/agent-docs.mdx
new file mode 100644
index 0000000000..bcc824f7e7
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/agent-docs.mdx
@@ -0,0 +1,12 @@
+import DocItem from '@aziontech/webkit/doc-item';
+import FrameBox from '@aziontech/webkit/frame-box';
+import ItemList from '@aziontech/webkit/item-list';
+
+<FrameBox borders="all">
+<ItemList>
+	<DocItem title="llms.txt" icon="pi pi-list" href="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/pt-br/docs-llms.txt" target="_blank">Índice legível por máquina de toda a documentação.</DocItem>
+	<DocItem title="Servidor MCP da Azion" icon="pi pi-sparkles" href="/pt-br/documentacao/devtools/mcp/" target="_self">Fatos canônicos: nomes atuais dos produtos, URL base da API, formato de autenticação.</DocItem>
+	<DocItem title="Referência da API v4" icon="pi pi-cloud" href="https://api.azion.com/v4" target="_blank">A superfície REST por trás de cada chamada de ferramenta, com o cabeçalho de autenticação Token.</DocItem>
+	<DocItem title="AGENTS.md" icon="pi pi-file-edit" href="#agent-context" target="_self">Suas próprias convenções, commitadas na raiz do repositório: nomes de workloads, ids de connectors, o que não tocar.</DocItem>
+</ItemList>
+</FrameBox>
diff --git a/src/includes/agent-setup/pt-br/cards/claude-code.mdx b/src/includes/agent-setup/pt-br/cards/claude-code.mdx
new file mode 100644
index 0000000000..9704e6693a
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cards/claude-code.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Claude Code" overline="Anthropic" href="/pt-br/documentacao/agent-setup/claude-code/"><AgentMark slot="icon" name="claude" />Agente de terminal que lê sua base de código, executa comandos e edita arquivos. Um comando da CLI conecta o servidor MCP da Azion.</DocCard>
diff --git a/src/includes/agent-setup/pt-br/cards/codex.mdx b/src/includes/agent-setup/pt-br/cards/codex.mdx
new file mode 100644
index 0000000000..1a443f963a
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cards/codex.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Codex" overline="OpenAI" href="/pt-br/documentacao/agent-setup/codex/"><AgentMark slot="icon" name="codex" />Agente de terminal que executa comandos em um sandbox e lê AGENTS.md nativamente. A Azion entra no config.toml.</DocCard>
diff --git a/src/includes/agent-setup/pt-br/cards/cursor.mdx b/src/includes/agent-setup/pt-br/cards/cursor.mdx
new file mode 100644
index 0000000000..f832f47e01
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cards/cursor.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Cursor" overline="Cursor" href="/pt-br/documentacao/agent-setup/cursor/"><AgentMark slot="icon" name="cursor" />IDE AI-first construída sobre o VS Code, com edições multiarquivo no Composer e agentes em segundo plano. A Azion entra nas suas configurações de MCP.</DocCard>
diff --git a/src/includes/agent-setup/pt-br/cards/gemini-cli.mdx b/src/includes/agent-setup/pt-br/cards/gemini-cli.mdx
new file mode 100644
index 0000000000..de59a1f2de
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cards/gemini-cli.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Gemini CLI" overline="Google" href="/pt-br/documentacao/agent-setup/gemini-cli/"><AgentMark slot="icon" name="gemini" />Agente de terminal de código aberto com um plano gratuito. Declare a Azion uma vez no settings.json e verifique com /mcp.</DocCard>
diff --git a/src/includes/agent-setup/pt-br/cards/github-copilot.mdx b/src/includes/agent-setup/pt-br/cards/github-copilot.mdx
new file mode 100644
index 0000000000..a5ed29b951
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cards/github-copilot.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="GitHub Copilot" overline="GitHub" href="/pt-br/documentacao/agent-setup/github-copilot/"><AgentMark slot="icon" name="copilot" />Modo agente dentro do VS Code, com contexto do workspace e integração nativa com pull requests. Um arquivo no projeto conecta a Azion.</DocCard>
diff --git a/src/includes/agent-setup/pt-br/cards/opencode.mdx b/src/includes/agent-setup/pt-br/cards/opencode.mdx
new file mode 100644
index 0000000000..906262dd9e
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cards/opencode.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="OpenCode" overline="SST" href="/pt-br/documentacao/agent-setup/opencode/"><AgentMark slot="icon" name="opencode" />Agente de terminal de código aberto e agnóstico de provedor. A Azion é uma entrada no bloco MCP dele, qualquer que seja o modelo que você apontar.</DocCard>
diff --git a/src/includes/agent-setup/pt-br/cards/windsurf.mdx b/src/includes/agent-setup/pt-br/cards/windsurf.mdx
new file mode 100644
index 0000000000..95fb00ba5d
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cards/windsurf.mdx
@@ -0,0 +1,4 @@
+import AgentMark from '~/components/webkit/AgentMark.vue';
+import DocCard from '@aziontech/webkit/doc-card';
+
+<DocCard title="Windsurf" overline="Cognition" href="/pt-br/documentacao/agent-setup/windsurf/"><AgentMark slot="icon" name="windsurf" />IDE agêntica construída em torno do Cascade para tarefas em várias etapas. Conecta-se à Azion por meio do mcp-remote.</DocCard>
diff --git a/src/includes/agent-setup/pt-br/cli-samples.mdx b/src/includes/agent-setup/pt-br/cli-samples.mdx
new file mode 100644
index 0000000000..b0fabfd7a9
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/cli-samples.mdx
@@ -0,0 +1,16 @@
+import AgentSamples from '~/components/webkit/AgentSamples.vue';
+
+<AgentSamples client:visible
+	samples={[
+		{
+			"label": "Instalar",
+			"language": "bash",
+			"code": "npm install -g azion\nazion login"
+		},
+		{
+			"label": "Deploy",
+			"language": "bash",
+			"code": "# From the project root — the agent runs these for you\nazion init\nazion deploy"
+		}
+	]}
+/>
diff --git a/src/includes/agent-setup/pt-br/mcp-tools.mdx b/src/includes/agent-setup/pt-br/mcp-tools.mdx
new file mode 100644
index 0000000000..9796feb889
--- /dev/null
+++ b/src/includes/agent-setup/pt-br/mcp-tools.mdx
@@ -0,0 +1,46 @@
+import AgentToolsTable from '~/components/webkit/AgentToolsTable.vue';
+
+<AgentToolsTable
+	columns={{
+		"tool": "Ferramenta",
+		"what": "O que faz"
+	}}
+	tools={[
+		{
+			"id": "search_azion_docs_and_site",
+			"description": "Pesquisa a documentação e as páginas de produto."
+		},
+		{
+			"id": "search_azion_code_samples",
+			"description": "Recupera exemplos funcionais da biblioteca de code samples."
+		},
+		{
+			"id": "search_azion_cli_commands",
+			"description": "Consulta um comando da Azion CLI e suas flags."
+		},
+		{
+			"id": "search_azion_api_v4_commands",
+			"description": "A API REST atual — Connectors, Workloads, Applications."
+		},
+		{
+			"id": "search_azion_api_v3_commands",
+			"description": "A API legada, para contas ainda em recursos v3."
+		},
+		{
+			"id": "search_azion_terraform",
+			"description": "Os recursos e argumentos do provider Terraform."
+		},
+		{
+			"id": "create_rules_engine",
+			"description": "Gera uma configuração do Rules Engine a partir de uma descrição."
+		},
+		{
+			"id": "create_graphql_query",
+			"description": "Monta uma consulta GraphQL na API de analytics."
+		},
+		{
+			"id": "deploy_azion_static_site",
+			"description": "Conduz um projeto estático até uma aplicação implantada."
+		}
+	]}
+/>
diff --git a/src/nav/index.ts b/src/nav/index.ts
index 0b2fdedd0a..e8e1a0ccb7 100644
--- a/src/nav/index.ts
+++ b/src/nav/index.ts
@@ -1,5 +1,6 @@
 import { execFileSync } from 'node:child_process';
-import { statSync } from 'node:fs';
+import { readFileSync, statSync } from 'node:fs';
+import { dirname, join } from 'node:path';
 
 import { getCollection } from 'astro:content';
 
@@ -69,7 +70,7 @@ async function loadPages(): Promise<PageIndex> {
 			permalink: entry.data.permalink?.trim(),
 			title: entry.data.title?.trim(),
 			description: entry.data.description?.trim(),
-			updated: lastUpdated(entry.filePath),
+			updated: pageUpdated(entry.filePath, entry.body),
 		};
 		const existing = pages.get(namespace) ?? {};
 		existing[lang] = facts;
@@ -100,6 +101,7 @@ function lastUpdated(filePath?: string): string | undefined {
 					'--',
 					'src/content/docs',
 					'src/data',
+					'src/includes',
 				],
 				{
 					encoding: 'utf8',
@@ -187,6 +189,52 @@ export async function getNavIndex(lang: Lang): Promise<NavIndex> {
 	return index;
 }
 
+const CONTENT_IMPORT = /^import\s[^;]*?from\s+['"]([^'"]+\.mdx?)['"]/gm;
+const FENCED_CODE = /^(```|~~~)[\s\S]*?^\1/gm;
+
+const cachedPartials = new Map<string, string[]>();
+
+function partialsOf(filePath: string, body: string): string[] {
+	const found: string[] = [];
+	for (const [, source] of body.replace(FENCED_CODE, '').matchAll(CONTENT_IMPORT)) {
+		found.push(
+			source.startsWith('~/') ? join('src', source.slice(2)) : join(dirname(filePath), source)
+		);
+	}
+	return found;
+}
+
+function contentDependencies(filePath: string, body: string): string[] {
+	const seen = new Set<string>();
+	const visit = (partials: string[]) => {
+		for (const partial of partials) {
+			if (seen.has(partial)) continue;
+			seen.add(partial);
+			let nested = cachedPartials.get(partial);
+			if (!nested) {
+				try {
+					nested = partialsOf(partial, readFileSync(partial, 'utf8'));
+				} catch {
+					nested = [];
+				}
+				cachedPartials.set(partial, nested);
+			}
+			visit(nested);
+		}
+	};
+	visit(partialsOf(filePath, body));
+	return [...seen];
+}
+
+function pageUpdated(filePath?: string, body?: string): string | undefined {
+	if (!filePath) return undefined;
+	return [filePath, ...contentDependencies(filePath, body ?? '')]
+		.map(lastUpdated)
+		.filter((date): date is string => Boolean(date))
+		.sort((a, b) => Date.parse(a) - Date.parse(b))
+		.pop();
+}
+
 export async function getTreeId(pathname: string, lang: Lang): Promise<string | undefined> {
 	return (await getNavIndex(lang)).get(withSlashes(pathname.split('?')[0].split('#')[0]))?.treeId;
 }
@@ -206,10 +254,6 @@ export async function getPageFacts(pathname: string, lang: Lang): Promise<PageFa
 	return byHref.get(withSlashes(pathname.split('?')[0].split('#')[0]));
 }
 
-export function getLastChange(filePath: string): string | undefined {
-	return lastUpdated(filePath);
-}
-
 export async function getPageHref(namespace: string, lang: Lang): Promise<string | undefined> {
 	return pageHref(await getNavData(), namespace, lang);
 }