@gram-ai/elements 1.0.7 → 1.0.9

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?: 'widget' | 'standalone' | 'sidecar';
+    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,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.0.7",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -49,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/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",
@@ -78,6 +87,7 @@
     "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",

package/dist/lib/chatHandler.d.ts

@@ -1,33 +0,0 @@
-export interface ChatHandlerOptions {
-    /**
-     * The API key for the OpenAI-compatible provider.
-     * Defaults to OPENAI_API_KEY environment variable.
-     */
-    apiKey?: string;
-    /**
-     * The base URL for the OpenAI-compatible API.
-     * Use this for OpenRouter, Azure, or other compatible providers.
-     * @example 'https://openrouter.ai/api/v1'
-     */
-    baseURL?: string;
-    /**
-     * The model to use for chat completions.
-     * @default 'gpt-4o-mini'
-     */
-    model?: string;
-}
-/**
- * Creates a chat handler for Next.js API routes.
- * Returns OpenAI-compatible SSE streaming format for use with assistant-ui.
- *
- * @example
- * // app/api/chat/route.ts
- * import { createChatHandler } from '@gram-ai/elements/server'
- *
- * export const POST = createChatHandler({
- *   apiKey: process.env.OPENROUTER_API_KEY,
- *   baseURL: 'https://openrouter.ai/api/v1',
- *   model: 'anthropic/claude-3.5-sonnet',
- * })
- */
-export declare function createChatHandler(options?: ChatHandlerOptions): (req: Request) => Promise<Response>;

package/dist/lib/fetchAdapter.d.ts

@@ -1,18 +0,0 @@
-import { ChatModelAdapter } from '@assistant-ui/react';
-export interface FetchAdapterOptions {
-    /**
-     * The API endpoint to send chat requests to.
-     * @default '/api/chat'
-     */
-    endpoint?: string;
-}
-/**
- * Creates a chat adapter that connects to an OpenAI-compatible API endpoint.
- * Handles the SSE streaming format used by OpenAI and compatible providers.
- *
- * @example
- * import { createFetchAdapter } from '@gram-ai/elements'
- *
- * const adapter = createFetchAdapter({ endpoint: '/api/chat' })
- */
-export declare function createFetchAdapter(options?: FetchAdapterOptions): ChatModelAdapter;

package/dist/lib/gramRuntimeApi.d.ts

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