Blocks
6 blocks for an AI product page
An AI product page has to start a trial, not explain how a model works. Six categories, the order between chat and pricing, the streaming faults and the real catalogue counts.
Key points
- The inline chat must show the error state, not only the perfect answer.
- Six chat blocks in the catalogue, none wired to a provider.
- Credit pricing gets explained before the pricing block, not inside it.
An AI product page has to start a trial, not explain how a model works. The catalogue indexes 51 hero blocks, 53 feature, 6 chat, 41 pricing, 24 faq and 27 cta, read on 2026-11-01: six categories for an AI product page.
The counts come from the category pages, measured on the same day. The useful imbalance sits between 53 features and 6 chat blocks: the catalogue can show a function, far less an interaction. Chat is the part the visitor wants to try, and it is the least covered.
What the page has to do
Whoever evaluates an AI product has two fears: that it will not understand their case and that it will cost too much. The page has to show a real input with the output it produces, state in one line which data it was trained on or connected to, and explain how usage is measured. A demo answering a real question convinces more than ten screenshots of perfect replies.
- One example with real input and output, not a blurred mockup.
- The declared limit: what the product does not do, in one line.
- Usage cost explained with a concrete case.
- A trial that starts without a card and without signup.
The order of the blocks
| Section | Role on the page | Blocks available |
|---|---|---|
| hero | show the result, not the model | 51 |
| feature | explain what goes in and what comes out | 53 |
| chat | let people try without signup | 6 |
| pricing | make usage cost clear | 41 |
| faq | close objections on data and limits | 24 |
| cta | drive to the trial | 27 |
Hero, feature, chat, pricing, faq, cta. Chat sits before pricing because the visitor must understand what the product does before reading the cost: swapping the order leads to a quote request with nothing seen. FAQ comes after the price, because the real objections appear while reading the numbers, not before.
The blocks to start from
The tables list block, registry, files and category. The 7-file chat includes bubbles, input and list: it is the most complete in the catalogue and reads as an interface, not an integration. The 2-file pricing knows nothing of credits or usage: you add the per-token or per-request cost.
Hero blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Feature blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
| Feature 02 - Three Columns Feature with Icons | Shadcn Space | 3 | feature |
Chat blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Chat Application | blocks | 7 | chat |
| Chat | 1st-pouf | 1 | chat |
Pricing blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Pricing 01 - Startup Pricing Plans | Shadcn Space | 2 | pricing |
| Pricing 02 - Scalable Pricing Table | Shadcn Space | 2 | pricing |
What breaks in production
The first fault is streaming: the chat block assumes a whole reply and receives tokens in pieces, so the message height changes on every chunk and the page scrolls by itself. The second is cost: pricing shows a monthly figure and the product bills by usage, so the customer finds out at month end. The third is the input losing its text when an error arrives.
- Streaming without a stable height: the page scrolls on every token.
- Usage cost hidden inside a monthly price.
- A provider error rendered as an assistant message.
- Input cleared after an error: the user retypes everything.
curl "https://ui.eneawork.it/api/blocks/category/chat?limit=5"The response lists the available chats with source and files: read it to see which keep a separate component for the message and which hold everything in one file. With six blocks the choice is short, and the difference that matters is where the send logic lives.
A limit to declare
None of the 6 chat blocks is wired to a provider: they are interfaces with sample messages. Streaming, request cancellation, retry and token counting stay to be written. Choosing the block to save the integration buys only the visible part.
In the catalogue: chat block, pricing block and components. The guides: hooks in a Server Component, hydration failed and pricing tables in 10 minutes.
Frequently asked questions
Does the chat go before or after pricing?
Before. Whoever reads the price without seeing the product compares figures only and finds it expensive. Whoever has just seen a useful answer reads the same figure as the cost of something that works, and the question shifts from “how much” to “how much do I need”.
How do I explain token cost without scaring people?
With a concrete case: “a ten-page document costs about eight cents”. The figure per million tokens is accurate and unreadable; comparing it to a unit the customer knows, such as a page or a request, makes the price judgeable.
Is a demo without signup needed?
Yes, when the product explains itself in one answer. A field with three ready examples lets people try within ten seconds and cuts empty signups. If every answer costs money, set a per-session limit and state it beside the field.
How do I declare the model limits?
With one line near the demo, not at the bottom of the page: what it does not do, which data it answers from and when a human check is wise. A limit stated up front prevents the refund email; the same limit inside the terms reaches nobody.
How many sections does an AI product page hold?
Six, after which the page turns into an essay. Beyond six, every added section pushes the trial lower and increases the time before the first input. With a lot to say, use the FAQ and leave the rest to the docs.