diff --git a/apps/web/app/(docs)/docs/_components/CopyablePrompt.tsx b/apps/web/app/(docs)/docs/_components/CopyablePrompt.tsx index c9120938a56..0538d0a9c3f 100644 --- a/apps/web/app/(docs)/docs/_components/CopyablePrompt.tsx +++ b/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 --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 --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 --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 . -- 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", diff --git a/apps/web/app/(site)/DesktopNavLinks.tsx b/apps/web/app/(site)/DesktopNavLinks.tsx index 72d2b6e7b8b..25318ce1ca3 100644 --- a/apps/web/app/(site)/DesktopNavLinks.tsx +++ b/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", diff --git a/apps/web/app/(site)/Footer.tsx b/apps/web/app/(site)/Footer.tsx index 6a1b1b17206..8596e5391e2 100644 --- a/apps/web/app/(site)/Footer.tsx +++ b/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" }, { diff --git a/apps/web/app/(site)/agents/page.tsx b/apps/web/app/(site)/agents/page.tsx new file mode 100644 index 00000000000..b74e6a202ba --- /dev/null +++ b/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) => ( + + ))} + + + ); +} diff --git a/apps/web/components/pages/HomeTwo/Agents.tsx b/apps/web/components/pages/HomeTwo/Agents.tsx index d8cdff150cd..d738f1cedc6 100644 --- a/apps/web/components/pages/HomeTwo/Agents.tsx +++ b/apps/web/components/pages/HomeTwo/Agents.tsx @@ -237,10 +237,10 @@ export const Agents = () => { {active.note}

- Read the agent docs + Explore Cap for Agents diff --git a/apps/web/components/pages/HomeTwo/scenes/AgentScene.tsx b/apps/web/components/pages/HomeTwo/scenes/AgentScene.tsx index fb102347c05..734efb61ebe 100644 --- a/apps/web/components/pages/HomeTwo/scenes/AgentScene.tsx +++ b/apps/web/components/pages/HomeTwo/scenes/AgentScene.tsx @@ -182,7 +182,7 @@ const Tool = ({ style={{ opacity: status === "idle" ? 0 : 1 }} > ⎿ -
{children}
+
{children}
); @@ -362,8 +362,9 @@ export const AgentScene = (props: SceneProps) => { } > - {"{"} "url": "https://cap.so/s/x7f2k9"{" "} - {"}"} + {"{"} "type": "uploaded", "id":{" "} + "x7f2k9", "link":{" "} + "https://cap.so/s/x7f2k9" {"}"} ( +
+
+
+
+ +
+ + + + + + + +
+
+
+); diff --git a/apps/web/components/pages/agents/Capabilities.tsx b/apps/web/components/pages/agents/Capabilities.tsx new file mode 100644 index 00000000000..dc5233748d1 --- /dev/null +++ b/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(null); + const inView = useInView(gridRef, "-5% 0px -5% 0px"); + const reduced = useReducedMotion(); + const progressRef = useRef(null); + + return ( +
+
+
+ + No app. No dashboard. + +

+ Everything Cap does, from your agent +

+

+ 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. +

+
+ +
+
+ + setActive((current) => (current + 1) % capabilities.length) + } + /> +
+ +
    + {capabilities.map((capability, i) => { + const isActive = i === active; + const theme = MODE_THEME[capability.mode]; + return ( +
  1. + +
    2. + ); + })} +
+
+
+
+ ); +}; diff --git a/apps/web/components/pages/agents/Faq.tsx b/apps/web/components/pages/agents/Faq.tsx new file mode 100644 index 00000000000..ee4f20c47cd --- /dev/null +++ b/apps/web/components/pages/agents/Faq.tsx @@ -0,0 +1,67 @@ +import Link from "next/link"; +import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow"; +import { + BODY_TEXT, + H_SECTION, + MODE_THEME, +} from "@/components/pages/HomeTwo/theme"; +import { agentFaqs } from "./content"; + +export const Faq = () => ( +
+
+
+ FAQ +

+ Questions about Cap for agents +

+

+ The complete reference lives in the{" "} + + agent docs + + . Still stuck? Mail{" "} + + hello@cap.so + {" "} + and a human answers. +

+
+ +
+ {agentFaqs.map((item) => ( +
+ + {item.question} + +

+ {item.answer} +

+
+ ))} +
+
+
+); diff --git a/apps/web/components/pages/agents/FinalCta.tsx b/apps/web/components/pages/agents/FinalCta.tsx new file mode 100644 index 00000000000..53d26d49a1c --- /dev/null +++ b/apps/web/components/pages/agents/FinalCta.tsx @@ -0,0 +1,75 @@ +"use client"; + +import Link from "next/link"; +import { trackEvent } from "@/app/utils/analytics"; +import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow"; +import { + BODY_TEXT, + BTN_PRIMARY, + BTN_SECONDARY, + H_HERO, + MODE_THEME, + MONO, +} from "@/components/pages/HomeTwo/theme"; +import { CAP_AGENT_PROMPT } from "@/data/agent-prompt"; +import { POINTER_URL } from "./content"; +import { CopyIconButton, CopyLabelButton } from "./copy"; + +export const FinalCta = () => ( +
+
+ Get started +

+ Point your agent at Cap. +

+

+ One paste and your agent has an open source screen recorder it can run + end to end: record, share, and manage everything in Cap on Mac, Windows, + and Linux. +

+
+ + trackEvent("agents_prompt_copied", { + source_page: "agents_final_cta", + cta_location: "primary", + variant: "full", + }) + } + className={BTN_PRIMARY} + > + Copy the setup prompt + + + Read the agent docs + +
+
+ Or point your agent here + + + cap.so/agents + + + trackEvent("agents_prompt_copied", { + source_page: "agents_final_cta", + cta_location: "pointer", + variant: "url", + }) + } + className="size-7 rounded-full" + /> + +
+
+
+); diff --git a/apps/web/components/pages/agents/Harnesses.tsx b/apps/web/components/pages/agents/Harnesses.tsx new file mode 100644 index 00000000000..45202be807e --- /dev/null +++ b/apps/web/components/pages/agents/Harnesses.tsx @@ -0,0 +1,265 @@ +"use client"; + +import { classNames } from "@cap/utils/helpers"; +import { useDetectPlatform } from "hooks/useDetectPlatform"; +import { type ReactNode, useState } from "react"; +import { trackEvent } from "@/app/utils/analytics"; +import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow"; +import { + BAND, + BODY_TEXT, + grainBg, + H_SECTION, + MODE_THEME, + MONO, +} from "@/components/pages/HomeTwo/theme"; +import { + ANCHORS, + type HarnessKey, + harnesses, + INSTALLERS, + VERIFY_LINES, +} from "./content"; +import { Snippet } from "./copy"; + +type Os = keyof typeof INSTALLERS; + +const OS_LABELS: Record = { + unix: "macOS / Linux", + windows: "Windows", +}; + +const TAB_CSS = ` + @keyframes ag-tab-in { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: none; } + } + .ag-tab-in { animation: ag-tab-in 340ms cubic-bezier(0.22, 1, 0.36, 1); } + @media (prefers-reduced-motion: reduce) { + .ag-tab-in { animation: none; } + } +`; + +const PILL_GROUP = + "inline-flex flex-wrap items-center gap-1 rounded-full bg-white p-1 shadow-[0_0_0_1px_rgba(17,17,17,0.06)]"; + +const pill = (active: boolean) => + classNames( + "rounded-full px-3.5 py-1.5 text-[13px] font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]", + active + ? "bg-[#111111] text-white" + : "text-[rgba(17,17,17,0.6)] hover:text-[#111111]", + ); + +const StepLabel = ({ + step, + title, + children, +}: { + step: string; + title: string; + children: ReactNode; +}) => ( +
+ + {step} + +

+ {title} +

+

+ {children} +

+
+); + +const Divider = () =>
; + +export const Harnesses = () => { + const { platform } = useDetectPlatform(); + const [osChoice, setOsChoice] = useState(null); + const os: Os = osChoice ?? (platform === "windows" ? "windows" : "unix"); + const [tab, setTab] = useState("claude"); + const active = harnesses.find((item) => item.key === tab) ?? harnesses[0]; + if (!active) return null; + + return ( +
+ +
+
+ Every harness +

+ Works in Claude Code, Codex, Cursor and OpenCode +

+

+ The setup prompt handles all of this for you. If you would rather + wire it up by hand, this is exactly what gets installed for each + agent and what to run to check it. +

+
+ +
+
+ + Adds cap to your PATH and brings Cap Desktop with it. Open a new + terminal afterwards. + +
+
+ {(Object.keys(OS_LABELS) as Os[]).map((key) => ( + + ))} +
+ + trackEvent("agents_snippet_copied", { + source_page: "agents_harnesses", + snippet: "installer", + os, + }) + } + className="mt-3" + /> +
+
+ + + +
+ + A skill that routes Cap tasks through the CLI and MCP, plus a + local MCP server entry. Nothing else in your config is touched. + +
+
+ {harnesses.map((item) => ( + + ))} +
+
+
+

+ {active.tagline} +

+ {active.snippets.map((snippet) => ( +
+ + {snippet.label} + + + trackEvent("agents_snippet_copied", { + source_page: "agents_harnesses", + snippet: snippet.label, + harness: active.key, + }) + } + /> +
+ ))} +
+
+ + What gets installed + +
+ {active.installs.map((item) => ( +
+
+ {item.label} +
+
+ {item.value} +
+
+ ))} +
+

+ {active.after} +

+
+
+
+
+ + + +
+ + Valid JSON on stdout, an authenticated status, and a real library + result, even if it is empty. No secrets printed, nothing changed. + + + trackEvent("agents_snippet_copied", { + source_page: "agents_harnesses", + snippet: "verify", + }) + } + /> +
+
+
+
+ ); +}; diff --git a/apps/web/components/pages/agents/Hero.tsx b/apps/web/components/pages/agents/Hero.tsx new file mode 100644 index 00000000000..40ffed9d240 --- /dev/null +++ b/apps/web/components/pages/agents/Hero.tsx @@ -0,0 +1,185 @@ +"use client"; + +import { classNames } from "@cap/utils/helpers"; +import { ArrowDown, ArrowUpRight } from "lucide-react"; +import Link from "next/link"; +import { useRef, useState } from "react"; +import { trackEvent } from "@/app/utils/analytics"; +import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow"; +import { AGENT } from "@/components/pages/HomeTwo/scenes"; +import { + LazyMount, + useInView, + useReducedMotion, +} from "@/components/pages/HomeTwo/scenes/engine"; +import { + BODY_TEXT, + BTN_PRIMARY, + BTN_SECONDARY, + GRAIN, + H_HERO, + MODE_THEME, + MONO, +} from "@/components/pages/HomeTwo/theme"; +import { CAP_AGENT_PROMPT } from "@/data/agent-prompt"; +import { ANCHORS, HARNESS_NAMES, POINTER_URL } from "./content"; +import { CopyIconButton, CopyLabelButton } from "./copy"; + +const DARK = { + backgroundColor: "#111111", + backgroundImage: GRAIN, + backgroundSize: "200px 200px", +} as const; + +const SURFACES = [ + "CLI", + "Local MCP server", + "JSON on every command", + "Skill for your agent", +]; + +export const Hero = () => { + const [chapter, setChapter] = useState(0); + const cardRef = useRef(null); + const inView = useInView(cardRef); + const reducedMotion = useReducedMotion(); + const playing = inView && !reducedMotion; + + return ( +
+
+
+ Cap for Agents +

+ Give your agent a screen recorder. +

+

+ Cap is the open source screen recorder built for AI agents. A CLI + and a local MCP server let Claude Code, Codex, Cursor, OpenCode, or + any agent that can run a shell record your screen, upload the + result, read the transcript, and manage your whole library. No app + to open. No dashboard to click through. Just ask. +

+ +
+ + trackEvent("agents_prompt_copied", { + source_page: "agents_hero", + cta_location: "primary", + variant: "full", + }) + } + className={BTN_PRIMARY} + > + Copy the setup prompt + + + See how it works + + + + +
+ +
+ Or point your agent here + + + cap.so/agents + + + trackEvent("agents_prompt_copied", { + source_page: "agents_hero", + cta_location: "pointer", + variant: "url", + }) + } + className="size-7 rounded-full" + /> + +
+ +
    + {HARNESS_NAMES.map((name, i) => ( +
  • + {i > 0 ? ( +
    • + ))} +
+
+ +
+ + + setChapter((current) => (current + 1) % AGENT.chapters.length) + } + /> + +
    + {SURFACES.map((surface) => ( +
  • + {surface} +
    • + ))} +
  • + + Agent docs + + +
    • +
+
+
+
+ ); +}; diff --git a/apps/web/components/pages/agents/Prompts.tsx b/apps/web/components/pages/agents/Prompts.tsx new file mode 100644 index 00000000000..5e323bfecae --- /dev/null +++ b/apps/web/components/pages/agents/Prompts.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { classNames } from "@cap/utils/helpers"; +import { trackEvent } from "@/app/utils/analytics"; +import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow"; +import { + BAND, + BODY_TEXT, + grainBg, + H_SECTION, + MODE_THEME, + MONO, +} from "@/components/pages/HomeTwo/theme"; +import { examplePrompts } from "./content"; +import { CopyLabelButton } from "./copy"; + +export const Prompts = () => ( +
+
+
+ Ask in plain English +

+ Prompts you can paste right now +

+

+ Every one of these works after setup. Your agent reads first, shows + you the plan, and waits for a yes before anything changes. +

+
+ +
    + {examplePrompts.map((prompt) => { + const theme = MODE_THEME[prompt.mode]; + return ( +
  • +
    + + +

    + “{prompt.text}” +

    +
    + + trackEvent("agents_prompt_copied", { + source_page: "agents_prompts", + cta_location: "example", + variant: prompt.category.toLowerCase(), + }) + } + className="mt-7 inline-flex h-9 items-center justify-center self-start rounded-full bg-white px-3.5 text-[13px] font-medium text-[#111111] shadow-[0_0_0_1px_rgba(17,17,17,0.08)] transition-colors duration-200 hover:bg-[#111111] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111] focus-visible:ring-offset-2" + > + Copy prompt + +
    • + ); + })} +
+
+
+); diff --git a/apps/web/components/pages/agents/Safety.tsx b/apps/web/components/pages/agents/Safety.tsx new file mode 100644 index 00000000000..775dd747fd2 --- /dev/null +++ b/apps/web/components/pages/agents/Safety.tsx @@ -0,0 +1,115 @@ +import { classNames } from "@cap/utils/helpers"; +import Link from "next/link"; +import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow"; +import { + BODY_TEXT, + H_SECTION, + MODE_THEME, + MONO, + meshStyle, +} from "@/components/pages/HomeTwo/theme"; +import { headlessNote, safetyPrinciples } from "./content"; +import { Tokens } from "./tokens"; + +export const Safety = () => ( +
+
+
+ Safe by design +

+ Safe to hand to an agent +

+

+ The boundaries are part of the product, not a prompt you have to + remember. Read the full rules in{" "} + + Safety & Troubleshooting + + . +

+
+ +
+
    + {safetyPrinciples.map((principle) => { + const theme = MODE_THEME[principle.mode]; + return ( +
  • +
    +
    + + $ + + +
    • + ); + })} +
+ +
+
+

+ {headlessNote.title} +

+

+ {headlessNote.body} +

+
+ 
+						{headlessNote.lines.map((line) => (
+							
+								
+									${" "}
+								
+								
+							
+						))}
+
+
+
+
+
+); diff --git a/apps/web/components/pages/agents/SetupPrompt.tsx b/apps/web/components/pages/agents/SetupPrompt.tsx new file mode 100644 index 00000000000..32d5507d64c --- /dev/null +++ b/apps/web/components/pages/agents/SetupPrompt.tsx @@ -0,0 +1,236 @@ +"use client"; + +import { classNames } from "@cap/utils/helpers"; +import { Check } from "lucide-react"; +import { useState } from "react"; +import { trackEvent } from "@/app/utils/analytics"; +import { Eyebrow } from "@/components/pages/HomeTwo/Eyebrow"; +import { + BAND, + BODY_TEXT, + GRAIN, + grainBg, + H_SECTION, + MODE_THEME, + MONO, + meshStyle, +} from "@/components/pages/HomeTwo/theme"; +import { CAP_AGENT_PROMPT } from "@/data/agent-prompt"; +import { ANCHORS, POINTER_PROMPT, setupSteps } from "./content"; +import { CopyLabelButton, Snippet } from "./copy"; + +const DARK = { + backgroundColor: "#111111", + backgroundImage: GRAIN, + backgroundSize: "200px 200px", +} as const; + +const BENEFITS = [ + "Installs the Cap CLI", + "Adds the Cap skill", + "Connects local MCP", + "Verifies access", +]; + +const TOGGLE = + "rounded-full border border-white/15 bg-white/[0.08] px-3.5 py-1.5 text-[12.5px] font-medium text-white/80 transition-colors duration-200 hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"; + +export const SetupPrompt = () => { + const [expanded, setExpanded] = useState(false); + + return ( +
+
+
+ One prompt +

+ Set up Cap with one paste +

+

+ Copy the prompt, paste it into your agent, and let it do the rest. + It installs the Cap CLI, adds the Cap skill and a local MCP server + for the agent you are using, signs you in with the least privilege + it needs, and verifies everything before it starts. If you would + rather not paste anything, just point your agent at this page. +

+
+ +
+
+
+ + Cap agent setup prompt + + + trackEvent("agents_prompt_copied", { + source_page: "agents_setup", + cta_location: "prompt_card", + variant: "full", + }) + } + className="inline-flex h-10 items-center justify-center rounded-full bg-[#111111] px-4 text-[14px] font-medium text-white transition-colors duration-200 hover:bg-[#2A2A2A] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111] focus-visible:ring-offset-2" + > + Copy prompt + +
+ +
+
+ + + + + paste into claude code · codex · cursor · opencode + +
+ 
+								{CAP_AGENT_PROMPT}
+
+ {expanded ? ( +
+ +
+ ) : ( +
+ +
+ )} +
+ +
    + {BENEFITS.map((benefit) => ( +
  • +
    • + ))} +
+
+ +
+
    + {setupSteps.map((step, i) => ( +
  1. + + {String(i + 1).padStart(2, "0")} + +
    +

    + {step.name} +

    +

    + {step.text} +

    +
    +
    2. + ))} +
+ +
+ Point your agent here +

+ Prefer not to paste a wall of text? +

+

+ This page is written for agents as well as people. Send your + agent the link and it will find the setup prompt, the install + steps for its own harness, and the operating instructions in the + docs on its own. +

+ + trackEvent("agents_prompt_copied", { + source_page: "agents_setup", + cta_location: "pointer_card", + variant: "pointer", + }) + } + className="mt-5" + /> +

+ Agents reading this page: the setup prompt above is your + operating instruction set. Continue at cap.so/docs/agents. +

+
+
+
+
+
+ ); +}; diff --git a/apps/web/components/pages/agents/TaskReel.tsx b/apps/web/components/pages/agents/TaskReel.tsx new file mode 100644 index 00000000000..3b282e2554e --- /dev/null +++ b/apps/web/components/pages/agents/TaskReel.tsx @@ -0,0 +1,654 @@ +"use client"; + +import { classNames } from "@cap/utils/helpers"; +import { Check } from "lucide-react"; +import { + type ReactNode, + type RefObject, + useEffect, + useMemo, + useRef, +} from "react"; +import { CapLogoMark } from "@/components/pages/HomeTwo/demo/capIcons"; +import { typed, useSceneState } from "@/components/pages/HomeTwo/scenes/engine"; +import { MONO } from "@/components/pages/HomeTwo/theme"; +import { usePageVisible } from "@/components/pages/HomeTwo/visibility"; +import { capabilities } from "./content"; + +type Card = + | { kind: "link"; title: string; meta: string } + | { kind: "rows"; rows: readonly (readonly [string, string])[] }; + +type Beat = + | { type: "prompt"; text: string } + | { type: "plan"; text: string } + | { type: "tool"; via?: "mcp"; cmd: string; out: string; ms?: number } + | { type: "ask"; text: string; reply: string } + | { type: "result"; text: string; card?: Card }; + +type Task = { key: string; label: string; beats: readonly Beat[] }; + +const TASKS: readonly Task[] = [ + { + key: "record", + label: "record", + beats: [ + { + type: "prompt", + text: "Record a 20 second repro of the checkout bug and send me the link", + }, + { + type: "plan", + text: "I'll check capture, pick the screen, record in Instant Mode, then ask before uploading.", + }, + { + type: "tool", + cmd: "cap doctor --json", + out: '{ "captureReady": true }', + }, + { + type: "tool", + cmd: "cap record start --screen 1 --mode instant --duration 20 --json", + out: '{ "type": "stopped", "recordingMetaExists": true }', + ms: 2400, + }, + { + type: "ask", + text: "Recorded 0:20 and validated the project. Upload it to Cap as “Checkout bug repro”?", + reply: "Yes, upload it", + }, + { + type: "tool", + cmd: 'cap upload ./recording.cap --export --name "Checkout bug repro" --json', + out: '{ "type": "uploaded", "id": "x7f2k9", "link": "https://cap.so/s/x7f2k9" }', + ms: 1200, + }, + { + type: "tool", + cmd: "cap caps wait x7f2k9 --for all --json", + out: '{ "transcript": { "status": "complete" }, "ai": { "status": "complete" } }', + ms: 1600, + }, + { + type: "result", + text: "Done. The repro is live with a transcript and summary.", + card: { + kind: "link", + title: "Checkout bug repro", + meta: "cap.so/s/x7f2k9 · 0:20 · AI summary ready", + }, + }, + ], + }, + { + key: "understand", + label: "summarize", + beats: [ + { + type: "prompt", + text: "Summarize cap.so/s/x7f2k9 and list the action items with timestamps", + }, + { + type: "plan", + text: "Reading the summary, chapters, transcript, and comments. This is read only.", + }, + { + type: "tool", + cmd: "cap caps context x7f2k9 --json", + out: '{ "title": { "current": "Checkout bug repro" }, "summary": { "status": "available" }, "chapters": { "status": "available" }, "transcript": { "status": "complete" } }', + ms: 1000, + }, + { + type: "result", + text: "Two decisions and three action items, cited from the transcript.", + card: { + kind: "rows", + rows: [ + ["02:14", "Cart total resets after a promo code is applied"], + ["03:40", "Ship the fix behind a flag on Friday"], + ["04:05", "Add a regression test for stacked codes"], + ], + }, + }, + ], + }, + { + key: "search", + label: "search", + beats: [ + { + type: "prompt", + text: "Find my Caps about onboarding from the last month and brief me", + }, + { + type: "plan", + text: "Searching your library, then reading only the top matches.", + }, + { + type: "tool", + cmd: 'cap caps list --search "onboarding" --updated-after 2026-08-10 --json', + out: '{ "caps": [ { "id": "k3m8v2", "title": "Onboarding flow v3 walkthrough" }, … ] }', + }, + { + type: "tool", + via: "mcp", + cmd: "caps_context × 3", + out: "3 transcripts read · 41 minutes total", + ms: 1400, + }, + { + type: "result", + text: "Four Caps. The v3 flow removed the org step, but the invite email still mentions it.", + card: { + kind: "rows", + rows: [ + ["2d ago", "Onboarding flow v3 walkthrough"], + ["9d ago", "Invite email copy review"], + ["3w ago", "Org setup: what changed"], + ], + }, + }, + ], + }, + { + key: "collaborate", + label: "comment", + beats: [ + { + type: "prompt", + text: "Ask for clarification where pricing is discussed. Show me first.", + }, + { + type: "tool", + cmd: "cap caps context x7f2k9 --json", + out: '{ "chapters": { "status": "available", "value": [ … ] }, "transcript": { "status": "complete" } }', + }, + { + type: "ask", + text: "Draft at 04:32: “Is the annual discount 20% or 25%? The deck says both.” Post it?", + reply: "Yes, post it", + }, + { + type: "tool", + cmd: 'cap caps comments add x7f2k9 "Is the annual discount 20% or 25%? The deck says both." --timestamp-ms 272000 --yes --json', + out: '{ "id": "cmt_8h2k", "timestampMs": 272000 }', + }, + { + type: "result", + text: "Posted at 04:32. I re-read the Cap and the comment is there.", + }, + ], + }, + { + key: "team", + label: "organize", + beats: [ + { + type: "prompt", + text: "Move this Cap into the Product space's Releases folder", + }, + { + type: "plan", + text: "Checking where it lives now and the destination IDs before proposing a move.", + }, + { + type: "tool", + cmd: "cap library spaces list org_2j4k --json", + out: '{ "spaces": [ { "id": "sp_prod", "name": "Product" } ] }', + }, + { + type: "tool", + cmd: "cap library folders list org_2j4k --space sp_prod --json", + out: '{ "folders": [ { "id": "fld_rel", "name": "Releases" } ] }', + }, + { + type: "ask", + text: "Current: Personal library. Proposed: Product / Releases. Move it?", + reply: "Go ahead", + }, + { + type: "tool", + cmd: "cap caps move x7f2k9 --container space --organization org_2j4k --space sp_prod --folder fld_rel --yes --json", + out: '{ "resource": { "type": "cap", "id": "x7f2k9" }, "action": "moved" }', + }, + { + type: "tool", + cmd: "cap caps get x7f2k9 --json", + out: '{ "id": "x7f2k9", "organizationId": "org_2j4k", "folderId": "fld_rel" }', + }, + { + type: "result", + text: "Moved and verified. The Cap now sits in Product / Releases.", + }, + ], + }, + { + key: "migrate", + label: "import", + beats: [ + { + type: "prompt", + text: "Import loom.com/share/7f3a9c2e into our org and wait until it's done", + }, + { + type: "ask", + text: "Owner: sam@acme.com · Space: Product. Start the import? It is durable but not free to repeat.", + reply: "Yes", + }, + { + type: "tool", + cmd: "cap caps import loom https://loom.com/share/7f3a9c2e --organization org_2j4k --owner-email sam@acme.com --space Product --yes --json", + out: '{ "id": "op_51ac", "state": "queued" }', + ms: 900, + }, + { + type: "tool", + cmd: "cap jobs wait op_51ac --json", + out: '{ "id": "op_51ac", "state": "succeeded", "resultResourceId": "m4p2q8" }', + ms: 2200, + }, + { + type: "tool", + cmd: "cap caps context m4p2q8 --json", + out: '{ "title": { "current": "Q3 roadmap walkthrough" }, "transcript": { "status": "complete" }, "chapters": { "status": "available" } }', + ms: 900, + }, + { + type: "result", + text: "Imported and verified. The Cap has its title, a transcript, and chapters.", + card: { + kind: "link", + title: "Q3 roadmap walkthrough", + meta: "cap.so/s/m4p2q8 · imported from Loom", + }, + }, + ], + }, +]; + +const PROMPT_CPS = 40; +const REPLY_CPS = 26; +const REPLY_DELAY = 1400; +const HOLD = 2800; + +type Scheduled = { beat: Beat; start: number; end: number }; + +const schedule = (task: Task) => { + let t = 260; + const items: Scheduled[] = []; + for (const beat of task.beats) { + switch (beat.type) { + case "prompt": { + const end = t + (beat.text.length / PROMPT_CPS) * 1000; + items.push({ beat, start: t, end }); + t = end + 420; + break; + } + case "plan": { + items.push({ beat, start: t, end: t + 420 }); + t += 760; + break; + } + case "tool": { + const end = t + (beat.ms ?? 820); + items.push({ beat, start: t, end }); + t = end + 340; + break; + } + case "ask": { + const end = t + REPLY_DELAY + (beat.reply.length / REPLY_CPS) * 1000; + items.push({ beat, start: t, end }); + t = end + 460; + break; + } + case "result": { + items.push({ beat, start: t, end: t + 480 }); + t += 480; + break; + } + } + } + return { items, duration: t + HOLD }; +}; + +type Status = "hidden" | "typing" | "running" | "asked" | "done"; + +const statusOf = ({ beat, start, end }: Scheduled, t: number): Status => { + if (t < start) return "hidden"; + if (beat.type === "prompt") return t < end ? "typing" : "done"; + if (beat.type === "tool") return t < end ? "running" : "done"; + if (beat.type === "ask") { + if (t < start + REPLY_DELAY) return "asked"; + return t < end ? "typing" : "done"; + } + return "done"; +}; + +const REEL_CSS = ` + @keyframes ag-reel-spin { to { transform: rotate(360deg); } } + @keyframes ag-reel-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } + @keyframes ag-reel-in { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: none; } + } + .ag-reel-in { animation: ag-reel-in 420ms cubic-bezier(0.22, 1, 0.36, 1); } + @media (prefers-reduced-motion: reduce) { + .ag-reel-in { animation: none; } + } +`; + +const Dot = ({ status }: { status: Status }) => ( + + + + + + +); + +const Tokens = ({ text }: { text: string }) => { + const parts = text.split(" "); + const seen = new Map(); + return parts.map((token, i) => { + const n = seen.get(token) ?? 0; + seen.set(token, n + 1); + return ( + + {token} + {i < parts.length - 1 ? " " : ""} + + ); + }); +}; + +const Row = ({ show, children }: { show: boolean; children: ReactNode }) => ( +
+ {children} +
+); + +const Caret = ({ on }: { on: boolean }) => ( + +); + +const AgentLine = ({ children }: { children: ReactNode }) => ( +
+ +
+ {children} +
+
+); + +const UserLine = ({ + textRef, + caret, +}: { + textRef: RefObject; + caret: boolean; +}) => ( +
+ + › + +

+ + +

+
+); + +const ResultCard = ({ card }: { card: Card }) => + card.kind === "link" ? ( +
+ + + + + + {card.title} + + + {card.meta} + + +
+ ) : ( +
    + {card.rows.map(([at, text]) => ( +
  • + + {at} + + {text} +
    • + ))} +
+ ); + +export const TaskReel = ({ + active, + playing, + reduced, + progressRef, + onEnd, +}: { + active: number; + playing: boolean; + reduced: boolean; + progressRef: RefObject; + onEnd: () => void; +}) => { + const task = TASKS[active % TASKS.length] ?? TASKS[0]; + const { items, duration } = useMemo( + () => schedule(task ?? TASKS[0] ?? { key: "", label: "", beats: [] }), + [task], + ); + const pageVisible = usePageVisible(); + const run = playing && pageVisible && !reduced; + const [statuses, setStatuses] = useSceneState([]); + const tRef = useRef(0); + const promptRef = useRef(null); + const replyRef = useRef(null); + const onEndRef = useRef(onEnd); + onEndRef.current = onEnd; + + const tickRef = useRef((_t: number) => {}); + tickRef.current = (t: number) => { + setStatuses(items.map((item) => statusOf(item, t))); + for (const item of items) { + if (item.beat.type === "prompt" && promptRef.current) { + promptRef.current.textContent = typed( + item.beat.text, + t, + item.start, + PROMPT_CPS, + ); + } + if (item.beat.type === "ask" && replyRef.current) { + replyRef.current.textContent = typed( + item.beat.reply, + t, + item.start + REPLY_DELAY, + REPLY_CPS, + ); + } + } + const bar = progressRef.current; + if (bar) bar.style.transform = `scaleY(${Math.min(1, t / duration)})`; + }; + + useEffect(() => { + if (items.length === 0) return; + tRef.current = reduced ? duration : 0; + tickRef.current(tRef.current); + }, [items, duration, reduced]); + + useEffect(() => { + if (!run) return; + let raf = 0; + let last = performance.now(); + const frame = (now: number) => { + const dt = Math.min(48, now - last); + last = now; + const t = tRef.current + dt; + if (t >= duration) { + tRef.current = duration; + tickRef.current(duration); + onEndRef.current(); + return; + } + tRef.current = t; + tickRef.current(t); + raf = requestAnimationFrame(frame); + }; + raf = requestAnimationFrame(frame); + return () => cancelAnimationFrame(raf); + }, [run, duration]); + + const capability = capabilities[active % capabilities.length]; + + return ( +
+ +
+ + + + + agent session · {task?.label} + + + {String(active + 1).padStart(2, "0")} /{" "} + {String(TASKS.length).padStart(2, "0")} + +
+ +
+ {items.map((item, i) => { + const status = statuses[i] ?? "hidden"; + const { beat } = item; + if (beat.type === "prompt") { + return ( + + ); + } + if (beat.type === "plan") { + return ( + + {beat.text} + + ); + } + if (beat.type === "tool") { + return ( + +
+ +

+ + {beat.via ?? "$"}{" "} + + +

+
+
+ ⎿ + {beat.out} +
+ + ); + } + if (beat.type === "ask") { + return ( +
+ + {beat.text} + +
+ +
+
+ ); + } + return ( + + +

{beat.text}

+ {beat.card ? : null} + + + ); + })} +
+ +

+ {capability?.command} +

+
+ ); +}; diff --git a/apps/web/components/pages/agents/content.ts b/apps/web/components/pages/agents/content.ts new file mode 100644 index 00000000000..2975dd12b94 --- /dev/null +++ b/apps/web/components/pages/agents/content.ts @@ -0,0 +1,445 @@ +import type { ModeKey } from "@/components/pages/HomeTwo/theme"; + +export const agentsSeo = { + path: "/agents", + url: "https://cap.so/agents", + title: "Screen Recorder for AI Agents | Cap for Agents", + description: + "Cap is the open source screen recorder built for AI agents. Record, upload, transcribe, and share from Claude Code, Codex, Cursor, or OpenCode through a CLI and MCP server. No app or dashboard needed.", + keywords: [ + "screen recorder for AI agents", + "AI agent screen recording", + "MCP screen recorder", + "screen recording MCP server", + "Claude Code screen recorder", + "Codex screen recording", + "Cursor screen recorder", + "OpenCode screen recording", + "screen recording CLI", + "record screen from the terminal", + "command line screen recorder", + "headless screen recording", + "agent screen capture", + "screen recorder API", + "open source screen recorder for agents", + ], +} as const; + +export const POINTER_URL = "https://cap.so/agents"; + +export const ANCHORS = { + setup: "setup", + harnesses: "harnesses", +} as const; + +export const POINTER_PROMPT = + "Read https://cap.so/agents and follow it to set up Cap for me, then ask what I want to record or review."; + +export const HARNESS_NAMES = [ + "Claude Code", + "Codex", + "Cursor", + "OpenCode", + "Any MCP client", +] as const; + +export const INSTALLERS = { + unix: "curl -fsSL https://cap.so/install-cli.sh | sh", + windows: "irm https://cap.so/install-cli.ps1 | iex", +} as const; + +export type HarnessKey = "claude" | "codex" | "cursor" | "opencode" | "mcp"; + +export type HarnessSnippet = { + label: string; + lines: readonly string[]; + prompt: boolean; +}; + +export type Harness = { + key: HarnessKey; + label: string; + tagline: string; + snippets: readonly HarnessSnippet[]; + installs: readonly { label: string; value: string }[]; + after: string; +}; + +export const harnesses: readonly Harness[] = [ + { + key: "claude", + label: "Claude Code", + tagline: + "One command installs the Cap skill and registers the local MCP server. The dry run shows every path it will touch first.", + snippets: [ + { + label: "Preview the changes", + lines: [ + "cap agents install --target claude --component all --dry-run --json", + ], + prompt: true, + }, + { + label: "Apply them", + lines: [ + "cap agents install --target claude --component all --yes --json", + ], + prompt: true, + }, + ], + installs: [ + { label: "Skill", value: "~/.claude/skills/cap/SKILL.md" }, + { label: "MCP server", value: "~/.claude.json" }, + ], + after: + "Restart Claude Code so it loads the skill and the cap mcp serve entry.", + }, + { + key: "codex", + label: "Codex", + tagline: + "The same installer writes the Cap skill and MCP entry into your Codex home, and leaves the rest of your config alone.", + snippets: [ + { + label: "Preview the changes", + lines: [ + "cap agents install --target codex --component all --dry-run --json", + ], + prompt: true, + }, + { + label: "Apply them", + lines: [ + "cap agents install --target codex --component all --yes --json", + ], + prompt: true, + }, + ], + installs: [ + { label: "Skill", value: "~/.codex/skills/cap/SKILL.md" }, + { label: "MCP server", value: "~/.codex/config.toml" }, + ], + after: + "Restart Codex so it reloads the integration. CODEX_HOME is respected if you have moved it.", + }, + { + key: "cursor", + label: "Cursor", + tagline: + "Cursor gets the Cap skill for routing plus a local MCP entry, so its agent reaches for Cap before the browser.", + snippets: [ + { + label: "Preview the changes", + lines: [ + "cap agents install --target cursor --component all --dry-run --json", + ], + prompt: true, + }, + { + label: "Apply them", + lines: [ + "cap agents install --target cursor --component all --yes --json", + ], + prompt: true, + }, + ], + installs: [ + { label: "Skill", value: "~/.cursor/skills/cap/SKILL.md" }, + { label: "MCP server", value: "~/.cursor/mcp.json" }, + ], + after: "Restart Cursor after applying it.", + }, + { + key: "opencode", + label: "OpenCode", + tagline: + "OpenCode can drive Cap through its shell tools straight away. Merge one entry into opencode.json to add the MCP tools too.", + snippets: [ + { + label: "Merge into opencode.json", + lines: [ + "{", + ' "$schema": "https://opencode.ai/config.json",', + ' "mcp": {', + ' "cap": {', + ' "type": "local",', + ' "command": ["cap", "mcp", "serve"],', + ' "enabled": true', + " }", + " }", + "}", + ], + prompt: false, + }, + { + label: "Check the server", + lines: ["opencode mcp list"], + prompt: true, + }, + ], + installs: [ + { label: "MCP server", value: "opencode.json" }, + { label: "Skill", value: "Paste the prompt; it calls cap guide --json" }, + ], + after: + "Do not replace unrelated OpenCode settings. Restart OpenCode after merging the entry.", + }, + { + key: "mcp", + label: "Any MCP client", + tagline: + "Anything that speaks MCP over local stdio can load Cap's tools, and anything that can run a shell gets a screen recorder with no integration at all.", + snippets: [ + { + label: "Local stdio server", + lines: ['{ "command": "cap", "args": ["mcp", "serve"] }'], + prompt: false, + }, + { + label: "Or skip MCP and use the CLI", + lines: ["cap guide --json"], + prompt: true, + }, + ], + installs: [ + { label: "Transport", value: "stdio, stdout reserved for MCP" }, + { label: "Tools", value: "76 read and confirmed-write tools" }, + ], + after: + "Keep cap mcp serve on stdio. Capture, uploads, passwords, and credentials stay in the CLI on purpose.", + }, +]; + +export const VERIFY_LINES = [ + "cap version --json", + "cap auth status --json", + "cap caps list --limit 1 --json", +] as const; + +export const setupSteps = [ + { + name: "Copy the prompt into your agent", + text: "Paste the Cap setup prompt into Claude Code, Codex, Cursor, OpenCode, or any agent that can run shell commands. Or send it this page and let it read the prompt itself.", + }, + { + name: "Let the agent set Cap up", + text: "It installs the Cap CLI, adds the Cap skill and a local MCP server for the agent you are using, then opens a browser tab for a one-time sign in with the least privilege it needs.", + }, + { + name: "Ask for what you want", + text: "Record a repro, summarize a Cap, search your library, post a comment, move a video, or run a Loom import. The agent reads first and asks before anything records, uploads, or costs money.", + }, +] as const; + +export type Capability = { + key: string; + title: string; + body: string; + command: string; + mode: ModeKey; +}; + +export const capabilities: readonly Capability[] = [ + { + key: "record", + title: "Record and share", + body: "Check capture readiness, pick a screen or window, record, validate, export, upload, and hand back the share link.", + command: "cap record start", + mode: "instant", + }, + { + key: "understand", + title: "Understand any recording", + body: "Title, AI summary, chapters, the full transcript, comments, reactions, views, and processing state in one call.", + command: "cap caps context", + mode: "studio", + }, + { + key: "search", + title: "Search your library", + body: "Owned or shared Caps, filtered by organization, folder, or date, then read only the ones that matter.", + command: "cap caps list --search", + mode: "screenshot", + }, + { + key: "collaborate", + title: "Comment and reply", + body: "Timestamped comments, replies, reactions, titles, and visibility, always shown to you before they are posted.", + command: "cap caps comments add", + mode: "share", + }, + { + key: "team", + title: "Run your team", + body: "Spaces, folders, members, invites, storage, billing, domains, and analytics, with confirmed admin changes.", + command: "cap organizations", + mode: "instant", + }, + { + key: "migrate", + title: "Migrate and build", + body: "Durable Loom imports, developer apps, videos, and credits, with jobs that wait for a terminal state instead of guessing.", + command: "cap caps import loom", + mode: "studio", + }, +]; + +export type ExamplePrompt = { category: string; text: string; mode: ModeKey }; + +export const examplePrompts: readonly ExamplePrompt[] = [ + { + category: "Record", + text: "Record a short reproduction of this bug, upload it, and give me the link. Ask before recording and before uploading.", + mode: "instant", + }, + { + category: "Summarize", + text: "Summarize this Cap, list every decision and action item, and cite the relevant timestamps: ", + mode: "studio", + }, + { + category: "Search", + text: "Find my Caps about onboarding from the last month and give me a concise project brief.", + mode: "screenshot", + }, + { + category: "Comment", + text: "Draft a timestamped reply to this comment, show it to me, and only post it after I approve.", + mode: "share", + }, + { + category: "Analytics", + text: "Show me this month's organization analytics and explain the biggest changes. Do not modify anything.", + mode: "instant", + }, + { + category: "Migrate", + text: "Audit this Loom migration CSV, propose owner and space mappings, and do not import anything until I approve the first batch.", + mode: "studio", + }, +]; + +export const safetyPrinciples = [ + { + title: "Read first, then propose", + body: "Reads and waits never start transcription, AI, or any paid work. Before a change the agent shows the exact Cap, the current state, the proposed change, and how it will verify the result. Only then does it pass --yes.", + command: "cap caps context --json", + mode: "instant" as const, + }, + { + title: "Secrets stay out of chat", + body: "Passwords, API keys, S3 credentials, and newly issued developer secrets never pass through MCP or the conversation. Secure prompts happen in your terminal, and a locked Cap is opened with a single command.", + command: "cap caps unlock ", + mode: "studio" as const, + }, + { + title: "Least privilege by default", + body: "Login uses the creator profile. The admin and full profiles exist for team and developer work, and the agent asks before requesting either.", + command: "cap auth login --json", + mode: "screenshot" as const, + }, + { + title: "Permissions live on the server", + body: "Installing the skill or MCP server grants nothing by itself. Every call is checked against your account, and any key or session can be revoked at any time.", + command: "cap auth status --json", + mode: "share" as const, + }, +] as const; + +export const headlessNote = { + title: "Headless too", + body: "CI runners, containers, and remote sandboxes cannot open a browser, so they authenticate with an API key in CAP_API_KEY instead. Uploads, transcripts, comments, library management, and analytics all work there. Screen capture needs a machine with a display.", + lines: ['export CAP_API_KEY="cap_cli_..."', "cap auth status --json"], +} as const; + +export const agentFaqs = [ + { + question: "Can an AI agent record my screen with Cap?", + answer: + "Yes. The Cap CLI is a complete screen recorder for the terminal. It records displays and windows in Instant or Studio Mode from any shell, so Claude Code, Codex, Cursor, OpenCode, or any agent that can run commands can start and stop a recording, validate it, export it, and upload it for a share link. The agent checks capture readiness first and asks before recording starts.", + }, + { + question: "Which AI agents and coding tools work with Cap?", + answer: + "Claude Code, Codex, and Cursor get a one-command install that adds the Cap skill and a local MCP server. OpenCode and any other MCP client connect by adding the documented cap mcp serve entry. Anything that can run shell commands can use the CLI directly with no integration at all.", + }, + { + question: "Do I need to open the Cap app or the dashboard?", + answer: + "No. The installer puts cap on your PATH and brings Cap Desktop along with it, but you never have to open it. The only browser step is a one-time sign in. From then on your agent records, uploads, reads transcripts, posts comments, and manages folders, spaces, members, storage, billing, and analytics through the CLI and MCP. The app and the dashboard stay available whenever you want them.", + }, + { + question: "What is the Cap MCP server?", + answer: + "cap mcp serve exposes 76 Cap tools over local stdio: listing and reading Caps, transcripts, comments, reactions, sharing, folders, spaces, organizations, notifications, analytics, storage, billing, and developer resources. Screen capture, uploads, passwords, and credentials deliberately stay in the CLI, so no secret ever passes through the model.", + }, + { + question: "Is it safe to give an AI agent access to my recordings?", + answer: + "Cap's agent surface is built around explicit boundaries. Reads and waits never start paid work. Before any change the agent shows the exact Cap, the current state, the proposed change, and how it will verify the result, and only then passes --yes. Passwords, API keys, and storage credentials never enter the chat or MCP. Login uses the least-privileged creator profile by default, and permissions are enforced on the server, so installing the integration grants nothing by itself.", + }, + { + question: "Does Cap work in headless environments like CI or containers?", + answer: + "Yes, for everything except capture. Mint an API key from your Cap account settings, inject it as CAP_API_KEY, and the CLI and MCP server authenticate with that key's profile. Uploads, transcripts, comments, library management, and analytics all work headless. Recording a screen needs a machine with a display.", + }, + { + question: "Does my agent need to know Cap's commands in advance?", + answer: + "No. The installed binary is self-describing. cap guide --json returns the current command and schema contract, every command accepts --json, and recording and export stream newline-delimited JSON events. The Cap skill tells the agent to discover the contract this way instead of guessing flags, so it stays correct as Cap updates.", + }, + { + question: "Is Cap for Agents free?", + answer: + "The CLI and MCP server are part of Cap's open source codebase and free to use. Local recording, editing, and export are free on Mac, Windows, and Linux. Shareable links, transcripts, AI summaries, and team features follow your Cap plan, so the free plan is enough to try everything on this page and Cap Pro removes the limits.", + }, + { + question: "How do I point my agent at this page?", + answer: + "Paste a one-line prompt such as “Read https://cap.so/agents and set up Cap for me” into your agent. This page is written to be read by agents as well as people: it carries the full setup prompt, the per-agent install steps, and links to the operating instructions at cap.so/docs/agents, so an agent that fetches it has everything it needs.", + }, +] as const; + +export const agentsSoftwareSchema = { + "@context": "https://schema.org", + "@type": "SoftwareApplication", + "@id": "https://cap.so/agents#software", + name: "Cap CLI and MCP server", + alternateName: "Cap for Agents", + url: agentsSeo.url, + description: + "A command line interface and local MCP server that let AI agents such as Claude Code, Codex, Cursor, and OpenCode record the screen, upload recordings, read transcripts and summaries, comment, and manage a Cap library without opening the app or dashboard.", + applicationCategory: "MultimediaApplication", + applicationSubCategory: "Screen recorder for AI agents", + operatingSystem: ["macOS", "Windows", "Linux"], + downloadUrl: "https://cap.so/download", + installUrl: "https://cap.so/docs/agents/setup", + softwareHelp: { + "@type": "CreativeWork", + url: "https://cap.so/docs/agents", + }, + isAccessibleForFree: true, + offers: { + "@type": "Offer", + price: 0, + priceCurrency: "USD", + url: "https://cap.so/download", + }, + publisher: { + "@type": "Organization", + name: "Cap", + url: "https://cap.so", + }, + featureList: [ + "Screen and window recording from the command line", + "Local MCP server with 76 tools for Claude Code, Codex, Cursor, OpenCode, and other MCP clients", + "One-command install of the Cap skill and MCP configuration", + "JSON output on every command and NDJSON events for recording and export", + "Upload recordings and return share links", + "Read transcripts, AI summaries, chapters, comments, and analytics", + "Search and organize a video library with folders and spaces", + "Confirmation before every mutation, upload, or paid action", + "Least-privilege login profiles and API keys for headless use", + "Open source and self-hostable", + ], +} as const; diff --git a/apps/web/components/pages/agents/copy.tsx b/apps/web/components/pages/agents/copy.tsx new file mode 100644 index 00000000000..6ac973565c6 --- /dev/null +++ b/apps/web/components/pages/agents/copy.tsx @@ -0,0 +1,231 @@ +"use client"; + +import { classNames } from "@cap/utils/helpers"; +import { Check, Copy } from "lucide-react"; +import { + type ReactNode, + useCallback, + useEffect, + useRef, + useState, +} from "react"; +import { MONO } from "@/components/pages/HomeTwo/theme"; +import { Tokens } from "./tokens"; + +const COPIED_MS = 1800; + +export const writeClipboard = async (text: string) => { + try { + await navigator.clipboard.writeText(text); + return true; + } catch { + const area = document.createElement("textarea"); + area.value = text; + area.setAttribute("readonly", ""); + area.style.position = "fixed"; + area.style.opacity = "0"; + document.body.appendChild(area); + area.select(); + let copied = false; + try { + copied = document.execCommand("copy"); + } catch { + copied = false; + } + area.remove(); + return copied; + } +}; + +export const useCopy = () => { + const [copied, setCopied] = useState(false); + const timer = useRef(null); + + useEffect( + () => () => { + if (timer.current) window.clearTimeout(timer.current); + }, + [], + ); + + const copy = useCallback(async (text: string) => { + const ok = await writeClipboard(text); + setCopied(ok); + if (timer.current) window.clearTimeout(timer.current); + if (ok) + timer.current = window.setTimeout(() => setCopied(false), COPIED_MS); + return ok; + }, []); + + return { copied, copy }; +}; + +export const CopyIconButton = ({ + text, + label, + dark, + onCopy, + className, +}: { + text: string; + label: string; + dark?: boolean; + onCopy?: () => void; + className?: string; +}) => { + const { copied, copy } = useCopy(); + return ( + + ); +}; + +export const CopyLabelButton = ({ + text, + children, + copiedLabel = "Copied", + onCopy, + className, +}: { + text: string; + children: ReactNode; + copiedLabel?: string; + onCopy?: () => void; + className: string; +}) => { + const { copied, copy } = useCopy(); + return ( + + ); +}; + +export const Snippet = ({ + lines, + label, + prompt = true, + onCopy, + className, +}: { + lines: readonly string[]; + label: string; + prompt?: boolean; + onCopy?: () => void; + className?: string; +}) => ( +
+ 
+			{lines.map((line, i) => (
+				
+					{prompt ? (
+						
+							${" "}
+						
+					) : null}
+					{prompt ?  : line}
+				
+			))}
+
+ +
+); diff --git a/apps/web/components/pages/agents/tokens.tsx b/apps/web/components/pages/agents/tokens.tsx new file mode 100644 index 00000000000..51e2de4f8e3 --- /dev/null +++ b/apps/web/components/pages/agents/tokens.tsx @@ -0,0 +1,14 @@ +export const Tokens = ({ text }: { text: string }) => { + const parts = text.split(" "); + const seen = new Map(); + return parts.map((token, i) => { + const n = seen.get(token) ?? 0; + seen.set(token, n + 1); + return ( + + {token} + {i < parts.length - 1 ? " " : ""} + + ); + }); +}; diff --git a/apps/web/components/ui/MobileMenu.tsx b/apps/web/components/ui/MobileMenu.tsx index a5381d075c7..ed10963c8a2 100644 --- a/apps/web/components/ui/MobileMenu.tsx +++ b/apps/web/components/ui/MobileMenu.tsx @@ -23,6 +23,7 @@ interface NavLink { const primaryLinks: NavLink[] = [ { href: "/pricing", text: "Pricing" }, { href: "/download", text: "Download" }, + { href: "/agents", text: "Agents" }, { href: "/migrate-from-loom", text: "Migrate from Loom" }, { href: "/blog", text: "Blog" }, { href: "/changelog", text: "Changelog" }, diff --git a/apps/web/data/agent-prompt.ts b/apps/web/data/agent-prompt.ts new file mode 100644 index 00000000000..c4dd37db2e2 --- /dev/null +++ b/apps/web/data/agent-prompt.ts @@ -0,0 +1,51 @@ +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 --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 --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 --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 . +- 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.`; diff --git a/apps/web/public/llms-full.txt b/apps/web/public/llms-full.txt index 100150f4384..c7413553ea0 100644 --- a/apps/web/public/llms-full.txt +++ b/apps/web/public/llms-full.txt @@ -109,6 +109,8 @@ Core principles: Cap ships a `cap` CLI designed to be driven by AI coding agents (Claude Code, Codex, Cursor, OpenCode) and scripts. +Start at https://cap.so/agents for the copyable setup prompt, per-agent install steps, and the safety rules; the full reference lives under https://cap.so/docs/agents. + Install: - `curl -fsSL https://cap.so/install-cli.sh | sh` (PowerShell: `irm https://cap.so/install-cli.ps1 | iex`) - or `cap desktop install-cli`, or via Cap Desktop → Settings → Command Line. diff --git a/apps/web/public/llms.txt b/apps/web/public/llms.txt index cbff18ab16c..99ce7cd0edd 100644 --- a/apps/web/public/llms.txt +++ b/apps/web/public/llms.txt @@ -44,6 +44,7 @@ Cap has run organization migrations spanning hundreds of users and tens of thous Cap can be operated through a shell-capable agent using the `cap` CLI or its MCP server. +- Cap for Agents (start here, includes the copyable setup prompt): https://cap.so/agents - Overview and copyable prompt: https://cap.so/docs/agents - Setup: https://cap.so/docs/agents/setup - Workflows: https://cap.so/docs/agents/workflows