Customize

Customize

Colors, fonts, themes, content — the full customization playbook.

Sourcedocs/CUSTOMIZE.md

This guide shows how to make AgentKit look and behave like YOUR product, not the demo.

Step 1 · Brand accent color (1 minute)

Every acid-green touch on the page comes from a single CSS variable. Edit src/app/globals.css:

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

Use a hex-to-rgba converter to update the three tint variants. That's all — every component re-tints automatically.

Pro tip: run your brand color through Coolors to ensure it has enough contrast on the dark background (aim for at least 4.5:1 for text, 3:1 for large display text).

Step 2 · Swap fonts (5 minutes)

AgentKit uses three fontsource packages. To replace them:

# Remove defaults
npm uninstall @fontsource-variable/inter @fontsource/instrument-serif @fontsource-variable/jetbrains-mono

# Install your fonts (examples)
npm install @fontsource-variable/geist @fontsource/playfair-display @fontsource-variable/geist-mono

Update src/app/globals.css:

@import "@fontsource-variable/geist";
@import "@fontsource/playfair-display";
@import "@fontsource-variable/geist-mono";

@theme {
  --font-display: 'Geist Variable', sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-mono:    'Geist Mono Variable', monospace;
}

Update src/app/layout.tsx preload tags to point at the new font files.

Step 3 · Headline copy (5 minutes)

The H1 on the hero is in src/components/sections/hero.tsx. Search for:

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

Replace. The <em> tag renders as Instrument Serif italic in your brand color — use it to highlight one or two words.

Copy formulas that work for AI products (see also docs/COPY-FRAMEWORK.md):

  1. Outcome + time bound: "Ship your [noun] [time frame]." (Linear, Vercel style)
  2. Negation + promise: "Not another [clichéd thing]. [Real differentiator]." (Basecamp style)
  3. Question reversal: "Why is [painful thing] still [painful]? [Product] fixes that." (Stripe style)
  4. Specific outcome: "[Verb] [concrete thing] in [unit of time]." ("Ship code in seconds")
  5. Capability: "[Product] [verb]s [object] that [unusual adjective] [object]." ("Writes code that actually runs")
  6. Editorial + personal: "[Product] is how [persona] builds [thing]." (Robinhood style)
  7. Anti-template: "Built by [persona], not [mass-market persona]." (Linear, Rauno style)
  8. Contrast pairs: "[Thing A]. Not [thing B]." ("Fast. Not flashy.")

Step 4 · Replace demo agent with YOUR agent (15 minutes)

The hero chat calls /api/chat with two example tools (get_weather, get_time). Replace them in src/app/api/chat/route.ts:

tools: {
  // Remove get_weather and get_time
  
  // Add YOUR agent's real tools
  your_tool_name: tool({
    description: 'What this tool does, for the model',
    inputSchema: z.object({
      arg1: z.string().describe('Meaning for the model'),
      arg2: z.number().optional(),
    }),
    execute: async ({ arg1, arg2 }) => {
      // Call your backend, database, external API, etc.
      return await yourBackendCall(arg1, arg2)
    },
  }),
},

The chat UI updates automatically — no front-end changes needed.

Update the scripted demo too

src/lib/demo-agent.ts holds the scripted fallback (for when OPENAI_API_KEY isn't set). Update it to match your actual product's use cases so visitors see a relevant demo even if you haven't wired live inference yet.

Step 5 · Pricing tiers (10 minutes)

src/components/sections/pricing.tsx has two pricing models (token-based and seat-based). Edit the tier data at the top:

const tokenTiers: Tier[] = [
  {
    name: 'Starter',
    price: 0,
    priceLabel: '$0',
    tagline: 'Kick the tires. No card needed.',
    features: ['500K tokens / month', '3 tools maximum', 'Community support'],
    cta: 'Start free',
    highlight: false,
  },
  // ...
]

If you don't offer seat-based, delete the <Tab> component and hard-code one tier array.

Step 6 · Social proof (critical honesty moment)

src/components/sections/social-proof.tsx ships with three demo testimonials (Hannah Chen, Arjun Patel, Marcus Tay) and fake company logos. These are placeholders. You have three options:

Option A: Get real testimonials before launch.

  • Reach out to 3-5 beta users. Offer them the product free for 3 months in exchange for a short quote.
  • Ask for something specific ("What did AgentKit let you ship faster?") — not generic praise.

Option B: Remove the testimonials section.

  • Delete the import in src/app/page.tsx and the file src/components/sections/social-proof.tsx.
  • Better to have no testimonials than fake ones — visitors can smell BS immediately.

Option C: Replace with different social proof.

  • GitHub stars, download counts, usage metrics, press mentions.
  • "1,200 developers shipping with AgentKit" if you have the numbers.

Step 7 · FAQ (30 minutes)

src/components/sections/faq.tsx has 8 questions. Replace them with questions your actual sales / support emails are answering. Good FAQ questions are:

  • Genuinely asked by 3+ prospects.
  • Answered honestly — a hedge or evasion is worse than silence.
  • Specific — "What's your refund policy?" beats "What if I don't like it?"
  • Useful to people who haven't bought yet — not just current-user support questions.

Rule of thumb: if a question is in the FAQ, you should NOT also need to email everyone who asks. Make the answer definitive.

Step 8 · Theme switcher (optional removal)

src/components/theme-switcher.tsx lets visitors toggle between the three built-in themes. Remove it once you pick your production theme:

  1. In src/components/nav.tsx, delete the <ThemeSwitcher /> element.
  2. In src/app/layout.tsx, replace data-theme="editorial-dark" with your chosen theme.
  3. Delete src/components/theme-switcher.tsx.
  4. Delete the 2 non-production themes from src/app/globals.css if you want a smaller CSS file.

Step 9 · Custom sections (optional)

To add a new section:

  1. Create src/components/sections/your-section.tsx following the pattern of existing ones (use max-w-[1200px] mx-auto px-6 py-24 md:py-32).
  2. Import it in src/app/page.tsx.
  3. Match the typography scale (H2 = 40-52px), spacing (py-24 md:py-32 between sections), and use CSS vars for colors.

Step 10 · Remove sections you don't need

Not every AI product needs a pricing section (some sell contracts only). Not every product has testimonials. To remove:

  1. Delete the import in src/app/page.tsx.
  2. Delete the section file in src/components/sections/.
  3. Update nav anchor links in src/components/nav.tsx if needed.

Questions?

Email me. Actual human.

— Richard · webdesignhot.com