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

Post Detail

PreviousNext

Full post view with cover image, author info, content, tags and related posts section.

Getting Started with Agentic UI Components

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces for AI-powered applications.

Sarah Chen

Sarah Chen

January 15, 20245 min read

Installation

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

Usage

import { PostDetail, PostDetailContent } from "@/components/ui/post-detail";
<PostDetail>
  <PostDetailContent />
</PostDetail>

Composition

Use the following composition to build an PostDetail:

PostDetail
├── PostDetailAuthor
├── PostDetailBody
├── PostDetailContent
├── PostDetailCover
├── PostDetailHeader
└── PostDetailRelated

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

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

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import { PostDetail, PostDetailContent } from "@/components/ui/post-detail";
 
const OpenUIPostDetail = defineComponent({
  name: "PostDetail",
  description:
    "Full post view with cover image, author info, content, tags and related posts section.",
  props: z.object({}),
  component: () => (
    <PostDetail>
      <PostDetailContent />
    </PostDetail>
  ),
});
 
export const post_detailLibrary = createLibrary({
  root: "PostDetail",
  components: [OpenUIPostDetail],
});

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 PostDetail 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 { PostDetail, PostDetailContent } from "@/components/ui/post-detail";
 
export const catalog = defineCatalog(schema, {
  components: {
    PostDetail: {
      props: z.object({}),
      description:
        "Full post view with cover image, author info, content, tags and related posts section.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    PostDetail: () => (
      <PostDetail>
        <PostDetailContent />
      </PostDetail>
    ),
  },
});

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.