How to Build AI Microsites with OpenAI, Next.js and TailwindCSS

How can AI be used to create a dynamic real-time experience - without hard-coding the results?

In this post, I'll show how I developed a minimal setup to dynamically display OpenAI responses directly on a web page.

No generation at build time. No static prompts. Only live, runtime rendered output.

Why?

AI-powered apps are everywhere - but most of them don’t feel dynamic.

You submit a form, get a response and maybe copy it into your own tools. It’s functional, but flat.

I wanted to test a pattern: what if the entire page layout was driven by the OpenAI result itself?

It’s not just about calling OpenAI and loading the text. I mean creating dynamic HTML layouts that adapt to each result as if the model were a co-developer.

This could be used for:

• One-click report generators
• Prompt-powered microsite
• AI-based product pages

So I built a prototype to explore the idea.

The Business Idea behind the prototype

The business idea behind the prototype

Every good prototype needs a good business idea 😄.

I'm currently very interested in financial investments, especially crypto coins. But I hate those cluttered sites with a lot of information. As an investor, I want short but informative report to get the latest information.

Should I buy, hodl or sell? What happens to the coin?

All information on a daily basis in a short, informative report.

The Setup

The idea was simple: given a prompt (e.g. "Generate a daily crypto report for SUI") to OpenAI and display the response as HTML on the client.

The tech stack:

• Next.js (App Router, Edge Runtime)
• TailwindCSS for basic styling
• OpenAI API (GPT-4.1 model with the web_search_preview tool)
• Markdown rendering via react-markdown and remark-gfm
• Dynamic page routing via file-based dynamic routes

See all details in the repository 👇

The Architecture

The system consists of three main building blocks:

• A Next.js based web app (app router for dynamic routing) hosted in Vercel
• Open AI with the selected GPT 4.1 model and the web_search_preview tool
• Internet to get the latest information about the coin.

How It Works

1 Call OpenAI API with a specific prompt

When the user selects a coin, e.g. 'SUI', the app navigates me to the details page /coins/sui.

For navigation, there is a call to OpenAI with the following prompt:

Create a concise daily investment report for [COIN/ASSET] in the following structure and tone:

    # 🚀 [COIN/ASSET] Daily Report
    Date: [DATE]
    Price: $[CURRENT_PRICE] ([PERCENT_CHANGE] in 24h) | Daily Range: $[LOW]–$[HIGH]
    ## Summary
       - [1-sentence summary of market situation, e.g., 'After ETF news, heavy sell-off, market looking for direction.']
    ## Top News
       - [First relevant headline]
       - [Second relevant headline, if any]
       - [Third relevant headline, if any]
    ## Opinion
       - [Brief, actionable outlook, e.g., 'Short-term volatility – buy-the-dip possible if $X holds.']
    ## Expected price
       - [Short-term, price target based on latest news and technical analysis]
       - [Mid-term, price target based on latest news and technical analysis]
       - [Long-term, price target based on macro trends]
    ## Caution 
       - [Key risk or warning, e.g., 'If [COIN/ASSET] falls below $X, more weakness likely.']
    Disclaimer: This is not financial advice!
    
    Format the report so it is clear, easy to read, and suitable for both beginners and busy professionals.

The placeholders [COIN/ASSET] and [DATE] are replaced by the selected date and the corresponding date.

2 OpenAI receives the prompt and searches for the latest information on the web

At the prompt, I selected the GPT 4.1 model with the web_search_preview tool so that OpenAI can search for the latest information about the coin. OpenAI searches for the latest information on the Internet.

3 OpenAI creates and delivers a text message in a Markdown-based format

As expected in the prompt, OpenAI creates a response formatted in a Markdown style and returns the answer.

4 The app renders the Markdown-based answer in the browser

The app receives the markdown-formatted answer and renders it in the browser via the react-markdown component in the browser.

The user can then view the report 👇

Conclusion

• It's easy to create simple dynamic web pages based on an OpenAI response. Markdown is an excellent, common format for this.
• For more interactive pages, such as dashboards and charts, it's probably not the right approach or it needs more investigation.
• If it were a production software, I would replace the synchronous mechanism with an incremental static site generation approach, which is pretty easy with Next.js.

Example Source Code

You find the whole source code of the prototype in the following repository 👇