hanzo.ai/app/(marketing)/agents/view.tsx

'use client'

import type { ReactNode } from 'react'
import { Bot, Building2, KeyRound } from 'lucide-react'
import { Box, Text, XStack, YStack } from '@/components/ui'
import { Faq, Line } from '@hanzo/ui/marketing'
import { Take } from '@hanzo/app/copy'
import { Page, PageHero, Section, CardGrid, Prose, Cta } from '@/components/marketing/page-kit'
import { FaqJsonLd } from '@/components/marketing/FaqJsonLd'
import { Surface } from '@/components/product/Surface'
import { getPrimitive, getPrimitiveCategory } from '@/lib/data/cloud-primitives'
import { PROMPT, START } from '@/lib/agents'
import { useI18n } from '@hanzo/i18n/react'

/** Where a person books time with Hanzo. */
const CALL = 'https://cal.com/hanzo'

type Samples = Record<'headless' | 'key' | 'call' | 'mcp' | 'kai' | 'harness' | 'campaign', ReactNode>

/** A sample under the step it belongs to. The code is the server's (components/code). */
function Step({ n, title, children, sample }: { n: number; title: string; children: ReactNode; sample: ReactNode }) {
  return (
    <YStack gap="$3" mb="$7">
      <XStack gap="$3" items="baseline">
        <Text fontFamily="$mono" fontSize="$2" color="$soft">
          {n}
        </Text>
        <Text render="h3" fontSize="$5" fontWeight="500" color="$ink">
          {title}
        </Text>
      </XStack>
      <Text render="p" fontSize="$3" lineHeight="$4" color="$soft" maxW={720}>
        {children}
      </Text>
      <Box rounded="var(--radius-md)" borderWidth={1} borderColor="var(--border)" overflow="hidden">
        {sample}
      </Box>
    </YStack>
  )
}

/** The Agents product as the catalog states it; the console the hero draws. */
const AGENT = getPrimitive('agents')
const RAIL = getPrimitiveCategory('agents')?.id

export default function AgentsPage({ samples }: { samples: Samples }) {
  const { t } = useI18n()

  const FAQ: readonly { q: string; a: ReactNode }[] = [
    {
      q: t('What is free?'),
      a: t('The Free plan: 50 requests a day per person on zen-free and enso-free, and 50 Kai decisions a day, with no card. Request 51 answers 429 until the next UTC midnight, and every answer carries X-RateLimit-Remaining.'),
    },
    {
      q: t('What does it cost after that?'),
      a: t('Pro is $20 a month, or $16.67 a month billed yearly, and includes every model, Enso Ultra and Kai. Team is $25 per member a month for 2 to 100 people on one bill. Kai decisions are $0.021 per million input tokens, and output is free.'),
    },
    {
      q: t('Can an agent sign up without a person?'),
      a: t('Yes. With a wallet it needs no inbox and no person: it signs a one-time challenge from hanzo.id, a first-seen wallet gets its own account and organization, and it mints a key with the token it gets back. The whole flow is the script above. An agent with an inbox can sign up by email code instead, and one with neither has its person approve a device code once.'),
    },
    {
      q: t('How does an agent pay?'),
      a: t('Over the API in stablecoins: GET /v1/billing/crypto/options lists USDC on Base, Ethereum and Solana and USDT on Ethereum, and POST /v1/billing/crypto/deposit returns the address to send to. Cards, Apple Pay and Google Pay go through the checkout at hanzo.ai/pay, which needs a browser.'),
    },
    {
      q: t('How do I keep an agent from overspending?'),
      a: t('Give each agent its own key with a monthly budget in cents and a rate in requests a minute: past the budget a call answers 402, past the rate 429. A session can carry its own cap, set with POST /v1/agent/sessions/{id}/budget, and a session that reaches it pauses until the cap is raised.'),
    },
    {
      q: t('Which tools can my agent use?'),
      a: t('The Hanzo MCP server, @hanzo/mcp, runs over stdio from one npx line in Claude Code, Codex, Cursor and Zed. It carries the Kai decision tools beside files, shell, git, code search and the browser.'),
    },
  ]

  return (
    <Page>
      <PageHero
        eyebrow={t('For agents')}
        icon={Bot}
        visual={AGENT && RAIL ? <Surface name={AGENT.title} api={AGENT.api} rail={RAIL} here="agents" /> : undefined}
        title={t('Get an API key, free, and build on Hanzo')}
        lede={t('No human required: sign in with a wallet, get a key, call the API, top up in USDC. Hanzo is the AI operating system for business, and one key opens api.hanzo.ai: every model in the catalog, Kai decisions and agents. The Free plan gives every account 50 requests a day and 50 Kai decisions a day, with no card.')}
      >
        <Cta href={START} icon={KeyRound}>
          {t('Get an API key, free')}
        </Cta>
        <Text render="p" mt="$4" fontSize="$2" color="$soft">
          {t('Hanzo has built business software since 2014 for hundreds of venture-funded startups, two of which went public.')}{' '}
          <a href="/about">{t('Our track record')}</a>
        </Text>
      </PageHero>

      <Section title={t('Results on Hanzo')} lede={t('What companies have done on the platform, each beside the page that shows it.')}>
        <CardGrid
          columns={3}
          items={[
            {
              title: t('$8.4M in 30 days'),
              meta: 'Damon',
              description: t("Damon Motorcycles' CES 2020 launch sold $8.4M of motorcycles in 30 days at a 541:1 return on ad spend, on AI-generated ads."),
              href: '/customers/damon-motorcycles',
            },
            {
              title: t('60,384 people on $329'),
              meta: 'Damon',
              description: t('The pre-launch campaign reached 60,384 people on $329 of ad spend, and every AI-crafted ad set rated Above Average on Facebook within 36 hours.'),
              href: '/customers/damon-motorcycles',
            },
            {
              title: t('$1M in about 45 hours'),
              meta: 'TechCrunch, 2014',
              description: t('SKULLY, the first customer, ran the fastest fully funded campaign on Indiegogo.'),
              href: 'https://techcrunch.com/2014/08/14/the-skully-smart-helmet-is-the-fastest-funded-indiegogo-campaign-to-hit-1m/',
            },
          ]}
        />
      </Section>

      <YStack id="headless">
        <Section title={t('Headless sign-up and top-up')} lede={t('One file, no person: a wallet signs in, a first-seen wallet gets its own account and organization on the Free plan, a key is minted, the first call answers, and the API hands back an address to top up in USDC. It was run as printed against production.')}>
          <Box rounded="var(--radius-md)" borderWidth={1} borderColor="var(--border)" overflow="hidden">
            {samples.headless}
          </Box>
          <Text render="p" mt="$4" fontSize="$3" color="$soft" maxW={720}>
            {t('Keep the wallet key and the API key in your secret store: the wallet is the account, and the API key is shown once. A deposit address lasts 24 hours and is credited when the chain confirms; send only the token and chain it names.')}
          </Text>
        </Section>
      </YStack>

      <Section title={t('Paste this into your agent')} lede={t('One prompt that tells an agent what Hanzo is, how to get a key, how to pay and where everything is documented.')}>
        <Box overflow="hidden" rounded="var(--radius-2xl)" borderWidth={1} borderColor="var(--border)" bg="var(--card)">
          <XStack borderBottomWidth={1} borderColor="var(--border)" bg="var(--muted)" px={16} py={8} items="center" gap={12}>
            <Text fontFamily="$mono" fontSize="$1" color="var(--text-secondary)">
              {t('Agent prompt')}
            </Text>
            <Box ml="auto">
              <Take text={PROMPT} says="the agent prompt" label={t('Copy')} />
            </Box>
          </XStack>
          <Line
            render="pre"
            display="block"
            m={0}
            p={20}
            fontFamily="$mono"
            fontSize="$2"
            color="var(--text-secondary)"
            whiteSpace="pre-wrap"
            lineHeight="var(--leading-relaxed)"
            $platform-web={{ overflowWrap: 'anywhere' }}
          >
            {PROMPT}
          </Line>
        </Box>
      </Section>

      <Section title={t('You are a builder agent')} lede={t('Five steps from nothing to a working call, a tool server and your own measurement of Kai.')}>
        <Step n={1} title={t('Get a credential')} sample={samples.key}>
          {t('Install the CLI and sign in. On a machine with no browser it prints a link and an 8-character code, and your person approves it on any device. The token works as a bearer at once; mint a key for anything that runs longer than an hour.')}
        </Step>
        <Step n={2} title={t('Make the first call')} sample={samples.call}>
          {t('zen-free costs nothing. The answer is the chat completions shape you already parse, and its headers say which model answered and how many free requests are left today.')}
        </Step>
        <Step n={3} title={t('Give your editor the tools')} sample={samples.mcp}>
          {t('The same server loads in Codex, Cursor and Zed; their config files are on the docs page.')}
        </Step>
        <Step n={4} title={t('Measure Kai yourself')} sample={samples.kai}>
          {t('Kai answers typed questions with probabilities over the options you name and writes no text, so usage.output_tokens is 0.')}
        </Step>
        <Step n={5} title={t('Run the frozen harness')} sample={samples.harness}>
          {t('The harness that produced the published results is public. Three cases from four suites is 12 requests, well inside the free 50; the full harness is 9,499. The full runs are readable with no key at api.hanzo.ai/v1/research/runs.')}
        </Step>
        <Cta href={START} icon={KeyRound}>
          {t('Get an API key, free')}
        </Cta>
      </Section>

      <Section title={t('Run a campaign')} lede={t('Measure the site, have a model write the variants, and stage the campaign as a draft. A draft sends nothing and commits no budget; the launch spends it, so a person presses launch.')}>
        <Box rounded="var(--radius-md)" borderWidth={1} borderColor="var(--border)" overflow="hidden">
          {samples.campaign}
        </Box>
        <Text render="p" mt="$4" fontSize="$3" color="$soft" maxW={720}>
          {t('Paid channels run through the ad accounts your organization connects (Meta, Google, X); email goes out from your organization with an unsubscribe link on every message. Metrics read the same analytics your event tag writes.')}
        </Text>
      </Section>

      <Section title={t('You run builder agents')} lede={t('An account for your team, a budget on every agent, and a bill you can pay the way your agents can.')}>
        <Prose>
          <ul>
            <li>{t('Sign up once. The account founds an organization you administer; Team is $25 per member a month for 2 to 100 people, with single sign-on, roles and an audit log.')}</li>
            <li>{t('Bound every agent. A key takes a monthly budget in cents, a rate in requests a minute, the models and projects it may reach, and an expiry. A session takes its own cap in micro-dollars, and pauses when it reaches it.')}</li>
            <li>{t('Pay by card, Apple Pay or Google Pay at hanzo.ai/pay, or fund the balance in USDC or USDT over the API. Wire instructions come from GET /v1/billing/wire to a signed-in caller, and a wire is credited once the bank confirms it.')}</li>
            <li>{t('Talk to the people who build it: book a call at cal.com/hanzo.')}</li>
          </ul>
        </Prose>
        <XStack gap="$3" flexWrap="wrap" mt="$4">
          <Cta href="/signup" icon={Building2}>
            {t('Start free')}
          </Cta>
          <Cta href={CALL}>{t('Book a call')}</Cta>
        </XStack>
      </Section>

      <Section title={t('Everything an agent can read')}>
        <CardGrid
          columns={2}
          items={[
            { title: 'docs.hanzo.ai/llms.txt', description: t('Every docs page, one line each, with a markdown twin.'), href: 'https://docs.hanzo.ai/llms.txt' },
            { title: 'api.hanzo.ai/v1/openapi.json', description: t('Every operation the API serves, with its schema.'), href: 'https://api.hanzo.ai/v1/openapi.json' },
            { title: 'hanzoskills.com', description: t('Skills an agent installs to build with Hanzo.'), href: 'https://hanzoskills.com' },
            { title: t('Agents SDK'), description: t('A Python SDK for agents that hand work to each other behind a router.'), href: '/agents/sdk' },
          ]}
        />
      </Section>

      <Section>
        <FaqJsonLd path="/agents" items={FAQ.map((f) => ({ name: f.q, answer: f.a }))} />
        <Faq heading={t('Questions')} items={FAQ} />
        <Text render="p" mt="$6" fontSize="$3" color="$soft">
          {t("Hanzo AI: building business software since 2014. Techstars '17.")}{' '}
          <a href="/about">{t('About Hanzo')}</a>
        </Text>
      </Section>
    </Page>
  )
}