npx tool-agent "integrate the x post component to render X/Twitter post previews"npx shadcn@latest add @tool-ui/x-postA link to a tweet tells you nothing until you click it. XPost embeds the full post inline (author, text, media, quoted posts, and engagement stats) styled to match the platform. Use it when the assistant fetches or drafts X content and you want it displayed as a real post.
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 x post component to render X/Twitter post previews"npx shadcn@latest add @tool-ui/x-postRender XPost in your UI with tool-compatible props.
import { XPost } from "@/components/tool-ui/x-post";export function Example() { return ( <XPost post={{ id: "x-post-1", author: { name: "Taylor Kim", handle: "taylorkim", avatarUrl: "https://example.com/avatar.jpg", verified: true, }, text: "Thinking about how to make Tool UIs feel more collaborative.", stats: { likes: 12 }, createdAt: "2025-01-05T12:00:00.000Z", }} /> );}Register this renderer so tool results display as XPost.
import { type Toolkit } from "@assistant-ui/react";import { XPost } from "@/components/tool-ui/x-post";import { safeParseSerializableXPost } from "@/components/tool-ui/x-post/schema";export const toolkit: Toolkit = { showXPost: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableXPost(result); if (!parsed) { return null; } return <XPost post={parsed} />; }, },};Uses X's layout, typography, and color scheme
Text, quoted posts, media attachments, and link previews
Add actions like "Save Draft" or "Share" via ToolUI action surfaces
External URLs open safely with built-in navigation helpers
Prop
Type
Use ToolUI.LocalActions to compose external actions next to XPost.