Make a demo video with one sentence in your AI agent:
+
+```text
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
+```
+
A free, open-source desktop app for recording your screen and turning the result into polished product demos and walkthroughs.
@@ -63,18 +69,18 @@ openscreen export demo.openscreen -o demo.mp4 --json
See the [CLI reference](https://getopenscreen.com/docs/cli/).
-### Let your coding agent ship the feature with its video
+### Let your AI agent ship the feature with its video
-Paste this into Claude Code:
+Paste this into your AI agent (Claude Code, Codex, Cursor…):
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to add a video of this change to the PR.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to add a video of this change to the PR.
```
The skill sets everything up: it installs OpenScreen if it is missing (once you
agree), connects its MCP server, then asks you to open a new session and say
*"continue the OpenScreen demo"*, the one step an agent cannot do for itself.
-By hand, it is these two commands, where `` is the app's executable
+By hand, in Claude Code, it is these two commands, where `` is the app's executable
on your system ([where to find it](https://getopenscreen.com/docs/cli/#running-the-cli)):
```bash
diff --git a/website/docs/ai-editing.md b/website/docs/ai-editing.md
index 917348b9b..b610274a1 100644
--- a/website/docs/ai-editing.md
+++ b/website/docs/ai-editing.md
@@ -80,10 +80,10 @@ An agent can make a whole video on its own, from the recording to the export. Be
**Through the server above**, a take is recorded by OpenScreen itself, as with its Record button: the editor closes, the recording bar counts down and records, and the take opens in the editor as a new project, where you watch each edit land. It needs **MCP edits** on, and the recording bar gets your own settings back once the take ends.
-**As a stdio server**, it needs no setting at all: the agent starts the app's own executable with `mcp`. The quickest way is to paste this into Claude Code:
+**As a stdio server**, it needs no setting at all: the agent starts the app's own executable with `mcp`. The quickest way is to paste this into your AI agent (Claude Code, Codex, Cursor…):
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
The skill installs OpenScreen if it is missing, once you agree, and adds its MCP server. It then asks you to open a new session and say *continue the OpenScreen demo*: an agent only gets new tools in a new session. To set it up by hand instead:
diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json
index 16c1315a5..d09c7fede 100644
--- a/website/i18n/code.source.json
+++ b/website/i18n/code.source.json
@@ -41,6 +41,9 @@
"download.preRelease.cta": "Browse all releases",
"home.agents.copied": "Copied",
"home.agents.copy": "Copy",
+ "home.hero.agentBadge.copied": "Now paste it into your AI agent",
+ "home.hero.agentBadge": "Make a demo with your AI agent",
+ "home.hero.agentBadge.copy": "Copy prompt",
"home.meta.title": "Free open-source screen recorder & video editor",
"home.meta.description": "Turn screen recordings into polished demos with automatic zooms, styled backgrounds and an editable cursor. Free and open source for Windows, macOS and Linux. No watermark.",
"home.hero.kicker": "Open-source screen recorder",
@@ -48,9 +51,9 @@
"home.hero.tagline": "Automatic zooms, smooth cursor movement, and a frame that looks finished. Record, adjust, share.",
"home.hero.reassurance": "Free and open source. No watermark. No account.",
"home.features.platforms.title": "Windows, macOS, Linux",
- "home.agents.kicker": "For coding agents",
- "home.agents.title": "Your coding agent ships the feature with its video.",
- "home.agents.summary": "OpenScreen's MCP server gives an agent the whole job: it records the app, edits the take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste this into Claude Code and the video of your change lands in the pull request.",
+ "home.agents.kicker": "For AI agents",
+ "home.agents.title": "Your AI agent ships the feature with its video.",
+ "home.agents.summary": "OpenScreen's MCP server gives an agent the whole job: it records the app, edits the take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste this into your AI agent (Claude Code, Codex, Cursor…) and the video of your change lands in the pull request.",
"home.agents.foot": "It installs OpenScreen if it is missing, once you agree. Codex, Cursor and any other MCP client work too: {docs}.",
"home.agents.foot.docs": "Set it up by hand",
"home.features.kicker": "Also true",
@@ -167,6 +170,30 @@
"films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.",
"films.ship.blur.t": "Blur regions.",
"films.label": "More of the app, in motion",
+ "download.cta.mac": "Download for Mac",
+ "download.cta.windows": "Download for Windows",
+ "download.cta.linux": "Download for Linux",
+ "home.hero.download": "Download",
+ "download.cta.chooseMac": "Choose your Mac",
+ "download.cta.otherVersions": "Other versions",
+ "recreation.style.kicker": "Style",
+ "recreation.style.title": "Swap the background",
+ "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
+ "recreation.effects.kicker": "Effects",
+ "recreation.effects.title": "Frame it your way",
+ "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
+ "recreation.cursor.kicker": "Cursor",
+ "recreation.cursor.title": "A cursor worth watching",
+ "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
+ "recreation.timeline.kicker": "Timeline",
+ "recreation.timeline.title": "One click, every zoom placed",
+ "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
+ "recreation.transcript.kicker": "Transcript",
+ "recreation.transcript.title": "Edit video like text",
+ "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.",
+ "recreation.pause": "Pause animation",
+ "recreation.play": "Play animation",
+ "home.hero.explore": "Scroll to explore the editor",
"announcement.v2.link": "See what's new",
"announcement.v2.title": "OpenScreen v2 is here",
"announcement.productHunt.rank": "#5 Product of the Day",
@@ -195,30 +222,6 @@
"showcase.agent.link.docs": "AI editing docs",
"showcase.agent.link.feature": "How automatic zooms work",
"showcase.title": "Recorder, captions, agent, encoder.",
- "download.cta.mac": "Download for Mac",
- "download.cta.windows": "Download for Windows",
- "download.cta.linux": "Download for Linux",
- "home.hero.download": "Download",
- "download.cta.chooseMac": "Choose your Mac",
- "download.cta.otherVersions": "Other versions",
- "recreation.style.kicker": "Style",
- "recreation.style.title": "Swap the background",
- "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
- "recreation.effects.kicker": "Effects",
- "recreation.effects.title": "Frame it your way",
- "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
- "recreation.cursor.kicker": "Cursor",
- "recreation.cursor.title": "A cursor worth watching",
- "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
- "recreation.timeline.kicker": "Timeline",
- "recreation.timeline.title": "One click, every zoom placed",
- "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
- "recreation.transcript.kicker": "Transcript",
- "recreation.transcript.title": "Edit video like text",
- "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.",
- "recreation.pause": "Pause animation",
- "recreation.play": "Play animation",
- "home.hero.explore": "Scroll to explore the editor",
"footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
"footer.product.title": "Product",
"footer.product.download": "Download",
diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json
index e600725e9..9c07a6173 100644
--- a/website/i18n/de/code.json
+++ b/website/i18n/de/code.json
@@ -1102,13 +1102,13 @@
"message": "Kopieren"
},
"home.agents.kicker": {
- "message": "Für Coding-Agenten"
+ "message": "Für KI-Agenten"
},
"home.agents.title": {
- "message": "Dein Coding-Agent liefert das Feature mit seinem Video."
+ "message": "Dein KI-Agent liefert das Feature mit seinem Video."
},
"home.agents.summary": {
- "message": "Der MCP-Server von OpenScreen gibt einem Agenten die ganze Arbeit: Er nimmt die App auf, schneidet den Take mit den Werkzeugen des Editors, exportiert das MP4 und prüft es Bild für Bild. Füge das in Claude Code ein, und das Video deiner Änderung landet im Pull Request."
+ "message": "Der MCP-Server von OpenScreen gibt einem Agenten die ganze Arbeit: Er nimmt die App auf, schneidet den Take mit den Werkzeugen des Editors, exportiert das MP4 und prüft es Bild für Bild. Füge das in deinen KI-Agenten ein (Claude Code, Codex, Cursor …), und das Video deiner Änderung landet im Pull Request."
},
"home.agents.foot": {
"message": "Er installiert OpenScreen, falls es fehlt, sobald du zustimmst. Codex, Cursor und jeder andere MCP-Client funktionieren auch: {docs}.",
@@ -1119,5 +1119,14 @@
},
"footer.community.privacy": {
"message": "Datenschutz"
+ },
+ "home.hero.agentBadge.copied": {
+ "message": "Füge ihn jetzt in deinen KI-Agenten ein"
+ },
+ "home.hero.agentBadge": {
+ "message": "Erstelle eine Demo mit deinem KI-Agenten"
+ },
+ "home.hero.agentBadge.copy": {
+ "message": "Prompt kopieren"
}
}
diff --git a/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md
index 6a6c4d6cc..62ed197b6 100644
--- a/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md
+++ b/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md
@@ -82,10 +82,10 @@ Ein Agent kann ein ganzes Video selbstständig erstellen, von der Aufnahme bis z
**Als stdio-Server** braucht es gar keine Einstellung: Der Agent startet die eigene ausführbare Datei der App mit `mcp`.
-Am schnellsten fügst du Folgendes in Claude Code ein:
+Am schnellsten fügst du Folgendes in deinen KI-Agenten ein (Claude Code, Codex, Cursor …):
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
Der Skill installiert OpenScreen, falls es fehlt, sobald du zustimmst, und fügt seinen MCP-Server hinzu. Danach bittet er dich, eine neue Sitzung zu öffnen und *continue the OpenScreen demo* zu sagen: Ein Agent bekommt neue Werkzeuge nur in einer neuen Sitzung. So richtest du es stattdessen von Hand ein:
diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json
index 7303e4dde..3294afc6b 100644
--- a/website/i18n/es/code.json
+++ b/website/i18n/es/code.json
@@ -1102,13 +1102,13 @@
"message": "Copiar"
},
"home.agents.kicker": {
- "message": "Para agentes de programación"
+ "message": "Para agentes de IA"
},
"home.agents.title": {
- "message": "Tu agente de programación entrega la función con su video."
+ "message": "Tu agente de IA entrega la función con su video."
},
"home.agents.summary": {
- "message": "El servidor MCP de OpenScreen le da a un agente todo el trabajo: graba la app, edita la toma con las herramientas del editor, exporta el MP4 y lo revisa fotograma a fotograma. Pega esto en Claude Code y el video de tu cambio llega a la pull request."
+ "message": "El servidor MCP de OpenScreen le da a un agente todo el trabajo: graba la app, edita la toma con las herramientas del editor, exporta el MP4 y lo revisa fotograma a fotograma. Pega esto en tu agente de IA (Claude Code, Codex, Cursor…) y el video de tu cambio llega a la pull request."
},
"home.agents.foot": {
"message": "Instala OpenScreen si falta, una vez que aceptas. Codex, Cursor y cualquier otro cliente MCP también funcionan: {docs}.",
@@ -1119,5 +1119,14 @@
},
"footer.community.privacy": {
"message": "Privacidad"
+ },
+ "home.hero.agentBadge.copied": {
+ "message": "Ahora pégalo en tu agente de IA"
+ },
+ "home.hero.agentBadge": {
+ "message": "Haz una demo con tu agente de IA"
+ },
+ "home.hero.agentBadge.copy": {
+ "message": "Copiar el prompt"
}
}
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md
index 92357295b..af3b88c3a 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md
+++ b/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md
@@ -82,10 +82,10 @@ Un agente puede hacer un video completo por sí solo, desde la grabación hasta
**Como servidor stdio**, no necesita ningún ajuste: el agente inicia el propio ejecutable de la app con `mcp`.
-La forma más rápida es pegar esto en Claude Code:
+La forma más rápida es pegar esto en tu agente de IA (Claude Code, Codex, Cursor…):
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
El skill instala OpenScreen si falta, una vez que aceptes, y agrega su servidor MCP. Luego te pide que abras una nueva sesión y digas *continue the OpenScreen demo*: un agente solo obtiene herramientas nuevas en una nueva sesión. Para configurarlo a mano en cambio:
diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json
index eed10c2a9..f3c79c346 100644
--- a/website/i18n/fr/code.json
+++ b/website/i18n/fr/code.json
@@ -1102,13 +1102,13 @@
"message": "Copier"
},
"home.agents.kicker": {
- "message": "Pour les agents de code"
+ "message": "Pour les agents IA"
},
"home.agents.title": {
- "message": "Votre agent de code livre la fonctionnalité avec sa vidéo."
+ "message": "Votre agent IA livre la fonctionnalité avec sa vidéo."
},
"home.agents.summary": {
- "message": "Le serveur MCP d'OpenScreen confie tout le travail à un agent : il enregistre l'application, monte la prise avec les outils de l'éditeur, exporte le MP4 et le vérifie image par image. Collez ceci dans Claude Code, et la vidéo de votre modification arrive dans la pull request."
+ "message": "Le serveur MCP d'OpenScreen confie tout le travail à un agent : il enregistre l'application, monte la prise avec les outils de l'éditeur, exporte le MP4 et le vérifie image par image. Collez ceci dans votre agent IA (Claude Code, Codex, Cursor…), et la vidéo de votre modification arrive dans la pull request."
},
"home.agents.foot": {
"message": "Il installe OpenScreen s'il manque, une fois que vous avez accepté. Codex, Cursor et tout autre client MCP fonctionnent aussi : {docs}.",
@@ -1119,5 +1119,14 @@
},
"footer.community.privacy": {
"message": "Confidentialité"
+ },
+ "home.hero.agentBadge.copied": {
+ "message": "Collez-le maintenant dans votre agent IA"
+ },
+ "home.hero.agentBadge": {
+ "message": "Créez une démo avec votre agent IA"
+ },
+ "home.hero.agentBadge.copy": {
+ "message": "Copier le prompt"
}
}
diff --git a/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md
index 58d32c2c3..8c024d925 100644
--- a/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md
+++ b/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md
@@ -82,10 +82,10 @@ Un agent peut faire une vidéo entière tout seul, de l'enregistrement à l'expo
**Comme serveur stdio**, aucun réglage n'est nécessaire : l'agent lance l'exécutable même de l'application avec `mcp`.
-Le plus rapide est de coller ceci dans Claude Code :
+Le plus rapide est de coller ceci dans votre agent IA (Claude Code, Codex, Cursor…) :
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
La skill installe OpenScreen s'il manque, une fois que vous avez accepté, et ajoute son serveur MCP. Elle vous demande ensuite d'ouvrir une nouvelle session et de dire *continue the OpenScreen demo* : un agent n'obtient de nouveaux outils que dans une nouvelle session. Pour tout configurer à la main à la place :
diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json
index df9b32b05..270742e87 100644
--- a/website/i18n/ja/code.json
+++ b/website/i18n/ja/code.json
@@ -1102,13 +1102,13 @@
"message": "コピー"
},
"home.agents.kicker": {
- "message": "コーディングエージェント向け"
+ "message": "AI エージェント向け"
},
"home.agents.title": {
- "message": "コーディングエージェントが、機能と一緒にその動画も届けます。"
+ "message": "AI エージェントが、機能と一緒にその動画も届けます。"
},
"home.agents.summary": {
- "message": "OpenScreen の MCP サーバーを使えば、エージェントがすべてを担います。アプリを録画し、エディターと同じツールでテイクを編集し、MP4 をエクスポートして、1 フレームずつ確認します。これを Claude Code に貼り付ければ、変更の動画がプルリクエストに届きます。"
+ "message": "OpenScreen の MCP サーバーを使えば、エージェントがすべてを担います。アプリを録画し、エディターと同じツールでテイクを編集し、MP4 をエクスポートして、1 フレームずつ確認します。これをAI エージェント（Claude Code、Codex、Cursor など）に貼り付ければ、変更の動画がプルリクエストに届きます。"
},
"home.agents.foot": {
"message": "OpenScreen がなければ、あなたの同意を得てからインストールします。Codex、Cursor など、ほかの MCP クライアントでも使えます：{docs}。",
@@ -1119,5 +1119,14 @@
},
"footer.community.privacy": {
"message": "プライバシー"
+ },
+ "home.hero.agentBadge.copied": {
+ "message": "AI エージェントに貼り付けてください"
+ },
+ "home.hero.agentBadge": {
+ "message": "AI エージェントでデモを作成"
+ },
+ "home.hero.agentBadge.copy": {
+ "message": "プロンプトをコピー"
}
}
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md
index bcd2dc82f..859c231c5 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md
@@ -82,10 +82,10 @@ Claude Code や Codex などの AI コーディングエージェントをすで
**stdio サーバーとして追加する場合**、設定は一切不要です。エージェントは、アプリ自身の実行ファイルを `mcp` 付きで起動します。
-いちばん手早いのは、次の内容を Claude Code に貼り付けることです。
+いちばん手早いのは、次の内容をAI エージェント（Claude Code、Codex、Cursor など）に貼り付けることです。
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
このスキルは、OpenScreen がなければ、同意を得たうえでインストールし、その MCP サーバーを追加します。続いて、新しいセッションを開いて *continue the OpenScreen demo* と伝えるよう求めます。エージェントが新しいツールを得られるのは、新しいセッションの中だけです。代わりに手動で設定するには、次のようにします。
diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json
index 93f34a338..2b8df059e 100644
--- a/website/i18n/pt-BR/code.json
+++ b/website/i18n/pt-BR/code.json
@@ -1102,13 +1102,13 @@
"message": "Copiar"
},
"home.agents.kicker": {
- "message": "Para agentes de programação"
+ "message": "Para agentes de IA"
},
"home.agents.title": {
- "message": "Seu agente de programação entrega o recurso com o vídeo dele."
+ "message": "Seu agente de IA entrega o recurso com o vídeo dele."
},
"home.agents.summary": {
- "message": "O servidor MCP do OpenScreen dá a um agente o trabalho inteiro: ele grava o app, edita a tomada com as ferramentas do próprio editor, exporta o MP4 e confere quadro a quadro. Cole isto no Claude Code e o vídeo da sua mudança chega ao pull request."
+ "message": "O servidor MCP do OpenScreen dá a um agente o trabalho inteiro: ele grava o app, edita a tomada com as ferramentas do próprio editor, exporta o MP4 e confere quadro a quadro. Cole isto no seu agente de IA (Claude Code, Codex, Cursor…) e o vídeo da sua mudança chega ao pull request."
},
"home.agents.foot": {
"message": "Ele instala o OpenScreen se estiver faltando, depois que você concordar. Codex, Cursor e qualquer outro cliente MCP também funcionam: {docs}.",
@@ -1119,5 +1119,14 @@
},
"footer.community.privacy": {
"message": "Privacidade"
+ },
+ "home.hero.agentBadge.copied": {
+ "message": "Agora cole no seu agente de IA"
+ },
+ "home.hero.agentBadge": {
+ "message": "Faça uma demo com seu agente de IA"
+ },
+ "home.hero.agentBadge.copy": {
+ "message": "Copiar o prompt"
}
}
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md
index 12d4c2f3e..a42da1da2 100644
--- a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md
@@ -82,10 +82,10 @@ Um agente pode fazer um vídeo inteiro sozinho, da gravação à exportação. A
**Como servidor stdio**, não é preciso nenhuma configuração: o agente inicia o próprio executável do app com `mcp`.
-O jeito mais rápido é colar isto no Claude Code:
+O jeito mais rápido é colar isto no seu agente de IA (Claude Code, Codex, Cursor…):
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
A skill instala o OpenScreen se ele estiver faltando, depois que você concordar, e adiciona o servidor MCP dele. Em seguida, ela pede que você abra uma nova sessão e diga *continue the OpenScreen demo*: um agente só recebe ferramentas novas em uma nova sessão. Para configurar à mão, em vez disso:
diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json
index e584feb83..9412c22ba 100644
--- a/website/i18n/zh-CN/code.json
+++ b/website/i18n/zh-CN/code.json
@@ -1102,13 +1102,13 @@
"message": "复制"
},
"home.agents.kicker": {
- "message": "面向编程 AI 代理"
+ "message": "面向AI 代理"
},
"home.agents.title": {
- "message": "你的编程 AI 代理交付功能时，连视频一起交付。"
+ "message": "你的AI 代理交付功能时，连视频一起交付。"
},
"home.agents.summary": {
- "message": "OpenScreen 的 MCP 服务器把整件事交给 AI 代理：录制应用、用编辑器自己的工具剪辑录制内容、导出 MP4，并逐帧检查。把这段话粘贴到 Claude Code 中，你这次改动的视频就会出现在拉取请求里。"
+ "message": "OpenScreen 的 MCP 服务器把整件事交给 AI 代理：录制应用、用编辑器自己的工具剪辑录制内容、导出 MP4，并逐帧检查。把这段话粘贴到你的AI 代理（Claude Code、Codex、Cursor 等）中，你这次改动的视频就会出现在拉取请求里。"
},
"home.agents.foot": {
"message": "如果尚未安装 OpenScreen，它会在你同意后安装。Codex、Cursor 和其他任何 MCP 客户端也可以使用：{docs}。",
@@ -1119,5 +1119,14 @@
},
"footer.community.privacy": {
"message": "隐私政策"
+ },
+ "home.hero.agentBadge.copied": {
+ "message": "现在粘贴到你的AI 代理中"
+ },
+ "home.hero.agentBadge": {
+ "message": "用你的AI 代理制作演示"
+ },
+ "home.hero.agentBadge.copy": {
+ "message": "复制提示词"
}
}
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md
index 0a401b412..4bc61a530 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md
@@ -82,10 +82,10 @@ AI 代理可以从录制到导出独立完成一整段视频。无论以哪种
**作为 stdio 服务器**，则无需任何设置：AI 代理会用 `mcp` 启动应用自身的可执行文件。
-最快的方式是把下面这段内容粘贴到 Claude Code 中：
+最快的方式是把下面这段内容粘贴到你的AI 代理（Claude Code、Codex、Cursor 等）中：
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
如果缺少 OpenScreen，该技能会在你同意后安装它，并添加它的 MCP 服务器。随后它会请你打开一个新会话，并说出 *continue the OpenScreen demo*：AI 代理只有在新会话中才能获得新工具。若要改为手动设置：
diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json
index 94b9c8da0..16d892afa 100644
--- a/website/i18n/zh-TW/code.json
+++ b/website/i18n/zh-TW/code.json
@@ -1102,13 +1102,13 @@
"message": "複製"
},
"home.agents.kicker": {
- "message": "給程式設計代理"
+ "message": "給AI 代理"
},
"home.agents.title": {
- "message": "你的程式設計代理交付功能時，連影片一起交付。"
+ "message": "你的AI 代理交付功能時，連影片一起交付。"
},
"home.agents.summary": {
- "message": "OpenScreen 的 MCP 伺服器把整件工作交給代理：錄製應用程式、用編輯器本身的工具剪輯錄影、匯出 MP4，並逐格檢查。把這段話貼到 Claude Code，你這次變更的影片就會出現在拉取請求中。"
+ "message": "OpenScreen 的 MCP 伺服器把整件工作交給代理：錄製應用程式、用編輯器本身的工具剪輯錄影、匯出 MP4，並逐格檢查。把這段話貼到你的AI 代理（Claude Code、Codex、Cursor 等），你這次變更的影片就會出現在拉取請求中。"
},
"home.agents.foot": {
"message": "如果尚未安裝 OpenScreen，它會在你同意後安裝。Codex、Cursor 和其他任何 MCP 用戶端也都能使用：{docs}。",
@@ -1119,5 +1119,14 @@
},
"footer.community.privacy": {
"message": "隱私權政策"
+ },
+ "home.hero.agentBadge.copied": {
+ "message": "現在貼到你的AI 代理中"
+ },
+ "home.hero.agentBadge": {
+ "message": "用你的AI 代理製作示範"
+ },
+ "home.hero.agentBadge.copy": {
+ "message": "複製提示詞"
}
}
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md
index c55b5bbc1..b54fefeed 100644
--- a/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md
@@ -82,10 +82,10 @@ ChatGPT 與 GitHub Copilot 的登入選項已**在 1.8.0 中移除**。它們的
**以 stdio 伺服器的形式加入時**，完全不需要設定：代理會以 `mcp` 啟動應用程式本身的執行檔。
-最快的方式是將下面這段內容貼到 Claude Code 中：
+最快的方式是將下面這段內容貼到你的AI 代理（Claude Code、Codex、Cursor 等）中：
```text
-Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature.
+Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.
```
如果缺少 OpenScreen，該技能會在你同意後安裝它，並加入它的 MCP 伺服器。接著它會請你開啟一個新的工作階段，並說出 *continue the OpenScreen demo*：代理只有在新的工作階段中才能取得新工具。若要改為手動設定：
diff --git a/website/src/components/PlatformDownload/styles.module.css b/website/src/components/PlatformDownload/styles.module.css
index 947b43b42..0caa1d074 100644
--- a/website/src/components/PlatformDownload/styles.module.css
+++ b/website/src/components/PlatformDownload/styles.module.css
@@ -31,7 +31,10 @@
cursor: pointer;
}
+/* Fills the group when a layout stretches it (the hero sizes it to the badge beside it). */
.main {
+ flex: 1;
+ justify-content: center;
min-width: 0;
}
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 90fc55279..0ea2bcca4 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -64,12 +64,13 @@
color: var(--os-fg-2);
}
+/* The download and the demo badge share one size: equal columns as wide as the wider one,
+ centred by .heroCopy's text-align. */
.actions {
- display: flex;
+ display: inline-grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
gap: 12px;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
margin: 32px 0 0;
}
@@ -165,6 +166,52 @@
user-select: all;
}
+/* The demo prompt beside the download: the download button's size, a quiet surface instead of
+ its accent, and a copy chip that says what a click does. */
+.agentBadge {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0.5rem 0.5rem 0.5rem 0.95rem;
+ border-radius: 9px;
+ border: 1px solid var(--os-border);
+ background: var(--os-surface-1);
+ box-shadow: var(--os-elev-card);
+ font: inherit;
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: var(--os-fg-emphasis);
+ text-align: left;
+ text-wrap: balance;
+ cursor: pointer;
+ justify-content: center;
+ transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.agentBadge:hover {
+ transform: translateY(-2px);
+ border-color: var(--os-accent);
+}
+
+.agentBadgeIcon {
+ flex: none;
+ color: var(--os-accent);
+}
+
+.agentBadgeChip {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 5px 10px;
+ border-radius: 6px;
+ background: var(--os-accent-wash);
+ font-family: var(--ifm-font-family-monospace);
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--os-accent);
+ white-space: nowrap;
+}
+
.copyButton {
display: inline-flex;
align-items: center;
@@ -439,11 +486,30 @@
margin-bottom: 24px;
}
+ /* Stacked, both full width and the same height. */
.actions {
+ display: grid;
+ grid-auto-flow: row;
+ grid-auto-rows: 1fr;
gap: 8px;
margin-top: 24px;
}
+ /* The terminal icon and the chip's words give their room to the label, so it holds on one
+ line and the badge keeps the download button's height. */
+ .agentBadge {
+ gap: 8px;
+ }
+
+ .agentBadgeIcon,
+ .agentBadgeChipText {
+ display: none;
+ }
+
+ .agentBadgeChip {
+ padding: 7px;
+ }
+
.features {
padding: 96px 20px 0;
}
@@ -483,7 +549,8 @@
@media (prefers-reduced-motion: reduce) {
- .primaryCta {
+ .primaryCta,
+ .agentBadge {
transition: none;
}
}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 3bcb442c2..13041fd4f 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,6 +1,7 @@
import Head from "@docusaurus/Head";
import Link from "@docusaurus/Link";
import Translate, { translate } from "@docusaurus/Translate";
+import useBaseUrl from "@docusaurus/useBaseUrl";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Heading from "@theme/Heading";
import Layout from "@theme/Layout";
@@ -19,28 +20,31 @@ import { jsonLd, softwareApplicationLd } from "../lib/structured-data";
import styles from "./index.module.css";
const AGENT_PROMPT =
- "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to add a video of this change to the PR.";
+ "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to add a video of this change to the PR.";
-function CopyButton({ text }: { text: string }) {
+// The hero's line, word for word the one at the top of the README and in the AI editing docs.
+const DEMO_PROMPT =
+ "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature.";
+
+function useCopy(text: string, onDenied?: () => void, shownMs = 1500) {
const [copied, setCopied] = useState(false);
+ const copy = () =>
+ navigator.clipboard?.writeText(text).then(
+ () => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), shownMs);
+ },
+ // No clipboard (an insecure context) or a denied one (an embedded browser, a policy).
+ () => onDenied?.(),
+ ) ?? onDenied?.();
+ return [copied, copy] as const;
+}
+
+function CopyButton({ text }: { text: string }) {
+ // The prompt selects itself in one click (.agentPrompt pre), so the reader copies by hand.
+ const [copied, copy] = useCopy(text);
return (
-
+
@@ -124,25 +165,26 @@ export default function Home() {
- For coding agents
+ For AI agents
- Your coding agent ships the feature with its video.
+ Your AI agent ships the feature with its video.
OpenScreen's MCP server gives an agent the whole job: it records the app, edits the
take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste
- this into Claude Code and the video of your change lands in the pull request.
+ this into your AI agent (Claude Code, Codex, Cursor…) and the video of your change
+ lands in the pull request.
- Claude Code
+ Claude Code, Codex, Cursor…
{/* The prompt stays in English in every locale: it is what the reader pastes, and