pnpm dlx shadcn@latest add button tooltip

import { XPost } from "@/components/tool-ui/x-post";
import { InstagramPost } from "@/components/tool-ui/instagram-post";
import { LinkedInPost } from "@/components/tool-ui/linkedin-post";

// X Post
<XPost
  post={{
    id: "tweet-123",
    author: { name: "Jane", handle: "jane", avatarUrl: "...", verified: true },
    text: "Hello world!",
    stats: { likes: 42 },
    createdAt: "2025-01-01T12:00:00Z",
  }}
  onAction={(action, post) => console.log(action, post.id)}
  responseActions={[{ id: "report", label: "Report", variant: "destructive" }]}
  onResponseAction={(id) => console.log(id)}
/>

// Instagram Post
<InstagramPost
  post={{
    id: "ig-123",
    author: { name: "Jane", handle: "jane", avatarUrl: "..." },
    text: "Beach day!",
    media: [{ type: "image", url: "...", alt: "Beach photo" }],
    stats: { likes: 1234 },
  }}
/>

// LinkedIn Post
<LinkedInPost
  post={{
    id: "li-123",
    author: { name: "Jane Smith", avatarUrl: "...", headline: "CEO at Acme" },
    text: "Excited to announce...",
    linkPreview: { url: "...", title: "News", domain: "acme.com" },
    stats: { likes: 89 },
  }}
/>

// Backend tool
import { tool, jsonSchema } from "ai";

const showXPost = tool({
  description: "Show an X post",
  inputSchema: jsonSchema<{}>({
    type: "object",
    properties: {},
    additionalProperties: false,
  }),
  async execute() {
    return {
      id: "post-x-1",
      author: {
        name: "Tool UI",
        handle: "assistant_ui",
        avatarUrl: "https://api.dicebear.com/9.x/shapes/svg?seed=tool-ui",
        verified: true,
      },
      text: "DX test: rendering an XPost tool UI inline in chat.",
      stats: { likes: 12 },
      createdAt: new Date().toISOString(),
    };
  },
});

// Frontend with assistant-ui
import { makeAssistantToolUI } from "@assistant-ui/react";
import {
  XPost,
  XPostErrorBoundary,
  parseSerializableXPost,
} from "@/components/tool-ui/x-post";

function ParsedXPost({ result }: { result: unknown }) {
  const post = parseSerializableXPost(result);
  return <XPost post={post} />;
}

export const ShowXPostUI = makeAssistantToolUI({
  toolName: "showXPost",
  render: ({ result }) => {
    // Tool outputs stream in; `result` will be `undefined` until the tool resolves.
    if (result === undefined) {
      return (
        <div className="bg-card/60 text-muted-foreground w-full max-w-[540px] rounded-2xl border px-5 py-4 text-sm shadow-xs">
          Loading post…
        </div>
      );
    }

    return (
      <XPostErrorBoundary>
        <ParsedXPost result={result} />
      </XPostErrorBoundary>
    );
  },
});