Merge pull request #2270 from CapSoftware/feature/agents-page

feat: add Cap for Agents page and nav tab

Author: richiemcilroy

apps/web/app/(docs)/docs/_components/CopyablePrompt.tsx

@@ -2,58 +2,9 @@
 
 import { Check, Copy } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { CAP_AGENT_PROMPT } from "@/data/agent-prompt";
 
-export const CAP_AGENT_PROMPT = `Set up Cap as my persistent video assistant, then use it to help with the task at the end.
-
-By pasting this prompt, I explicitly authorize these local setup actions: install the official Cap CLI and add or update the Cap skill and local MCP entry for the current agent only. Perform those setup actions yourself. Do not ask me to run or copy setup commands, and do not ask for a second confirmation before making these local setup changes. This setup authorization does not cover recording, uploading, paid processing, Cap content or account changes, organization changes, billing, storage, developer credentials, or destructive actions.
-
-Read these pages and treat them as operating instructions:
-- https://cap.so/docs/agents
-- https://cap.so/docs/agents/setup
-- https://cap.so/docs/agents/workflows
-- https://cap.so/docs/agents/safety
-
-Do not rely on remembered Cap commands. Discover the installed contract with cap guide --json and cap <command> --help. Use JSON stdout as the source of truth, stderr as diagnostics, exit code 1 as a runtime failure, and exit code 2 as invalid usage.
-
-Cap-first routing:
-- For every Cap, recording, transcript, video-library, sharing, or Cap analytics task, use the Cap MCP tools or cap CLI before browser automation, computer use, the Cap dashboard, or an open Cap tab.
-- Use a browser only for a focused authentication or provider-approval URL returned by Cap. Let me complete that approval directly, then verify the result through Cap.
-- If MCP is not loaded in the current process, use the CLI. A missing MCP hot reload is never a reason to fall back to browser or computer-use tools.
-
-Set up Cap:
-1. Identify my operating system and the agent you are running in. Select only the current agent; never install into every detected agent.
-2. Run cap version --json. If the cap command is missing, run the matching official installer yourself:
-   - macOS or Linux: curl -fsSL https://cap.so/install-cli.sh | sh
-   - Windows PowerShell: irm https://cap.so/install-cli.ps1 | iex
-   Do not merely show me the command or ask me to install it manually. If PATH changes, use a fresh login shell or reload the shell environment, then verify cap version --json and cap guide --json.
-3. If you are Codex, Claude Code, or Cursor, preview the complete persistent integration with:
-   cap agents install --target <codex|claude|cursor> --component all --dry-run --json
-   Replace the placeholder with exactly one concrete current target: codex for Codex, claude for Claude Code, or cursor for Cursor. Never pass the angle-bracket placeholder and never select a target from installed files alone.
-   Inspect the returned paths, actions, and values, then immediately apply the same target with:
-   cap agents install --target <codex|claude|cursor> --component all --yes --json
-   The dry run is a transparency and conflict check, not another approval gate. Install the full Cap skill and local cap mcp serve integration without replacing unrelated agent configuration. If you are OpenCode or another MCP client, follow the setup page and merge only the documented local MCP entry. Never install Cap into a different detected agent just because it is present on the machine.
-4. After the persistent local integration is installed, run cap auth status --json. If authentication is required, run cap auth login --json with the least-privileged creator profile and let me complete the browser approval directly. Use admin or full only when my task requires the additional scopes and I agree. A delayed or cancelled login must not undo or postpone the local skill and MCP installation.
-5. Report the exact installed skill path and MCP configuration path. Explain whether the agent must restart to load either component. Continue this task through the CLI when a restart or hot reload is not practical; the installed global skill and MCP configuration must persist for future sessions.
-6. Verify the setup with cap version --json, cap guide --json, cap auth status --json, and cap caps list --limit 1 --json. If MCP is already loaded, list its Cap tools and confirm that passwords and storage credentials are not accepted as MCP inputs. Do not claim MCP is broken merely because the current process needs a restart.
-7. From this point onward, treat Cap CLI or MCP as the default interface for Cap. Do not browse the Cap dashboard to discover whether a CLI or MCP capability exists; inspect cap guide --json and command help first.
-
-Use Cap as an ongoing helper. Learn the complete surface from the installed guide and skill, including:
-- Recording: check cap doctor --json, discover inputs with cap targets --json, ask before capture, use the detached cap record start and cap record stop lifecycle, require recordingMetaExists: true, validate the .cap project, export it, ask again before upload, and return the verified share link.
-- Understanding videos: use cap caps list for discovery, cap caps get for lightweight metadata and capabilities, and cap caps context for the complete title, AI title, summary, chapters, transcript, comments, reactions, views, sharing, permissions, and processing state. Cite useful transcript timestamps.
-- Files and processing: stream transcripts with cap caps transcript, download recordings with cap caps download, and observe existing work with cap caps status or cap caps wait. Never claim that a read or wait started transcription or AI work.
-- Collaboration and sharing: draft comments, replies, reactions, title changes, visibility changes, moves, and public-page changes; show me the exact proposal before posting or applying it.
-- Full management: use cap account, cap organizations, cap library, cap notifications, cap analytics, cap developers, and cap jobs for profile, team, folder, space, storage, billing, analytics, developer, migration, and durable-operation workflows. Discover flags with --help instead of guessing.
-- Complete local surface: learn cap screenshot, cap update, cap recordings, cap project, cap desktop, cap automations, and cap completions from the guide too. Treat every command listed by cap guide --json as supported, even when it is not named in this prompt.
-- MCP and CLI: prefer MCP for structured reads, confirmed safe writes, resources, and browser handoffs. Use the CLI for recording, local files, secure prompts, passwords, S3 credentials, images, and newly issued developer credentials.
-
-Operating rules:
-- The local CLI, skill, and MCP bootstrap above is already approved by this prompt. After setup, start with read-only discovery. Before any mutation, upload, paid processing, recording, comment or reaction, sharing or visibility change, deletion, organization, billing, storage, developer, or credential action, show me the exact proposed action and wait for my explicit confirmation. Pass --yes or confirmed=true only after I confirm.
-- Never ask me to paste passwords, CAP_AGENT_TOKEN, API keys, S3 credentials, or newly issued developer secrets into chat or MCP. Ask me to run the exact secure Cap command in my terminal. For a password-protected Cap, ask me to run cap caps unlock <id-or-url>.
-- Preserve returned Cap, organization, folder, space, member, comment, and operation IDs. Never infer IDs from names or invent results.
-- Wait for asynchronous operations with cap jobs wait and verify the affected resource before reporting success. Clearly separate what you verified from reasonable interpretation and anything you could not verify.
-- Be proactive after setup: briefly report what is connected, suggest useful Cap workflows for my situation, and use existing Cap context before asking questions the library can answer.
-
-My task: Complete the persistent Cap setup now, tell me exactly what is installed and what needs a restart, tell me what you can help me do through Cap, and ask which Cap task I want to start with.`;
+export { CAP_AGENT_PROMPT };
 
 const setupBenefits = [
 	"Installs the Cap CLI",

apps/web/app/(site)/DesktopNavLinks.tsx

@@ -89,6 +89,10 @@ const Links: NavItem[] = [
 		label: "Download",
 		href: "/download",
 	},
+	{
+		label: "Agents",
+		href: "/agents",
+	},
 	{
 		label: "Testimonials",
 		href: "/testimonials",

apps/web/app/(site)/Footer.tsx

@@ -21,6 +21,7 @@ const footerLinks = {
 		{ label: "Blog", href: "/blog" },
 		{ label: "Changelog", href: "/changelog" },
 		{ label: "Docs", href: "/docs" },
+		{ label: "Cap for Agents", href: "/agents" },
 		{ label: "Pricing", href: "/pricing" },
 		{ label: "Download", href: "/download" },
 		{

apps/web/app/(site)/agents/page.tsx

@@ -0,0 +1,68 @@
+import type { Metadata } from "next";
+import { AgentsPage } from "@/components/pages/agents/AgentsPage";
+import {
+	agentFaqs,
+	agentsSeo,
+	agentsSoftwareSchema,
+	setupSteps,
+} from "@/components/pages/agents/content";
+import { buildMarketingMetadata } from "@/lib/og/url";
+import {
+	createBreadcrumbSchema,
+	createFAQSchema,
+	createHowToSchema,
+} from "@/utils/web-schema";
+
+export const metadata: Metadata = {
+	...buildMarketingMetadata({
+		title: agentsSeo.title,
+		description: agentsSeo.description,
+		path: agentsSeo.path,
+		ogTitle: "Cap for Agents",
+		ogDescription:
+			"The screen recorder your agent can run. CLI and MCP for Claude Code, Codex, Cursor, and OpenCode.",
+		ogTag: "Agents",
+	}),
+	keywords: [...agentsSeo.keywords],
+	robots: {
+		index: true,
+		follow: true,
+		googleBot: {
+			index: true,
+			follow: true,
+			"max-image-preview": "large",
+			"max-snippet": -1,
+		},
+	},
+};
+
+const schemas = [
+	createBreadcrumbSchema([
+		{ name: "Home", url: "https://cap.so" },
+		{ name: "Cap for Agents", url: agentsSeo.url },
+	]),
+	createHowToSchema({
+		name: "How to use Cap from an AI agent",
+		description:
+			"Set up the Cap screen recorder inside Claude Code, Codex, Cursor, OpenCode, or any shell-capable agent with one pasted prompt.",
+		totalTime: "PT3M",
+		steps: setupSteps.map((step) => ({ name: step.name, text: step.text })),
+	}),
+	createFAQSchema(
+		agentFaqs.map((faq) => ({ question: faq.question, answer: faq.answer })),
+	),
+	agentsSoftwareSchema,
+];
+
+export default function Page() {
+	return (
+		<>
+			{schemas.map((schema) => (
+				<script key={schema["@type"]} type="application/ld+json">
+					{JSON.stringify(schema).replace(/</g, "\\u003c")}
+				</script>
+			))}
+			<AgentsPage />
+		</>
+	);
+}

apps/web/components/pages/HomeTwo/Agents.tsx

@@ -237,10 +237,10 @@ export const Agents = () => {
 							{active.note}
 						</p>
 						<Link
-							href="/docs/agents"
+							href="/agents"
 							className={classNames(BTN_SECONDARY, "self-start")}
 						>
-							Read the agent docs
+							Explore Cap for Agents
 						</Link>
 					</div>
 				</div>

apps/web/components/pages/HomeTwo/scenes/AgentScene.tsx

@@ -182,7 +182,7 @@ const Tool = ({
 			style={{ opacity: status === "idle" ? 0 : 1 }}
 		>
 			<span className="shrink-0">⎿</span>
-			<div className="min-w-0 flex-1">{children}</div>
+			<div className="min-w-0 flex-1 [overflow-wrap:anywhere]">{children}</div>
 		</div>
 	</div>
 );
@@ -362,8 +362,9 @@ export const AgentScene = (props: SceneProps) => {
 							}
 						>
 							<Json>
-								{"{"} <Key>"url"</Key>: <Str>"https://cap.so/s/x7f2k9"</Str>{" "}
-								{"}"}
+								{"{"} <Key>"type"</Key>: <Str>"uploaded"</Str>, <Key>"id"</Key>:{" "}
+								<Str>"x7f2k9"</Str>, <Key>"link"</Key>:{" "}
+								<Str>"https://cap.so/s/x7f2k9"</Str> {"}"}
 							</Json>
 						</Tool>
 						<Tool

apps/web/components/pages/agents/AgentsPage.tsx

@@ -0,0 +1,36 @@
+import { htMono, htSans, htSerif } from "@/components/pages/HomeTwo/fonts";
+import { BAND, CREAM, grainBg, SHELL } from "@/components/pages/HomeTwo/theme";
+import { Capabilities } from "./Capabilities";
+import { Faq } from "./Faq";
+import { FinalCta } from "./FinalCta";
+import { Harnesses } from "./Harnesses";
+import { Hero } from "./Hero";
+import { Prompts } from "./Prompts";
+import { Safety } from "./Safety";
+import { SetupPrompt } from "./SetupPrompt";
+
+export const AgentsPage = () => (
+	<div
+		data-header-flat
+		className={`${htSans.className} ${htSans.variable} ${htSerif.variable} ${htMono.variable} text-[#111111]`}
+		style={grainBg(SHELL)}
+	>
+		<div className="px-2.5 pb-2.5 pt-[68px] sm:px-4 sm:pb-4 lg:pt-[76px]">
+			<div
+				className="rounded-[24px] shadow-[0_0_0_1px_rgba(17,17,17,0.045)]"
+				style={grainBg(CREAM)}
+			>
+				<div className="rounded-[24px] rounded-b-[28px]" style={grainBg(BAND)}>
+					<Hero />
+				</div>
+				<SetupPrompt />
+				<Harnesses />
+				<Capabilities />
+				<Prompts />
+				<Safety />
+				<Faq />
+				<FinalCta />
+			</div>
+		</div>
+	</div>
+);

apps/web/components/pages/agents/Capabilities.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { classNames } from "@cap/utils/helpers";
+import { useRef, useState } from "react";
+import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow";
+import {
+	BODY_TEXT,
+	GRAIN,
+	H_SECTION,
+	MODE_THEME,
+	MONO,
+} from "@/components/pages/HomeTwo/theme";
+import {
+	useInView,
+	useReducedMotion,
+} from "@/components/pages/HomeTwo/visibility";
+import { capabilities } from "./content";
+import { TaskReel } from "./TaskReel";
+
+const DARK = {
+	backgroundColor: "#111111",
+	backgroundImage: GRAIN,
+	backgroundSize: "200px 200px",
+} as const;
+
+export const Capabilities = () => {
+	const [active, setActive] = useState(0);
+	const gridRef = useRef<HTMLDivElement | null>(null);
+	const inView = useInView(gridRef, "-5% 0px -5% 0px");
+	const reduced = useReducedMotion();
+	const progressRef = useRef<HTMLSpanElement | null>(null);
+
+	return (
+		<section className="px-5 py-20 lg:py-28">
+			<div className="mx-auto max-w-[1200px]">
+				<div className="mx-auto flex max-w-[760px] flex-col items-center text-center">
+					<Eyebrow accent={MODE_THEME.studio.accent}>
+						No app. No dashboard.
+					</Eyebrow>
+					<h2
+						className={`${H_SECTION} mt-6 text-balance text-[clamp(36px,4.6vw,56px)]`}
+					>
+						Everything Cap does, from your agent
+					</h2>
+					<p
+						className={`${BODY_TEXT} mt-6 max-w-[640px] text-balance text-[16.5px] leading-[1.5] text-[rgba(17,17,17,0.78)] sm:text-[17.5px]`}
+					>
+						The CLI and MCP server cover the whole screen recorder and the
+						library behind it: recording, sharing, transcripts, comments,
+						folders, spaces, members, storage, billing, analytics, and
+						migrations. Your agent discovers the exact contract with cap guide
+						--json, so it never has to guess a flag.
+					</p>
+				</div>
+
+				<div
+					ref={gridRef}
+					className="mt-14 grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-8"
+				>
+					<div
+						className="rounded-[24px] p-4 lg:sticky lg:top-24 lg:self-start lg:p-5"
+						style={DARK}
+					>
+						<TaskReel
+							active={active}
+							playing={inView}
+							reduced={reduced}
+							progressRef={progressRef}
+							onEnd={() =>
+								setActive((current) => (current + 1) % capabilities.length)
+							}
+						/>
+					</div>
+
+					<ol className="flex flex-col lg:pt-2">
+						{capabilities.map((capability, i) => {
+							const isActive = i === active;
+							const theme = MODE_THEME[capability.mode];
+							return (
+								<li
+									key={capability.key}
+									className="border-t border-[#E1E7EE] last:border-b"
+								>
+									<button
+										type="button"
+										aria-pressed={isActive}
+										onClick={() => setActive(i)}
+										className="group relative w-full py-5 pl-6 pr-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111] focus-visible:ring-offset-4 focus-visible:ring-offset-[#F8FAFC] lg:py-6"
+									>
+										<span
+											aria-hidden="true"
+											className="absolute bottom-5 left-0 top-5 w-[2px] rounded-full bg-[#E1E7EE] lg:bottom-6 lg:top-6"
+										>
+											<span
+												ref={isActive ? progressRef : undefined}
+												className={classNames(
+													"absolute inset-0 origin-top rounded-full transition-opacity duration-300",
+													isActive ? "opacity-100" : "opacity-0",
+												)}
+												style={{
+													background: theme.glyph,
+													transform: "scaleY(0)",
+												}}
+											/>
+										</span>
+										<span className="flex items-baseline justify-between gap-4">
+											<span
+												className={classNames(
+													"text-[19px] font-normal leading-[1.1] tracking-[-0.02em] transition-colors duration-300",
+													isActive
+														? "text-[#111111]"
+														: "text-[rgba(17,17,17,0.55)] group-hover:text-[#111111]",
+												)}
+											>
+												{capability.title}
+											</span>
+											<code
+												className={classNames(
+													MONO,
+													"hidden shrink-0 text-[11.5px] transition-colors duration-300 sm:block",
+													isActive
+														? "text-[rgba(17,17,17,0.6)]"
+														: "text-[rgba(17,17,17,0.35)]",
+												)}
+											>
+												{capability.command}
+											</code>
+										</span>
+										<span
+											className={classNames(
+												BODY_TEXT,
+												"mt-1.5 block max-w-[520px] text-[14.5px] leading-[1.5] transition-colors duration-300",
+												isActive
+													? "text-[rgba(17,17,17,0.72)]"
+													: "text-[rgba(17,17,17,0.5)]",
+											)}
+										>
+											{capability.body}
+										</span>
+									</button>
+								</li>
+							);
+						})}
+					</ol>
+				</div>
+			</div>
+		</section>
+	);
+};