AI product
AI products win trust by showing their work. These components present what the model does, let people talk to it, show where answers come from and keep a human in the loop where it matters.
The order
Top to bottom, the way the sections sit on the finished page.
Step 1 / 7 · AI features
AI features
The marketing section that shows prompts, results and what the AI is good at.
Sections that show what AI does in a product, in six layouts: an assistant in the app, prompt to result, an agent working through steps, with and without AI, model choice with privacy and a live playground.
Step 2 / 7 · AI and chat
AI chat
The chat itself, with streaming answers, attachments and suggested prompts.
Chats, prompts, agents and answers with sources. Replies stream in, everything works with the keyboard.
Step 3 / 7 · AI answers
Citations
Sources next to every claim make answers checkable.
Citations for AI answers in five forms. Source cards with how often each is cited, footnotes with jump and back, pills that preview the quoted passage, a source panel that follows the chosen sentence and a check of which claims a source backs.
Step 4 / 7 · AI and chat
Agent run
Steps, tool calls and approvals of an agent, visible while it works.
Screens for AI agents that act on their own. A live run with stop, every tool call with input and output, a queue of actions waiting for a person, a plan to check before the start and the history of runs.
Step 5 / 7 · AI setup
Model picker
The choice of model with speed, cost and strengths side by side.
Five ways to choose the model behind an AI feature. A compact dropdown, cards with speed, depth, context and cost, a comparison table, the automatic choice explained as a route, and defaults per task with a cost limit.
Step 6 / 7 · AI assistants
Chat widget
The assistant as a small widget on every page of a website.
A support chat for websites. A launcher with a help home, a conversation with an AI note and quick replies, the handoff to a person with a queue, a lead form inside the chat and an AI answer embedded in a help page.
Step 7 / 7 · Pricing
Pricing
Plans with credits or usage, so people know what a month of AI costs.
Plans, tiers, calculators and price lists, formatted in the visitor’s language.
Install all of it at once
One command puts every component of this collection into your project.
aiw add @ai-website/ai-features @ai-website/ai-chat @ai-website/citations @ai-website/agent-run @ai-website/model-picker @ai-website/chat-widget @ai-website/pricingPrompt for your AI assistant
Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.
Build a website for an AI product with the UI Kit. Use AI features, AI chat, Citations, Agent run, Model picker, Chat widget and Pricing in this order. Write real copy for my offer and check the page in light and dark.More collections
- SaaS landing pageFrom the promise to the trial
- Local businessCafé, shop or trade around the corner
- Medical practiceTrust, hours and the next free slot
- Online shopFrom the shelf to the order
- PortfolioWork first, then the person behind it
- Blog or magazineFront page, reading and coming back
- EventProgram, tickets and the countdown
- App dashboardThe frame and the screens inside it
- Creator pageOne person, their work and their audience