Documentation

Customize the entire AgentLens demo from clean TypeScript data files.

This template is built for fast editing. Most product content, dashboard numbers, pricing, testimonials, and navigation can be changed without digging through UI components.

1. Change the brand

Open data/siteConfig.ts to change the product name, tagline, description, CTA labels, and demo URL.

2. Edit the homepage copy

Open data/marketingData.ts to customize hero stats, pain points, feature cards, use cases, integrations, testimonials, and FAQs.

3. Update dashboard metrics

Open data/dashboardData.ts to change KPIs, agent runs, chart data, audit logs, risk labels, costs, and handoff queue items.

4. Change pricing plans

Open data/pricingData.ts to edit plan names, prices, descriptions, included features, badges, and CTA links.

5. Customize navigation

Open data/navigationData.ts to edit navbar links and footer columns without touching layout components.

6. Connect a backend

Replace the mock data arrays with API responses from your backend, database, or CMS while keeping the UI components reusable.

Recommended workflow

  1. 01. Start by editing siteConfig.ts and pricingData.ts.
  2. 02. Replace dashboard demo numbers with your product metrics.
  3. 03. Update use cases to match your AI SaaS category.
  4. 04. Deploy to Vercel and use the URL as your live demo.

Key files

data/siteConfig.ts
data/marketingData.ts
data/dashboardData.ts
data/pricingData.ts
data/navigationData.ts
components/marketing
app/dashboard/page.tsx
app/license/page.tsx
View pricingRead license