alexriveraยท14w
alexrivera Golden hour in the city. Sometimes you just have to stop and appreciate the view.
Instagram Post
Platform-native post card for Instagram.
<InstagramPost post={{ "id": "ig-post-basic", "author": { "name": "Alex Rivera", "handle": "alexrivera", "avatarUrl": "https://images.unsplash.com/photo-1695840358933-16dd7baa6dfb?w=200&h=200&fit=crop", "verified": true }, "text": "Golden hour in the city. Sometimes you just have to stop and appreciate the view.", "media": [ { "type": "image", "url": "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=800&h=800&fit=crop", "alt": "City skyline at golden hour" } ], "stats": { "likes": 3842 }, "createdAt": "2025-11-05T18:45:00.000Z" }}/>Getting Started
Run this once from your project root.
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";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showInstagramPost: { type: "backend", render: createResultToolRenderer({ safeParse: safeParseSerializableInstagramPost, render: (parsedResult) => <InstagramPost post={parsedResult} />, }), },};These snippets use assistant-ui for end-to-end wiring, but the InstagramPost component itself is framework-agnostic at the UI layer: you can use it in any React codebase with any LLM SDK or tool-calling interface that can provide compatible props.
Key Features
Platform-native styling
Matches Instagram visual language and interaction patterns
Media-first layout
Supports single-image and carousel-style media content
External actions
Compose custom actions with ToolUI action surfaces
Verified identity
Supports verified author badges and creator context
Props
Prop
Type
Use ToolUI.LocalActions to compose external actions next to InstagramPost.