Athia Zohra@athiazohraยท14w
Wild to think: in the 1940s we literally rewired programs by hand. Today, we ship apps worldwide with a single command.
X Post
Platform-native post card for X (Twitter).
<XPost post={{ "id": "x-post-basic", "author": { "name": "Athia Zohra", "handle": "athiazohra", "avatarUrl": "https://images.unsplash.com/photo-1753288695169-e51f5a3ff24f?w=200&h=200&fit=crop", "verified": true }, "text": "Wild to think: in the 1940s we literally rewired programs by hand. Today, we ship apps worldwide with a single command.", "stats": { "likes": 5 }, "createdAt": "2025-11-05T14:01:00.000Z" }}/>Getting Started
Run this once from your project root.
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";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showXPost: { type: "backend", render: createResultToolRenderer({ safeParse: safeParseSerializableXPost, render: (parsedResult) => <XPost post={parsedResult} />, }), },};These snippets use assistant-ui for end-to-end wiring, but the XPost 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.
Key Features
Platform-native styling
Matches X visual language and interaction patterns
Rich post content
Supports text, quoted posts, media, and link previews
External actions
Compose custom actions with ToolUI action surfaces
Safe links
Built-in safe navigation helpers for external URLs
Props
Prop
Type
Use ToolUI.LocalActions to compose external actions next to XPost.