@sanity/agent-directives

@sanity/agent-directives

Shared directive system for Sanity Agent.

Installation

pnpm add @sanity/agent-directives

React Usage (Ada)

// directives/kit.ts
import { createDirectiveKit } from "@sanity/agent-directives/react";
import { useThreadApplication } from "../hooks/useThreadResource";

export const { defineDirective } = createDirectiveKit({
  useApplication: useThreadApplication,
});

// directives/Document.tsx
import { defineDirective } from "./kit";

export const Document = defineDirective("document", ({ id, application }) => {
  const doc = useDocument(id);
  return <DocumentCard document={doc} />;
});

That's it. Schema validation and application injection happen automatically.

String Usage (Slack)

// directives/kit.ts
import { createDirectiveKit } from "@sanity/agent-directives/string";

interface SlackContext {
  accessToken: string;
  applications: Application[];
}

interface SlackOutput {
  text?: string;
  blocks?: SlackBlock[];
}

export const { defineDirective, renderDirective } = createDirectiveKit<
  SlackContext,
  SlackOutput
>();

// directives/document.ts
import { defineDirective } from "./kit";

export const Document = defineDirective(
  "document",
  async ({ id, _context }) => {
    const doc = await fetchDocument(id, _context.accessToken);
    return { blocks: [linkButton(doc.title, url)] };
  },
);

// Render directives from remark AST
import { renderDirective } from "./kit";

const output = await renderDirective(node, context);

Formatters (Agent Backend)

import {
  createDocumentDirective,
  createChangesDirective,
} from "@sanity/agent-directives/formatters";

createDocumentDirective({ id: "doc-123", type: "article" });
// => '::document{id="doc-123" type="article"}'

createChangesDirective({ createdCount: 3, updatedCount: 5 });
// => '::changes{createdCount="3" updatedCount="5"}'

Available Directives

Name	Props
document	id, type?, source?
release	id, source?
resource	source
set	id
changes	createdCount, updatedCount

Exports

Path	Description
@sanity/agent-directives	Schemas and formatters
@sanity/agent-directives/react	createDirectiveKit for React
@sanity/agent-directives/string	createDirectiveKit for server-side
@sanity/agent-directives/formatters	Directive string formatters