Getting started

Getting started

Unzip → install → deploy in 15 minutes.

Sourcedocs/GETTING-STARTED.md

A step-numbered walkthrough from the zip file to a live branded landing page on your own domain. No thinking required.

If you only have 5 minutes, do steps 1, 3, 4, 7. The defaults handle the rest.

Prerequisites

  • Node 22+ (node -v — anything older will fail on Next.js 16).
  • An OpenAI or Anthropic API key — optional. Without one, the hero chat plays a scripted demo that looks real.

Step 1 — Unzip & install (1 min)

unzip agentkit-v1.4.0.zip
cd agentkit
npm install
npm run dev

Open http://localhost:3000. You should see the editorial-dark landing page with a live chat widget on the right and a Live demo pill in the top-left of the hero.

Expected terminal output:

▲ Next.js 16.2.4 (Turbopack)
- Local:        http://localhost:3000
- Environments: .env.local
✓ Ready in 1.2s

Gotcha — port 3000 is taken. Run PORT=3001 npm run dev instead. The Vercel AI SDK calls a relative /api/chat so the port doesn't matter.

Step 2 — Browse /components (2 min)

Open http://localhost:3000/components. This is your working reference — 59 components with live previews.

  • Left sidebar groups by category (Chat primitives, Streaming, Agent state, Tool results, RAG, UI primitives). Search is at the top.
  • Each component page has a Preview tab, a Code tab with one-click copy, and the exact source path under src/components/.
  • Star (★) next to AgentTraceViewer marks the flagship — the one people buy AgentKit for.

Leave this tab open. Every time you go to build a section, check /components first before writing anything from scratch.

Gotcha — refresh on a theme-switched page. The theme is persisted in localStorage and re-applied in <head> before paint via /theme-init.js, so there's no flash. If you see one, hard-refresh once.

Step 3 — Replace the hero copy (3 min)

Open src/components/sections/hero.tsx. You're editing three things: the H1, the paragraph, and the primary CTA. Save and the page hot-reloads.

Before (lines 16–31, roughly):

<h1 className="...">
  Ship your AI agent's landing page <em>this afternoon</em>.
</h1>

<p className="...">
  The first landing kit built specifically for AI agent products. Nine
  purpose-built sections. Real streaming chat. Live agent trace viewer.
  Working tool-calling demo. Drop in your API key and your page is live.
</p>

<a href="#pricing" className="...">
  Get AgentKit · $49 →
</a>

After (example — make it yours):

<h1 className="...">
  Your customers' support agent, <em>live in a week</em>.
</h1>

<p className="...">
  Nova is the support agent that reads your docs, writes your replies,
  and escalates what it can't handle. No training data, no 3-month pilot.
  Plug in your Zendesk, watch it work.
</p>

<a href="#pricing" className="...">
  Start free · 14-day trial →
</a>

Keep the <em>…</em> wrap — it renders as Instrument Serif italic in your brand color. Use it on one or two words of your H1, not a whole phrase.

While you're here, edit the three Metric numbers at the bottom of the file (9 / 15 / 3) to match your real story. Or delete the <Metric> block if you don't have numbers yet.

Gotcha — Tailwind CSS-var bracket syntax. Tailwind 4 classes like bg-[var(--color-brand)] must keep the square brackets intact. Don't replace them with plain Tailwind color classes — every theme will break.

Step 4 — Brand color in 30 seconds (1 min)

Open src/app/globals.css. Find the default theme block (around line 29):

:root,
[data-theme="editorial-dark"] {
  --color-bg: #0a0a0a;
  ...
  --color-brand: #c6f432;                        /* change */
  --color-brand-tint-weak: rgba(198, 244, 50, 0.02);   /* change */
  --color-brand-tint: rgba(198, 244, 50, 0.1);          /* change */
  --color-brand-tint-strong: rgba(198, 244, 50, 0.25);  /* change */
  --color-border-brand: rgba(198, 244, 50, 0.25);       /* change */
}

Change --color-brand and run your new hex through a hex-to-rgba converter for the four tint variants. Everything on the page re-tints on save.

Lock to one theme. Three themes ship: editorial-dark (default), bright, cool-blue. Once you've picked one:

  1. In src/app/layout.tsx, set data-theme="your-theme" on <html>.
  2. In src/components/nav.tsx, delete the <ThemeSwitcher /> element.
  3. Delete src/components/theme-switcher.tsx.

Deep dive on theming and fonts: CUSTOMIZE.md.

Step 5 — Wire real AI, or skip (3 min)

The hero chat calls /api/chat. With no key set, the API returns 503 and the hero falls back to a scripted demo that still looks real — you can ship without this step and come back later.

To wire real streaming:

cp .env.example .env.local

Edit .env.local:

OPENAI_API_KEY=sk-proj-...your-key...

Kill and restart npm run dev (Next doesn't hot-reload env files). Send "What's the weather in Tokyo?" in the hero chat — you should see a streamed reply that calls the get_weather tool.

Use Anthropic instead. Edit src/app/api/chat/route.ts:

// Replace:
import { openai } from '@ai-sdk/openai'
// ...
model: openai('gpt-4o-mini'),

// With:
import { anthropic } from '@ai-sdk/anthropic'
// ...
model: anthropic('claude-sonnet-4-6'),

And set ANTHROPIC_API_KEY=sk-ant-... in .env.local.

Swap the demo tools for your real tools. src/app/api/chat/route.ts ships with two demo tools: get_weather and get_time. Both are placeholders. Delete them and add your real tools using the AI SDK tool({ inputSchema, execute }) shape — any function that talks to your backend, database, or external API. The hero UI updates automatically; no frontend changes needed.

Gotcha — env cache. If the chat still returns 503 after adding the key, you didn't restart npm run dev. Next.js only reads .env.local at boot.

Step 6 — Remove sections you don't need (2 min)

src/app/page.tsx composes nine sections in order:

<Hero />
<StreamingFeatures />
<AgentTraceSection />
<ToolCallingSection />
<PricingSection />
<SocialProofSection />   {/* comment out if pre-launch */}
<FaqSection />
<FinalCtaSection />

Comment out what you don't want. Most common removals on day one:

  • SocialProofSection — ships with three placeholder testimonials AND explicit "open slots" for honest pre-launch use. Fake testimonials will tank your conversion; either remove it until you have real ones, or use the open-slot version as-is.
  • PricingSection — remove if you sell contracts only or aren't ready to publish pricing.

Also remove the matching import line at the top of page.tsx so TypeScript stays happy.

Anchor links in src/components/nav.tsx (#pricing, etc.) will 404 quietly if you delete the target section — update or remove them too.

Step 7 — Deploy to Vercel (2 min)

npx vercel

Follow the prompts. Vercel auto-detects Next.js 16; accept the defaults. First deploy gives you a *.vercel.app URL.

Add your env vars:

Vercel dashboard → your project → Settings → Environment Variables
  OPENAI_API_KEY = sk-proj-...    (apply to: Production, Preview, Development)

Click Redeploy on the latest deployment (or push a commit) so the new env var is picked up. The hero chat now streams real replies on your live URL.

Gotcha — edge timeout. The chat route uses Edge runtime with maxDuration = 30. If your real agent takes longer than 30s end-to-end, switch to runtime = 'nodejs' in route.ts or move the long-running work to a worker.

Netlify, Cloudflare Pages, and Docker instructions: DEPLOY.md.

Step 8 — Point your domain (1 min)

In Vercel: Settings → Domains → Add → type yourdomain.com. Vercel gives you one of two DNS record sets depending on whether you're using apex or subdomain:

Apex (yourdomain.com) — add at your registrar:

Type  Name  Value
A     @     76.76.21.21

Subdomain (www.yourdomain.com or app.yourdomain.com):

Type   Name  Value
CNAME  www   cname.vercel-dns.com

DNS propagation is usually under 5 minutes for Cloudflare/Namecheap/Google Domains, up to an hour for Route53. HTTPS cert issues automatically once Vercel sees the record.

Test: open https://yourdomain.com, scroll to the hero, send "Hi". You should see a streamed reply with the green padlock.

You're live. What's next?

  • CUSTOMIZE.md — deep theming, swapping fonts, replacing the demo agent with your real tools, rewriting pricing tiers, honest approaches to social proof.
  • DEPLOY.md — Netlify, Cloudflare Pages, Docker, self-hosted.
  • COPY-FRAMEWORK.md — 8 headline formulas that work for AI products. Read before Step 3 if the blank page scares you.
  • CHANGELOG.md — version history. You bought lifetime updates; new URLs arrive by email.
  • /components — keep this tab open while you build. It's the fastest way to find the right primitive.

Stuck? Reply to your purchase receipt. Actual human.

— Richard · webdesignhot.com