For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
30
Sponsor

X Post

PreviousNext

X (Twitter) post card with engagement metrics.

M
mcpcn@mcpcn· 2h

Just shipped a new batch of agentic UI components. Build conversational interfaces faster than ever.

Installation

$ pnpm dlx shadcn@latest add @mcpcn/x-post

Usage

import {
  XPost,
  XPostActions,
  XPostAvatar,
  XPostContent,
  XPostHeader,
  XPostText,
} from "@/components/ui/x-post";
<XPost>
  <div className="flex gap-3">
    <XPostAvatar />
    <XPostContent>
      <XPostHeader />
      <XPostText />
      <XPostActions />
    </XPostContent>
  </div>
</XPost>

Composition

Use the following composition to build an XPost:

XPost
├── XPostAvatar
└── XPostContent
    ├── XPostHeader
    ├── XPostText
    └── XPostActions

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

Add XPost to a component library and map it to the installed component.

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  XPost,
  XPostActions,
  XPostAvatar,
  XPostContent,
  XPostHeader,
  XPostText,
} from "@/components/ui/x-post";
 
const OpenUIXPost = defineComponent({
  name: "XPost",
  description: "X (Twitter) post card with engagement metrics.",
  props: z.object({}),
  component: () => (
    <XPost>
      <div className="flex gap-3">
        <XPostAvatar />
        <XPostContent>
          <XPostHeader />
          <XPostText />
          <XPostActions />
        </XPostContent>
      </div>
    </XPost>
  ),
});
 
export const x_postLibrary = createLibrary({
  root: "XPost",
  components: [OpenUIXPost],
});

For richer generated compositions, define the child primitives separately and connect them with .ref fields. See Defining Components in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

pnpm add @json-render/core @json-render/react zod

Add XPost to a component catalog and map it to the installed component.

import { defineCatalog } from "@json-render/core";
import { defineRegistry } from "@json-render/react";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
 
import {
  XPost,
  XPostActions,
  XPostAvatar,
  XPostContent,
  XPostHeader,
  XPostText,
} from "@/components/ui/x-post";
 
export const catalog = defineCatalog(schema, {
  components: {
    XPost: {
      props: z.object({}),
      description: "X (Twitter) post card with engagement metrics.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    XPost: () => (
      <XPost>
        <div className="flex gap-3">
          <XPostAvatar />
          <XPostContent>
            <XPostHeader />
            <XPostText />
            <XPostActions />
          </XPostContent>
        </div>
      </XPost>
    ),
  },
});

Use catalog.prompt() to constrain model output, then render the generated spec with the json-render React Renderer. See the json-render Quick Start for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.