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

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

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

Tool UI