@gram-ai/elements 1.0.5 → 1.0.7

package/dist/index.d.ts

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

package/dist/lib/chatHandler.d.ts

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,18 @@
+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/server.d.ts

@@ -0,0 +1,2 @@
+export { createChatHandler } from './lib/chatHandler';
+export type { ChatHandlerOptions } from './lib/chatHandler';

package/dist/server.js

@@ -0,0 +1,66 @@
+import y from "openai";
+function l(o) {
+  return o.map((e) => {
+    let t;
+    return typeof e.content == "string" ? t = e.content : Array.isArray(e.content) ? t = e.content.filter((n) => n.type === "text" && n.text).map((n) => n.text).join("") : t = "", {
+      role: e.role,
+      content: t
+    };
+  });
+}
+function w(o = {}) {
+  const {
+    apiKey: e = process.env.OPENAI_API_KEY,
+    baseURL: t,
+    model: n = "gpt-4o-mini"
+  } = o, i = new y({
+    apiKey: e,
+    baseURL: t
+  });
+  return async function(p) {
+    try {
+      const { messages: r } = await p.json(), d = await i.chat.completions.create({
+        model: n,
+        messages: l(r),
+        stream: !0
+      }), c = new TextEncoder(), u = new ReadableStream({
+        async start(a) {
+          try {
+            for await (const s of d) {
+              const f = JSON.stringify(s);
+              a.enqueue(c.encode(`data: ${f}
+
+`));
+            }
+            a.enqueue(c.encode(`data: [DONE]
+
+`)), a.close();
+          } catch (s) {
+            a.error(s);
+          }
+        }
+      });
+      return new Response(u, {
+        headers: {
+          "Content-Type": "text/event-stream",
+          "Cache-Control": "no-cache",
+          Connection: "keep-alive"
+        }
+      });
+    } catch (r) {
+      return new Response(
+        JSON.stringify({
+          error: String(r),
+          stack: r instanceof Error ? r.stack : void 0
+        }),
+        {
+          status: 500,
+          headers: { "Content-Type": "application/json" }
+        }
+      );
+    }
+  };
+}
+export {
+  w as createChatHandler
+};

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import { ChatModelAdapter } from '@assistant-ui/react';
-import { ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 export interface ElementsProviderProps {
     /**
      * The children to render.
@@ -19,11 +19,103 @@ export interface ElementsConfig {
     /**
      * Whether to render the chat window inside of an expandable modal or a standalone chat window.
      */
-    variant?: 'modal' | 'standalone';
+    variant?: 'widget' | 'standalone' | 'sidecar';
+    /**
+     * LLM model configuration.
+     *
+     * @example
+     * const config: ElementsConfig = {
+     *   model: {
+     *     availableModels: ['gpt-4o-mini', 'gpt-4o'],
+     *     showModelPicker: true,
+     *   },
+     * }
+     */
+    model?: ModelConfig;
+    /**
+     * The theme to use for the Elements library.
+     */
+    theme?: 'light' | 'dark' | 'system';
+    /**
+     * The configuration for the welcome message and initial suggestions.
+     */
+    welcome: WelcomeConfig;
     /**
      * The configuration for the composer.
      */
     composer?: ComposerConfig;
+    /**
+     * The configuration for the modal window.
+     * Does not apply if variant is 'standalone'.
+     */
+    modal?: ModalConfig;
+    /**
+     * The configuration for the tools.
+     */
+    tools?: ToolsConfig;
+}
+export interface ModelConfig {
+    /**
+     * The models available to the user.
+     * TODO: Update type
+     */
+    availableModels: string[];
+    /**
+     * Whether to show the model picker in the composer.
+     */
+    showModelPicker?: boolean;
+}
+export interface ToolsConfig {
+    /**
+     * `components` can be used to override the default components used by the
+     * Elements library for a given tool result.
+     *
+     * Please ensure that the tool name directly matches the tool name in your Gram toolset.
+     *
+     * @example
+     * const config: ElementsConfig = {
+     *   tools: {
+     *     components: {
+     *       "get_current_weather": WeatherComponent,
+     *     },
+     *   },
+     * }
+     */
+    components?: Record<string, ComponentType>;
+}
+export interface WelcomeConfig {
+    /**
+     * The welcome message to display when the thread is empty.
+     */
+    title: string;
+    /**
+     * The subtitle to display when the thread is empty.
+     */
+    subtitle: string;
+    /**
+     * The suggestions to display when the thread is empty.
+     */
+    suggestions: Suggestion[];
+}
+export interface Suggestion {
+    title: string;
+    label: string;
+    action: string;
+}
+export interface ModalConfig {
+    /**
+     * Whether to open the modal window by default.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The icon to use for the modal window.
+     * Receives the current state of the modal window.
+     */
+    icon?: (state: 'open' | 'closed' | undefined) => ReactNode;
+    /**
+     * A class name to apply to the modal window.
+     */
+    className?: string;
 }
 export interface ComposerConfig {
     /**

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.5",
+  "version": "1.0.7",
   "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 . && tsc -b --noEmit",
+    "lint": "eslint src",
     "analyze": "pnpm dlx vite-bundle-visualizer",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -55,7 +59,7 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@ai-sdk/openai": "2.0.0-beta.5",
+    "@ai-sdk/openai": "^2.0.0-beta.5",
     "@assistant-ui/react": "^0.11.37",
     "@assistant-ui/react-markdown": "^0.11.4",
     "@eslint/compat": "^2.0.0",
@@ -75,6 +79,7 @@
     "eslint-plugin-storybook": "^10.1.4",
     "eslint-plugin-unused-imports": "^4.3.0",
     "motion": "^12.23.14",
+    "openai": "^6.9.1",
     "prettier": "^3.7.4",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "remark-gfm": "^4.0.1",