// Quickstart page
function Quickstart() {
  const shell = useShell();
  const tocItems = [
    { id: 'install', label: '1. Install the SDK' },
    { id: 'key', label: '2. Get your API key' },
    { id: 'first', label: '3. Say hello to your agent' },
    { id: 'skill', label: '4. Write your first skill' },
    { id: 'channel', label: '5. Connect a channel' },
    { id: 'next', label: 'Next steps' },
  ];
  return (
    <div className="app">
      <Topbar section="docs" theme={shell.theme} setTheme={shell.setTheme} onSearch={() => shell.setSearchOpen(true)} onMenuToggle={() => shell.setMobileMenuOpen(true)} />
      <div className="main">
        <Sidebar activeId="quickstart" mobileOpen={shell.mobileMenuOpen} onMobileClose={() => shell.setMobileMenuOpen(false)} />
        <article className="content">
          <div className="crumbs">
            <a href="index.html">Docs</a>
            <span className="sep">/</span>
            <a href="#">Getting started</a>
            <span className="sep">/</span>
            <span>Quickstart</span>
          </div>

          <div className="eyebrow">Getting started · ~5 min</div>
          <h1 className="h1">Quickstart</h1>
          <p className="lede">
            In this guide you'll install the SDK, talk to your Admin agent, add a Markdown skill, and
            connect a channel so your agent can reply for you. By the end you'll have a working
            foundation to build on.
          </p>

          <Callout type="info" title="Before you begin">
            This page is for <strong>calling the ClawAgen API</strong>. You'll need a tenant API key
            (from the dashboard or via self-hosted admin console) plus Node 18+ or Python 3.11+ for
            the SDK. If you're <strong>running the platform yourself</strong>, see{' '}
            <a className="inline" href="index.html#need">What do you need?</a> on the homepage for
            the full backend stack.
          </Callout>

          <h2 id="install" className="h2">1. Install the SDK</h2>
          <p>Pick your language. Both SDKs are thin wrappers over the REST API.</p>
          <CodeBlock
            tabs={[
              { label: 'bun', raw: 'bun add @clawagen/node',
                code: `<span class="tok-com">$</span> bun add @clawagen/node` },
              { label: 'npm', raw: 'npm install @clawagen/node',
                code: `<span class="tok-com">$</span> npm install @clawagen/node` },
              { label: 'pnpm', raw: 'pnpm add @clawagen/node',
                code: `<span class="tok-com">$</span> pnpm add @clawagen/node` },
              { label: 'pip', raw: 'pip install clawagen',
                code: `<span class="tok-com">$</span> pip install clawagen` },
            ]}
          />

          <h2 id="key" className="h2">2. Get your API key</h2>
          <p>
            From the <a className="inline" href="#">Dashboard → API keys</a>, create a new key. Keys
            are tenant-scoped — a key identifies both <em style={{color:'var(--ink-3)', fontStyle:'italic'}}>you</em> and{' '}
            <em style={{color:'var(--ink-3)', fontStyle:'italic'}}>your agent</em>. Keys begin with <code>ck_live_</code>.
            Never commit them to source control.
          </p>
          <CodeBlock filename=".env" tabs={[{ label: '.env', raw: 'CLAWAGEN_KEY=ck_live_•••••••••••••••\nCLAWAGEN_BASE_URL=https://api.clawagen.com',
            code: `<span class="tok-var">CLAWAGEN_KEY</span>=ck_live_<span class="tok-com">•••••••••••••••</span>
<span class="tok-var">CLAWAGEN_BASE_URL</span>=https://api.clawagen.com` }]} />

          <Callout type="warn" title="Preview limits">
            Preview tenants are capped at 200 requests/hour and 100 MB of memory storage.
            Production limits unlock once general availability ships.
          </Callout>

          <h2 id="first" className="h2">3. Say hello to your agent</h2>
          <p>
            The <code>/api/admin</code> endpoint streams a reply from your owner-facing agent. It
            speaks in your voice, has access to all your skills and memory, and can run <code>bash</code>{' '}
            and <code>load_skill</code> under the hood.
          </p>
          <CodeBlock
            tabs={[
              { label: 'node.js', raw: `import { ClawAgen } from '@clawagen/node';\n\nconst c = new ClawAgen(process.env.CLAWAGEN_KEY);\n\nfor await (const chunk of c.chat.admin.stream({\n  message: 'What is in my MEMORY.md right now?',\n})) {\n  if (chunk.type === 'text_delta') process.stdout.write(chunk.delta);\n}`,
                code: `<span class="tok-kw">import</span> { ClawAgen } <span class="tok-kw">from</span> <span class="tok-str">'@clawagen/node'</span>;

<span class="tok-kw">const</span> <span class="tok-var">c</span> = <span class="tok-kw">new</span> <span class="tok-fn">ClawAgen</span>(process.env.CLAWAGEN_KEY);

<span class="tok-kw">for await</span> (<span class="tok-kw">const</span> <span class="tok-var">chunk</span> <span class="tok-kw">of</span> c.chat.admin.<span class="tok-fn">stream</span>({
  message: <span class="tok-str">'What is in my MEMORY.md right now?'</span>,
})) {
  <span class="tok-kw">if</span> (chunk.type === <span class="tok-str">'text_delta'</span>) process.stdout.<span class="tok-fn">write</span>(chunk.delta);
}` },
              { label: 'curl', raw: `curl -N https://api.clawagen.com/api/admin \\\n  -H "X-API-Key: $CLAWAGEN_KEY" \\\n  -H "Content-Type: application/json" \\\n  -d '{"message":"What is in my MEMORY.md right now?"}'`,
                code: `<span class="tok-com">$</span> curl -N https://api.clawagen.com/api/admin <span class="tok-pun">\\</span>
  -H <span class="tok-str">"X-API-Key: $CLAWAGEN_KEY"</span> <span class="tok-pun">\\</span>
  -H <span class="tok-str">"Content-Type: application/json"</span> <span class="tok-pun">\\</span>
  -d <span class="tok-str">'{"message":"What is in my MEMORY.md right now?"}'</span>` },
              { label: 'python', raw: `from clawagen import ClawAgen\nc = ClawAgen(api_key=os.environ["CLAWAGEN_KEY"])\n\nfor chunk in c.chat.admin.stream(message="What is in my MEMORY.md right now?"):\n    if chunk.type == "text_delta":\n        print(chunk.delta, end="", flush=True)`,
                code: `<span class="tok-kw">from</span> clawagen <span class="tok-kw">import</span> ClawAgen
<span class="tok-var">c</span> = <span class="tok-fn">ClawAgen</span>(api_key=os.environ[<span class="tok-str">"CLAWAGEN_KEY"</span>])

<span class="tok-kw">for</span> chunk <span class="tok-kw">in</span> c.chat.admin.<span class="tok-fn">stream</span>(message=<span class="tok-str">"What is in my MEMORY.md right now?"</span>):
    <span class="tok-kw">if</span> chunk.type == <span class="tok-str">"text_delta"</span>:
        <span class="tok-fn">print</span>(chunk.delta, end=<span class="tok-str">""</span>, flush=<span class="tok-kw">True</span>)` },
            ]}
          />

          <h2 id="skill" className="h2">4. Write your first skill</h2>
          <p>
            Skills are Markdown files. Drop one under <code>skills/&#123;name&#125;/SKILL.md</code> and your
            agent can invoke it on demand. The system prompt lists skill names and one-line descriptions;
            the full body is loaded only when the agent calls <code>load_skill</code>.
          </p>
          <CodeBlock filename="skills/weekly-summary/SKILL.md" tabs={[{ label: 'SKILL.md', raw: `---\nname: weekly-summary\ndescription: Summarize this week's inbox activity across all channels\ntrigger: "summarize my week"\n---\n\n# Weekly summary\n\nWhen the user asks for a weekly summary:\n\n1. Run \`tunder messages list --since 7d --all-channels\` to fetch last 7 days.\n2. Group by sender, count unread threads, highlight any flagged as urgent.\n3. Reply with a one-paragraph summary, then 3–5 bullet action items.`,
            code: `<span class="tok-pun">---</span>
<span class="tok-var">name</span>: weekly-summary
<span class="tok-var">description</span>: Summarize this week's inbox activity across all channels
<span class="tok-var">trigger</span>: <span class="tok-str">"summarize my week"</span>
<span class="tok-pun">---</span>

<span class="tok-kw"># Weekly summary</span>

When the user asks for a weekly summary:

1. Run <span class="tok-str">\`tunder messages list --since 7d --all-channels\`</span> to fetch last 7 days.
2. Group by sender, count unread threads, highlight any flagged as urgent.
3. Reply with a one-paragraph summary, then 3–5 bullet action items.` }]} />

          <Callout type="note" title="Progressive disclosure">
            The agent sees ~540 tokens of skill names and descriptions at all times. Bodies
            (hundreds or thousands of tokens each) only load when invoked. You can ship 30+ skills
            without blowing the context budget.
          </Callout>

          <h2 id="channel" className="h2">5. Connect a channel</h2>
          <p>
            Once a channel is connected, incoming messages are routed to your CS agent. The Admin agent
            stays on the web dashboard; customers and external contacts talk to CS.
          </p>
          <CodeBlock
            tabs={[{ label: 'node.js', raw: `await c.channels.whatsapp.connect({\n  phoneNumberId: process.env.WA_PHONE_NUMBER_ID,\n  accessToken: process.env.WA_ACCESS_TOKEN,\n  verifyToken: crypto.randomUUID(),\n});\n\n// Set the Meta webhook to https://api.clawagen.com/webhook/whatsapp/{tenantId}`,
              code: `<span class="tok-kw">await</span> c.channels.whatsapp.<span class="tok-fn">connect</span>({
  phoneNumberId: process.env.WA_PHONE_NUMBER_ID,
  accessToken: process.env.WA_ACCESS_TOKEN,
  verifyToken: crypto.<span class="tok-fn">randomUUID</span>(),
});

<span class="tok-com">// Set the Meta webhook to https://api.clawagen.com/webhook/whatsapp/{tenantId}</span>` }]}
          />

          <Callout type="note" title="Prefer zero-code setup?">
            The dashboard uses Meta's Embedded Signup flow — one click and WhatsApp is wired up,
            including webhook registration. The SDK path above is for programmatic control.
          </Callout>

          <h2 id="next" className="h2">Next steps</h2>
          <p>You've got the basics. Here's where to go from here.</p>

          <div className="card-grid">
            <a className="card" href="guide.html">
              <div className="card-ico"><Icon name="puzzle" size={16}/></div>
              <h3>Understand the architecture</h3>
              <p>Read the Architecture guide to see how agents, skills, memory, and the tool registry fit together.</p>
              <span className="arr"><Icon name="arrowR" size={14} stroke={2}/></span>
            </a>
            <a className="card" href="api-reference.html">
              <div className="card-ico"><Icon name="code" size={16}/></div>
              <h3>Browse the reference</h3>
              <p>Full endpoint docs, streaming events, and error codes — searchable and linkable.</p>
              <span className="arr"><Icon name="arrowR" size={14} stroke={2}/></span>
            </a>
          </div>

          <Feedback />
          <PageFoot
            prev={{ label: 'Introduction', href: 'index.html' }}
            next={{ label: 'Architecture', href: 'guide.html' }}
          />
        </article>
        <TOC items={tocItems} />
      </div>
      <SearchOverlay open={shell.searchOpen} onClose={() => shell.setSearchOpen(false)} />
      <TweaksPanel visible={shell.tweaksVisible} theme={shell.theme} setTheme={shell.setTheme} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Quickstart />);
