Directory Detail

Деталь каталога персонализации — «витрина» коннектора: шапка, карусель примеров, разработчик, инструменты и детали.

Miro

Доски, диаграммы и совместная работа

Покажи все доски в моём аккаунте Miro

Найдено 12 досок. Открываю «Q3 Roadmap» и выгружаю стикеры по колонкам.

1 / 2

Разработано: Oracul

Встроенный коннектор от команды Oracul — наш MCP-сервер поверх официального API сервиса.

Инструменты10

list_boardsget_boardcreate_boardlist_itemscreate_itemupdate_itemsearchget_comments+2 ещё

Детали

Автор

Oracul

Возможности

Только чтение

Подробнее

Документация

"use client";

import { DirectoryDetail } from "@/components/ui/directory-detail";

export default function Particle() {
  return (
    <div className="mx-auto w-full max-w-2xl">
      <DirectoryDetail
        capability="Только чтение"
        connected={false}
        developerName="Oracul"
        developerNote="Встроенный коннектор от команды Oracul — наш MCP-сервер поверх официального API сервиса."
        developerUrl="https://oracul.co"
        docsUrl="https://oracul.co/docs"
        examples={[
          {
            body: "Найдено 12 досок. Открываю «Q3 Roadmap» и выгружаю стикеры по колонкам.",
            title: "Покажи все доски в моём аккаунте Miro",
          },
          {
            body: "Создал доску «Sprint 42» и добавил 6 карточек из бэклога.",
            title: "Собери доску спринта из задач",
          },
        ]}
        icon={<span className="font-semibold text-foreground text-sm">Mi</span>}
        name="Miro"
        onBack={() => {}}
        onConnect={() => {}}
        onCopyUrl={() => {}}
        tagline="Доски, диаграммы и совместная работа"
        tools={[
          "list_boards",
          "get_board",
          "create_board",
          "list_items",
          "create_item",
          "update_item",
          "search",
          "get_comments",
          "add_comment",
          "export_board",
        ]}
      />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/directory-detail

Использование

import { DirectoryDetail } from "@/components/ui/directory-detail";
 
<DirectoryDetail
  name="Miro"
  tagline="Доски, диаграммы и совместная работа"
  connected={false}
  examples={[{ title: "Покажи все доски", body: "Найдено 12 досок…" }]}
  developerName="Oracul"
  developerUrl="https://oracul.co"
  tools={["list_boards", "create_board"]}
  capability="Только чтение"
  docsUrl="https://oracul.co/docs"
  onBack={() => {}}
  onConnect={() => {}}
  onCopyUrl={() => {}}
/>

Презентационный (plain-props): данные + действия (onBack / onConnect / onDisconnect / onCopyUrl) и узел icon (favicon) — приложение владеет данными и поведением. Индекс карусели — внутренний стейт.

Prop	Тип	Описание
`name`	`ReactNode`	Имя коннектора.
`tagline`	`ReactNode`	Подзаголовок под именем.
`icon`	`ReactNode`	Бренд-иконка (favicon) слева.
`connected`	`boolean`	Подключён → «Отключить»; иначе «Подключить».
`examples`	`{ title; body }[]`	Карусель примеров запрос/ответ.
`note`	`ReactNode`	Описание под каруселью.
`developerName`	`ReactNode`	Разработчик.
`developerUrl`	`string`	Ссылка на разработчика.
`developerNote`	`ReactNode`	Строка о доверии/происхождении.
`tools`	`ReactNode[]`	Список инструментов (первые `visibleTools`, остальное → «+N ещё»).
`visibleTools`	`number`	Сколько инструментов показать (по умолчанию 8).
`capability`	`ReactNode`	«Только чтение» / «Интерактивный».
`docsUrl`	`string`	Ссылка на документацию.
`onBack` / `onConnect` / `onDisconnect` / `onCopyUrl`	`() => void`	Действия.

На этой странице

Установка Использование API