@gram-ai/elements 1.10.0 → 1.11.0

package/dist/hooks/usePluginComponents.d.ts

@@ -0,0 +1,9 @@
+import { CodeHeaderProps, SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
+import { ComponentType } from 'react';
+import { Plugin } from '../types/plugins';
+type ComponentsByLanguage = Record<string, {
+    CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+    SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
+}> | undefined;
+export declare function useComponentsByLanguage(plugins: Plugin[]): ComponentsByLanguage;
+export {};

package/dist/plugins/chart/component.d.ts

@@ -0,0 +1,3 @@
+import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
+import { FC } from 'react';
+export declare const ChartRenderer: FC<SyntaxHighlighterProps>;

package/dist/plugins/chart/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '../../types/plugins';
+/**
+ * This plugin renders Vega charts.
+ */
+export declare const chart: Plugin;

package/dist/plugins/index.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from '../types/plugins';
+export declare const recommended: Plugin[];
+export { chart } from './chart';
+export type { Plugin } from '../types/plugins';

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import { MODELS } from '../lib/models';
 import { ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { Dispatch, SetStateAction, ReactNode } from 'react';
+import { Plugin } from './plugins';
 export interface ElementsProviderProps {
     /**
      * The children to render.
@@ -19,6 +20,7 @@ export interface ElementsConfig {
      * The system prompt to use for the Elements library.
      */
     systemPrompt?: string;
+    plugins?: Plugin[];
     /**
      * The project slug to use for the Elements library.
      */
@@ -312,5 +314,6 @@ export type ElementsContextType = {
     setIsExpanded: Dispatch<SetStateAction<boolean>>;
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
+    plugins: Plugin[];
 };
 export {};

package/dist/types/plugins.d.ts

@@ -0,0 +1,57 @@
+import { CodeHeaderProps, SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
+import { ComponentType } from 'react';
+/**
+ * A plugin enables addition of custom rendering capabilities to the Elements library.
+ * For example, a plugin could provide a custom renderer for a specific language such as
+ * D3.js or Mermaid.
+ *
+ * The general flow of a plugin is:
+ * 1. Plugin extends the system prompt with a custom prompt instructing the LLM to return code fences marked with the specified language / format
+ * 2. The LLM returns a code fence marked with the specified language / format
+ * 3. The code fence is rendered using the custom renderer
+ */
+export interface Plugin {
+    /**
+     * Any prompt that the plugin may need to add to the system prompt.
+     * Will be appended to the built-in system prompt.
+     *
+     * @example
+     * ```
+     * If the user asks for a chart, use D3 to render it.
+     * Return only a d3 code block. The code will execute in a sandboxed environment where:
+     * - \`d3\` is the D3 library
+     * - \`container\` is the DOM element to render into (use \`d3.select(container)\` NOT \`d3.select('body')\`)
+     * The code should be wrapped in a \`\`\`d3
+     * \`\`\` block.
+     * ```
+     */
+    prompt: string;
+    /**
+     * The language identifier for the syntax highlighter
+     * e.g mermaid or d3
+     *
+     * Does not need to be an official language identifier, can be any string. The important part is that the
+     * prompt adequately instructs the LLM to return code fences marked with the specified language / format
+     *
+     * @example
+     * ```
+     * d3
+     * ```
+     */
+    language: string;
+    /**
+     * The component to use for the syntax highlighter.
+     */
+    Component: ComponentType<SyntaxHighlighterProps>;
+    /**
+     * The component to use for the code header.
+     * Will be rendered above the code block.
+     * @default () => null
+     */
+    Header?: ComponentType<CodeHeaderProps> | undefined;
+    /**
+     * Whether to override existing plugins with the same language.
+     * @default false
+     */
+    overrideExisting?: boolean;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gram-ai/elements",
   "description": "Gram Elements is a library of UI primitives for building chat-like experiences for MCP Servers.",
   "type": "module",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -15,6 +15,11 @@
       "import": "./dist/server.js",
       "require": "./dist/server.cjs"
     },
+    "./plugins": {
+      "types": "./dist/plugins.d.ts",
+      "import": "./dist/plugins.js",
+      "require": "./dist/plugins.cjs"
+    },
     "./elements.css": "./dist/elements.css"
   },
   "files": [
@@ -44,7 +49,6 @@
     "@assistant-ui/react-markdown": "^0.11.0",
     "@types/react": ">=18 <20",
     "@types/react-dom": ">=18 <20",
-    "d3": "^7.9.0",
     "motion": "^12.0.0",
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
@@ -78,9 +82,6 @@
     },
     "zustand": {
       "optional": true
-    },
-    "d3": {
-      "optional": true
     }
   },
   "dependencies": {
@@ -99,6 +100,7 @@
     "lucide-react": "^0.544.0",
     "tailwind-merge": "^3.3.1",
     "tw-shimmer": "^0.4.0",
+    "vega": "^6.2.0",
     "zod": "^4.1.13"
   },
   "devDependencies": {