Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Message With Web Preview AI Block for Vue

An assistant answer with three inline link chips and a Links band of cards, each with a drawn page thumbnail, title, domain, description and the claim it supports, a List and Grid switch and an excerpt panel with a sample Open link.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show the pages an answer drew on as link cards, with this AI message with web preview for Vue with Ark UI. A compact header names the product and a hairline frame holds one turn: a question in a secondary Bubble and an answer with three inline link chips, each naming its site and picking its card. A "Links (3)" band has a List and Grid Toggle Group; every card shows a drawn page thumbnail (a header bar, a hero block and lines in three layouts, in greys, no photos), the title, the domain in monospace, a two-line description and "Used for: claim 2". Pressing a card shows its excerpt in a panel under the cards that keeps its height, with an outline "Open link" that goes nowhere and says so. It's built from Bubble, Toggle Group, Badge styles, Button styles and Guides, with a drawn SVG for each thumbnail. For reading-list assistants, research tools and any answer with links to weigh.

FAQ

Does it fetch the pages?

No. The title, domain, description, excerpt and the drawn layout of each site are typed at the top of the file and the sites are fictional; "Open link" points to # and the status line says links are samples. To make it real, fetch each page's title, description and excerpt on your server, never in the browser, and replace href="#" with the page's address.

Why are the thumbnails drawn?

They are small SVG pages in greys, built from a list of rectangles per layout, so there is no image to load, nothing to fail and no photo of someone else's site. Swap in a stored screenshot if you have one.

Why is the excerpt in a panel and not inside the card?

Opening a card in place would push the cards below it down. One shared panel under the cards keeps the same height whichever card is chosen, and each card says it controls it.

How does it work from the keyboard?

The chips and cards are buttons that report whether they are chosen, List and Grid are a toggle group with arrow keys, and Open link is a link that is skipped until a card is chosen. The status line announces the excerpt.

How does it look on a phone?

Cards stack in one column, with the thumbnail first, whichever view is chosen; the Grid view puts three across from the medium breakpoint.

All 100 ai blocks