import { InstagramPost } from "@/components/tool-ui/instagram-post"; Instagram 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](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `InstagramPost` in your UI with tool-compatible props.

```tsx import { InstagramPost } from "@/components/tool-ui/instagram-post"; export function Example() { return ( ); } ```

Register this renderer so tool results display as `InstagramPost`. ```tsx 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 ; }, }, }; ``` ## Key Features 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 ## Props void", }, }} /> Use [`ToolUI.LocalActions`](/docs/actions) to compose external actions next to `InstagramPost`. ## Related - [X Post](/docs/x-post): platform-native card for X (Twitter) content - [LinkedIn Post](/docs/linkedin-post): platform-native card for LinkedIn content

Tool UI