docs: mdx, light/dark mode, ask (#400)

2026-02-09 11:16:21 -06:00
parent 4d8097a56f
commit e8ceafcbe1
36 changed files with 4221 additions and 1258 deletions
@@ -0,0 +1,75 @@
+export const metadata = { title: "Quick Start" }
+
+# Quick Start
+
+## Core workflow
+
+Every browser automation follows this pattern:
+
+```bash
+# 1. Navigate
+agent-browser open example.com
+
+# 2. Snapshot to get element refs
+agent-browser snapshot -i
+# Output:
+# @e1 [heading] "Example Domain"
+# @e2 [link] "More information..."
+
+# 3. Interact using refs
+agent-browser click @e2
+
+# 4. Re-snapshot after page changes
+agent-browser snapshot -i
+```
+
+## Common commands
+
+```bash
+agent-browser open example.com
+agent-browser snapshot -i                # Get interactive elements with refs
+agent-browser click @e2                  # Click by ref
+agent-browser fill @e3 "test@example.com" # Fill input by ref
+agent-browser get text @e1               # Get text content
+agent-browser screenshot                 # Save to temp directory
+agent-browser screenshot page.png        # Save to specific path
+agent-browser close
+```
+
+## Traditional selectors
+
+CSS selectors and semantic locators also supported:
+
+```bash
+agent-browser click "#submit"
+agent-browser fill "#email" "test@example.com"
+agent-browser find role button click --name "Submit"
+```
+
+## Headed mode
+
+Show browser window for debugging:
+
+```bash
+agent-browser open example.com --headed
+```
+
+## Wait for content
+
+```bash
+agent-browser wait @e1                   # Wait for element
+agent-browser wait --load networkidle    # Wait for network idle
+agent-browser wait --url "**/dashboard"  # Wait for URL pattern
+agent-browser wait 2000                  # Wait milliseconds
+```
+
+## JSON output
+
+For programmatic parsing in scripts:
+
+```bash
+agent-browser snapshot --json
+agent-browser get text @e1 --json
+```
+
+Note: The default text output is more compact and preferred for AI agents.
@@ -1,62 +0,0 @@
-import { CodeBlock } from "@/components/code-block";
-
-export default function QuickStart() {
-  return (
-    <div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
-      <div className="prose">
-        <h1>Quick Start</h1>
-
-        <h2>Core workflow</h2>
-        <p>Every browser automation follows this pattern:</p>
-        <CodeBlock code={`# 1. Navigate
-agent-browser open example.com
-
-# 2. Snapshot to get element refs
-agent-browser snapshot -i
-# Output:
-# @e1 [heading] "Example Domain"
-# @e2 [link] "More information..."
-
-# 3. Interact using refs
-agent-browser click @e2
-
-# 4. Re-snapshot after page changes
-agent-browser snapshot -i`} />
-
-        <h2>Common commands</h2>
-        <CodeBlock code={`agent-browser open example.com
-agent-browser snapshot -i                # Get interactive elements with refs
-agent-browser click @e2                  # Click by ref
-agent-browser fill @e3 "test@example.com" # Fill input by ref
-agent-browser get text @e1               # Get text content
-agent-browser screenshot                 # Save to temp directory
-agent-browser screenshot page.png        # Save to specific path
-agent-browser close`} />
-
-        <h2>Traditional selectors</h2>
-        <p>CSS selectors and semantic locators also supported:</p>
-        <CodeBlock code={`agent-browser click "#submit"
-agent-browser fill "#email" "test@example.com"
-agent-browser find role button click --name "Submit"`} />
-
-        <h2>Headed mode</h2>
-        <p>Show browser window for debugging:</p>
-        <CodeBlock code="agent-browser open example.com --headed" />
-
-        <h2>Wait for content</h2>
-        <CodeBlock code={`agent-browser wait @e1                   # Wait for element
-agent-browser wait --load networkidle    # Wait for network idle
-agent-browser wait --url "**/dashboard"  # Wait for URL pattern
-agent-browser wait 2000                  # Wait milliseconds`} />
-
-        <h2>JSON output</h2>
-        <p>For programmatic parsing in scripts:</p>
-        <CodeBlock code={`agent-browser snapshot --json
-agent-browser get text @e1 --json`} />
-        <p>
-          Note: The default text output is more compact and preferred for AI agents.
-        </p>
-      </div>
-    </div>
-  );
-}