Feat/claude agent setup

docs/ai/agent-skills/claude.mdx

@@ -0,0 +1,46 @@
+---
+title: Claude Agent Setup
+sidebar_order: 10
+description: "Set up the Claude Agent integration to send Sentry issues directly to Claude for automated root cause analysis and fix generation."
+keywords:
+  - Claude
+  - Claude Agent
+  - agent skills
+  - AI coding assistant
+  - integration
+---
+
+You can trigger Claude agents from your [Seer Autofix](/product/ai-in-sentry/seer/autofix/) tab. The agent is provided with Seer's root cause analysis output and issue context, so it can understand the problem and generate a fix — including opening a branch with the changes.
+
+## Install and Configure
+
+<Alert>
+
+Sentry Owner, Manager, or Admin permissions are required to install this integration. You must also have an existing Claude workspace and environment set up before connecting to Sentry.
+
+</Alert>
+
+1. Go to [platform.claude.com/dashboard](https://platform.claude.com/dashboard) and create an API key for your workspace.
+
+2. In Sentry, navigate to **Settings > Integrations** and search for **Claude Agent**.
+
+3. Enter your API key. If your workspace isn't "default" or you want to use a specific environment, update those fields here, then save.
+<br />
+
+    <Arcade src="https://demo.arcade.software/GmQwOB82wAeELf3lr43h?embed&show_copy_link=true" width="75%" />
+
+## Using the Integration
+
+Once installed, you can send any Seer root cause analysis to a Claude agent.
+
+1. Go to a Sentry issue and click **Start Root Cause Analysis**.
+
+2. Once root cause analysis completes, open the dropdown and select **Send to Claude Agent**.
+
+    <Arcade src="https://demo.arcade.software/ozuv7mNBShFX0HtrbaWB?embed&show_copy_link=true" width="75%" />
+
+3. A card will appear in the drawer for the active session. While the session is running, you can follow along in the Claude Console. Once complete, a button linking to the created branch will appear in the card.
+
+![Claude Agent card in the drawer =800x](../img/claude-agent-install-1.png)
+
+

src/components/arcade.tsx

@@ -1,30 +1,42 @@
 type ArcadeProps = {
   src: string;
+  /** Constrains the embed width (for example `640px` or `55%`). Defaults to full width of the content column. */
+  width?: string;
 };
-export function Arcade({src}: ArcadeProps) {
+
+export function Arcade({src, width}: ArcadeProps) {
   return (
     <div
       style={{
-        height: '0px',
-        paddingBottom: 'calc(56.8359% + 41px)',
-        position: 'relative',
-        width: '100%',
+        maxWidth: '100%',
+        width: width ?? '100%',
       }}
     >
-      <iframe
-        src={src}
-        loading="lazy"
-        allowFullScreen
-        allow="fullscreen;"
+      {/* Inner wrapper: % padding is relative to outer width so aspect ratio matches narrow embeds. */}
+      <div
         style={{
-          colorScheme: 'light',
-          height: '100%',
-          left: '0px',
-          position: 'absolute',
-          top: '0px',
+          height: '0px',
+          paddingBottom: 'calc(56.8359% + 41px)',
+          position: 'relative',
           width: '100%',
         }}
-      />
+      >
+        <iframe
+          src={src}
+          loading="lazy"
+          allowFullScreen
+          allow="fullscreen;"
+          style={{
+            border: 'none',
+            colorScheme: 'light',
+            height: '100%',
+            left: '0px',
+            position: 'absolute',
+            top: '0px',
+            width: '100%',
+          }}
+        />
+      </div>
     </div>
   );
 }