npx tool-agent "integrate the linkedin post component to render LinkedIn post previews"npx shadcn@latest add @tool-ui/linkedin-postAnnouncements, thought leadership, company updates: professional content benefits from AI-assisted drafting, but a plain text blob doesn't convey the final result. LinkedInPost renders a card that matches LinkedIn's layout: author headline, long-form text, link previews, and engagement stats.
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 linkedin post component to render LinkedIn post previews"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";export const toolkit: Toolkit = { showLinkedInPost: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableLinkedInPost(result); if (!parsed) { return null; } return <LinkedInPost post={parsed} />; }, },};Uses LinkedIn's layout, typography, and color scheme
Handles professional long-form text with proper truncation and expansion
Add actions like "Post" or "Edit" via ToolUI action surfaces
Rich article previews with title, image, and domain
Prop
Type
Use ToolUI.LocalActions to compose external actions next to LinkedInPost.