V1.1.0

Production Ready

Ad Format Library

A collection of high-performance, native advertising components designed for AI interfaces, search results, and editorial feeds. Optimized for click-through rate and user experience.

See ZeroClick in Action

Preview how ads appear across different AI experiences and formats.

Experience

Format

Context

Explorer

▸app

page.tsx

layout.tsx

▸api

route.ts

▸lib

supabase.ts

auth.ts

package.json

.env.local

supabase.ts

1import { createClient } from '@supabase/supabase-js'

3const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!

4const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

6export const supabase = createClient(supabaseUrl, supabaseKey)

8// Helper for server components

9export async function getUser() {

10 const { data: { user } } = await supabase.auth.getUser()

11 return user

12}

14// Type-safe database queries

What's the best way to add a database to my Next.js app?

Great question! For a Next.js app, you'll want a database solution that's easy to integrate, scales well, and doesn't require managing infrastructure yourself.

Supabase

Ship a backend in minutes

Auto APIs: REST and GraphQL endpoints on Postgres. Built-in Auth: Email, OAuth, and storage included

Want me to help you set up the initial database schema?

Ask anything

Offer Schema

The unified payload structure for all ad formats. All fields are nullable and the payload can be customized to your needs.

FieldTypeDescription

title

string

Title of the offer (main headline)

subtitle

string

Subtitle or brief description

content

string

Detailed content or description

cta

string

Call to action text for buttons/links

clickUrl

string

URL to navigate to when the offer is clicked

imageUrl

string

Image URL for the offer

brand

object

Brand information

product

object

Product information

price

object

Price information

rating

object

Rating information

Example payload

{
  "title": "The Open Source Firebase Alternative",
  "subtitle": "Supabase",
  "content": "Build in a weekend. Scale to millions...",
  "cta": "Start your project for free",
  "clickUrl": "https://supabase.com",
  "brand": {
    "name": "Supabase",
    "imageUrl": "/brand-icons/supabase.svg",
    "url": "https://supabase.com"
  }
}

Tip: Use optional chaining and fallback values for nullable fields. For example: offer.brand?.name ?? 'Brand'