@gram-ai/elements 1.0.6 → 1.0.8

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { ElementsProvider as GramElementsProvider } from './contexts/ElementsProvider';
 export { useElements as useGramElements } from './contexts/ElementsProvider';
-export { Chat as GramChat } from './components/Chat';
-export type { ElementsConfig, ComposerConfig, ModalConfig, ToolsConfig, ModelConfig, WelcomeConfig, Suggestion, GramRuntimeApi, CustomRuntimeApi, } from './types';
+export { Chat } from './components/Chat';
+export type { ElementsConfig, ComposerConfig, ModalConfig, ToolsConfig, ModelConfig, WelcomeConfig, Suggestion, } from './types';

package/dist/server.d.ts

@@ -0,0 +1,7 @@
+import { IncomingMessage, ServerResponse } from 'node:http';
+export declare const createElementsServerHandlers: () => {
+    chat: typeof chatHandler;
+};
+type NextFunction = (err?: unknown) => void;
+declare function chatHandler(req: IncomingMessage, res: ServerResponse, next: NextFunction): Promise<void>;
+export {};

package/dist/types/index.d.ts

@@ -1,25 +1,37 @@
-import { ChatModelAdapter } from '@assistant-ui/react';
-import { ComponentType, ReactNode } from 'react';
+import { ToolCallMessagePartComponent } from '@assistant-ui/react';
+import { ReactNode } from 'react';
+import { z } from 'zod';
 export interface ElementsProviderProps {
     /**
      * The children to render.
      */
     children: ReactNode;
-    /**
-     * The API to use for the elements.
-     * Can be a GramRuntimeApi or a CustomRuntimeApi.
-     */
-    api: GramRuntimeApi | CustomRuntimeApi;
     /**
      * Configuration object for the Elements library.
      */
     config: ElementsConfig;
 }
+type ServerUrl = string;
 export interface ElementsConfig {
+    /**
+     * The project slug to use for the Elements library.
+     */
+    projectSlug: string;
+    /**
+     * The Gram Server URL to use for the Elements library.
+     * Can be retrieved from https://app.getgram.ai/{team}/{project}/mcp/{mcp_slug}
+     * Note: This config option will likely change in the future
+     */
+    mcp: ServerUrl;
+    /**
+     * Custom environment variable overrides for the Elements library.
+     * Will be used to override the environment variables for the MCP server.
+     */
+    environment?: Record<string, unknown>;
     /**
      * Whether to render the chat window inside of an expandable modal or a standalone chat window.
      */
-    variant?: 'modal' | 'standalone';
+    variant?: 'widget' | 'standalone';
     /**
      * LLM model configuration.
      *
@@ -54,6 +66,11 @@ export interface ElementsConfig {
      */
     tools?: ToolsConfig;
 }
+/**
+ * ModelConfig is used to configure model support in the Elements library.
+ *
+ * NOTE: Not yet implemented
+ */
 export interface ModelConfig {
     /**
      * The models available to the user.
@@ -65,6 +82,20 @@ export interface ModelConfig {
      */
     showModelPicker?: boolean;
 }
+/**
+ * ToolsConfig is used to configure tool support in the Elements library.
+ * At the moment, you can override the default React components used by
+ * individual tool results.
+ *
+ * @example
+ * const config: ElementsConfig = {
+ *   tools: {
+ *     components: {
+ *       "get_current_weather": WeatherComponent,
+ *     },
+ *   },
+ * }
+ */
 export interface ToolsConfig {
     /**
      * `components` can be used to override the default components used by the
@@ -81,7 +112,7 @@ export interface ToolsConfig {
      *   },
      * }
      */
-    components?: Record<string, ComponentType>;
+    components?: Record<string, ToolCallMessagePartComponent | undefined> | undefined;
 }
 export interface WelcomeConfig {
     /**
@@ -124,16 +155,30 @@ export interface ComposerConfig {
     placeholder: string;
     /**
      * Whether to enable attachments in the composer.
+     *
+     * NOTE: Not yet implemented
      */
     attachments: boolean;
 }
-export interface GramRuntimeApi {
-    getSessionToken: () => Promise<string>;
-    projectToken: string;
-}
-export type CustomRuntimeApi = ChatModelAdapter;
 export type ElementsContextType = {
     config: ElementsConfig;
 };
-export declare function isGramRuntimeApi(api: GramRuntimeApi | CustomRuntimeApi | undefined): api is GramRuntimeApi;
-export declare function isCustomRuntimeApi(api: GramRuntimeApi | CustomRuntimeApi | undefined): api is CustomRuntimeApi;
+declare const ContentSchema: z.ZodUnion<readonly [z.ZodObject<{
+    type: z.ZodLiteral<"text">;
+    text: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"image">;
+    data: z.ZodString;
+}, z.core.$strip>]>;
+export type ToolCallResultContent = z.infer<typeof ContentSchema>;
+export declare const ToolCallResultSchema: z.ZodUnion<[z.ZodObject<{
+    content: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"image">;
+        data: z.ZodString;
+    }, z.core.$strip>]>>;
+}, z.core.$strip>, z.ZodUndefined]>;
+export type ToolCallResult = z.infer<typeof ToolCallResultSchema>;
+export {};

package/package.json

@@ -2,13 +2,17 @@
   "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.0.6",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "exports": {
     ".": {
       "import": "./dist/elements.js",
       "types": "./dist/index.d.ts"
     },
+    "./server": {
+      "import": "./dist/server.js",
+      "types": "./dist/server.d.ts"
+    },
     "./elements.css": "./dist/elements.css"
   },
   "files": [
@@ -23,7 +27,7 @@
   },
   "scripts": {
     "build": "vite build",
-    "lint": "eslint .",
+    "lint": "eslint src",
     "analyze": "pnpm dlx vite-bundle-visualizer",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -45,24 +49,33 @@
     "zustand": "^5.0.0"
   },
   "dependencies": {
+    "@gram-ai/sdk": "^0.2.3",
+    "@openrouter/ai-sdk-provider": "^1.4.1",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "assistant-stream": "^0.2.42",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
-    "tailwind-merge": "^3.3.1"
+    "sdk": "link:@types/@modelcontextprotocol/sdk",
+    "tailwind-merge": "^3.3.1",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
-    "@ai-sdk/openai": "2.0.0-beta.5",
+    "@ai-sdk/mcp": "^0.0.11",
+    "@ai-sdk/openai": "^2.0.0-beta.5",
     "@assistant-ui/react": "^0.11.37",
+    "@assistant-ui/react-ai-sdk": "^1.1.16",
     "@assistant-ui/react-markdown": "^0.11.4",
     "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.39.1",
+    "@modelcontextprotocol/sdk": "^1.24.3",
     "@storybook/addon-docs": "^10.0.8",
     "@storybook/react-vite": "^10.0.8",
     "@tailwindcss/vite": "^4.1.13",
+    "@types/lodash.merge": "^4.6.9",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-react": "^5.0.3",
     "ai": "5.0.90",
@@ -74,7 +87,9 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "eslint-plugin-storybook": "^10.1.4",
     "eslint-plugin-unused-imports": "^4.3.0",
+    "lodash.merge": "^4.6.2",
     "motion": "^12.23.14",
+    "openai": "^6.9.1",
     "prettier": "^3.7.4",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "remark-gfm": "^4.0.1",

package/dist/lib/gramRuntimeApi.d.ts

@@ -1,2 +0,0 @@
-import { CustomRuntimeApi, GramRuntimeApi } from '../types';
-export declare function createGramRuntimeFromApi(_: GramRuntimeApi): CustomRuntimeApi;