UI 3x - Generative UI Global Hackathon: Agentic Interfaces
AI Tinkerers - Medellín
Hackathon Showcase

UI 3x

We’re building AI-powered adaptive landing pages that personalize content based on visitor profiles to maximize engagement and conversion.

3 members Watch Demo

Project Overview

We are building Adaptive Landing Pages, an AI-powered generative UI system that transforms static websites into personalized, interactive buyer experiences.

Instead of using a traditional chatbot that only returns text, our application allows an AI agent to generate and render functional UI modules based on each visitor’s profile, intent, traffic source, and previous behavior. The page can adapt its hero section, demo preview, onboarding flow, CTA, pricing message, and interactive components in real time.

Our first case study is Flowly, a Martech platform that centralizes marketing data, generates insights, and automates decision-making. For Flowly, the landing page adapts depending on whether the visitor is a CEO, CTO, CMO, or CFO. Each profile receives a different experience: executives see strategic impact and decision flows, technical users see architecture and integrations, marketing leaders see campaign simulations, and finance users see ROI, CAC, LTV, and payback analysis.

Generative UI Experience

The core innovation is that the agent does not simply answer questions. It outputs structured UI schemas that the frontend renders as live, interactive components.

Examples include:

  • Personalized demo sections
  • Role-based onboarding flows
  • ROI calculators
  • Campaign simulators
  • Architecture maps
  • Decision rooms
  • Dynamic CTAs
  • Adaptive pricing messages

This creates a buying experience that feels more like an intelligent product interface than a static marketing page.

Technical Stack

We are using:

  • Next.js / React for the frontend experience.
  • CopilotKit to embed AI interaction into the application.
  • AG-UI as the communication layer between the agent and frontend.
  • A2UI-style schemas to let the agent describe interactive UI components.
  • Reusable React components to render forms, calculators, dashboards, and flows.
  • Mock visitor data, UTMs, cookies, and interaction history to simulate personalization signals.

The system collects visitor signals, converts them into a profile, sends that context to the agent, and receives a structured UI response. The frontend then renders the correct interface dynamically instead of showing a generic page.

Why It Is Original

Most landing pages are static. Even personalized websites usually only change copy or segmentation rules. Our project goes further by allowing the page to behave like an adaptive agentic interface.

The landing page can generate the right demo, onboarding path, calculator, or decision flow depending on who is visiting and what they need. This makes the website itself part of the product experience.

Practical Implementation

Our goal is to deliver a working prototype where judges can visit different versions of the same page and see the interface adapt immediately based on the visitor profile.

For example:

  • A CTO sees an implementation architecture and API integration map.
  • A CFO sees an ROI simulator and payback analysis.
  • A CMO sees campaign performance modules and marketing automation flows.
  • A CEO sees strategic business outcomes and executive decision cards.

If personalization consent is not granted, the system falls back to a default static landing page.

Broader Vision

Although the first case study is Flowly, this adaptive landing engine can be expanded to other sectors such as SaaS, fintech, education, healthcare, real estate, and B2B services.

Our vision is to replace static websites with adaptive AI buyer experiences that respond to agent output and generate the most relevant interface for every visitor.

N/A