npx tool-agent "integrate the instagram post component to render Instagram post previews"npx shadcn@latest add @tool-ui/instagram-postInstagram is a visual platform, and its content deserves a visual preview. InstagramPost renders a media-first card that matches Instagram's layout: author info, image carousel, caption, and engagement stats. Use it when the assistant surfaces or drafts Instagram content in the conversation.
Role: Information. For displaying data the user reads. See Design Guidelines for how component roles work.
Run this once from your project root.
npx tool-agent "integrate the instagram post component to render Instagram post previews"npx shadcn@latest add @tool-ui/instagram-postRender InstagramPost in your UI with tool-compatible props.
import { InstagramPost } from "@/components/tool-ui/instagram-post";export function Example() { return ( <InstagramPost post={{ id: "ig-post-1", author: { name: "Alex Rivera", handle: "alexrivera", avatarUrl: "https://example.com/avatar.jpg", verified: true, }, text: "Golden hour vibes in the city.", media: [ { type: "image", url: "https://example.com/post-image.jpg", alt: "City skyline", }, ], stats: { likes: 8421 }, createdAt: "2025-01-05T18:00:00.000Z", }} /> );}Register this renderer so tool results display as InstagramPost.
import { type Toolkit } from "@assistant-ui/react";import { InstagramPost } from "@/components/tool-ui/instagram-post";import { safeParseSerializableInstagramPost } from "@/components/tool-ui/instagram-post/schema";export const toolkit: Toolkit = { showInstagramPost: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableInstagramPost(result); if (!parsed) { return null; } return <InstagramPost post={parsed} />; }, },};Uses Instagram's layout, typography, and color scheme
Single images and swipeable carousels with proper aspect ratios
Add actions like "Save Draft" or "Share" via ToolUI action surfaces
Verified badges and creator context on author profiles
Prop
Type
Use ToolUI.LocalActions to compose external actions next to InstagramPost.