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

YouTube Post

PreviousNext

YouTube video card with playable embed.

Video thumbnail: Building Agentic UIs with mcpcn
15:42
M

Building Agentic UIs with mcpcn

mcpcn

12K ā€¢ 3 days ago

Installation

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

Usage

import {
  YouTubePost,
  YouTubePostAvatar,
  YouTubePostDetails,
  YouTubePostInfo,
  YouTubePostMenu,
  YouTubePostPlayer,
} from "@/components/ui/youtube-post";
<YouTubePost>
  <YouTubePostPlayer />
  <YouTubePostInfo>
    <div className="flex gap-3">
      <YouTubePostAvatar />
      <YouTubePostDetails />
      <YouTubePostMenu />
    </div>
  </YouTubePostInfo>
</YouTubePost>

Composition

Use the following composition to build an YouTubePost:

YouTubePost
ā”œā”€ā”€ YouTubePostPlayer
ā””ā”€ā”€ YouTubePostInfo
    ā”œā”€ā”€ YouTubePostAvatar
    ā”œā”€ā”€ YouTubePostDetails
    ā””ā”€ā”€ YouTubePostMenu

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

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

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  YouTubePost,
  YouTubePostAvatar,
  YouTubePostDetails,
  YouTubePostInfo,
  YouTubePostMenu,
  YouTubePostPlayer,
} from "@/components/ui/youtube-post";
 
const OpenUIYouTubePost = defineComponent({
  name: "YouTubePost",
  description: "YouTube video card with playable embed.",
  props: z.object({}),
  component: () => (
    <YouTubePost>
      <YouTubePostPlayer />
      <YouTubePostInfo>
        <div className="flex gap-3">
          <YouTubePostAvatar />
          <YouTubePostDetails />
          <YouTubePostMenu />
        </div>
      </YouTubePostInfo>
    </YouTubePost>
  ),
});
 
export const youtube_postLibrary = createLibrary({
  root: "YouTubePost",
  components: [OpenUIYouTubePost],
});

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 YouTubePost 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 {
  YouTubePost,
  YouTubePostAvatar,
  YouTubePostDetails,
  YouTubePostInfo,
  YouTubePostMenu,
  YouTubePostPlayer,
} from "@/components/ui/youtube-post";
 
export const catalog = defineCatalog(schema, {
  components: {
    YouTubePost: {
      props: z.object({}),
      description: "YouTube video card with playable embed.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    YouTubePost: () => (
      <YouTubePost>
        <YouTubePostPlayer />
        <YouTubePostInfo>
          <div className="flex gap-3">
            <YouTubePostAvatar />
            <YouTubePostDetails />
            <YouTubePostMenu />
          </div>
        </YouTubePostInfo>
      </YouTubePost>
    ),
  },
});

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.