<LinkedInPost post={{ "id": "li-post-basic", "author": { "name": "Dr. Sarah Chen", "avatarUrl": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&h=200&fit=crop", "headline": "VP of Engineering at TechCorp | Building the future of AI" }, "text": "Excited to share that our team just shipped a major update to our ML pipeline. Six months of hard work, countless iterations, and one incredible team.\n\nKey learnings:\n• Start with the problem, not the solution\n• Iterate fast, fail faster\n• Celebrate small wins\n\nProud of everyone who made this possible!", "stats": { "likes": 847 }, "createdAt": "2025-11-05T09:15:00.000Z" }}/>Run this once from your project root.
npx shadcn@latest add @tool-ui/linkedin-postRender LinkedInPost in your UI with tool-compatible props.
import { LinkedInPost } from "@/components/tool-ui/linkedin-post";export function Example() { return ( <LinkedInPost post={{ id: "li-post-1", author: { name: "Jordan Lee", avatarUrl: "https://example.com/avatar.jpg", headline: "Engineering Lead | Platform", }, text: "Excited to share that our team shipped a major product update this week.", stats: { likes: 234 }, createdAt: "2025-01-05T09:00:00.000Z", }} /> );}Register this renderer so tool results display as LinkedInPost.
import { type Toolkit } from "@assistant-ui/react";import { LinkedInPost } from "@/components/tool-ui/linkedin-post";import { safeParseSerializableLinkedInPost } from "@/components/tool-ui/linkedin-post/schema";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showLinkedInPost: { type: "backend", render: createResultToolRenderer({ safeParse: safeParseSerializableLinkedInPost, render: (parsedResult) => <LinkedInPost post={parsedResult} />, }), },};These snippets use assistant-ui for end-to-end wiring, but the LinkedInPost 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.
Matches LinkedIn visual language and interaction patterns
Optimized layout for professional and text-heavy content
Compose custom actions below each post
Supports rich previews with title, image, and domain metadata
Prop
Type
Use ToolUI.LocalActions to compose external actions next to LinkedInPost.