@gram-ai/elements 1.2.4 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -3
- package/package.json +32 -3
package/README.md
CHANGED
|
@@ -4,10 +4,19 @@ Elements is a library built for the agentic age. We provide customizable and ele
|
|
|
4
4
|
|
|
5
5
|
## Setup
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### Package Exports
|
|
8
|
+
|
|
9
|
+
This package provides two separate exports with different dependencies:
|
|
10
|
+
|
|
11
|
+
- **`@gram-ai/elements`** - React UI components (requires React and related dependencies)
|
|
12
|
+
- **`@gram-ai/elements/server`** - Server-side handlers (does NOT require React)
|
|
13
|
+
|
|
14
|
+
### Frontend Setup
|
|
15
|
+
|
|
16
|
+
If you're using the React UI components, install the required peer dependencies:
|
|
8
17
|
|
|
9
18
|
```bash
|
|
10
|
-
pnpm add react react-dom @assistant-ui/react @assistant-ui/react-markdown motion remark-gfm zustand
|
|
19
|
+
pnpm add react react-dom @assistant-ui/react @assistant-ui/react-markdown motion remark-gfm zustand
|
|
11
20
|
```
|
|
12
21
|
|
|
13
22
|
Then install Elements:
|
|
@@ -16,6 +25,16 @@ Then install Elements:
|
|
|
16
25
|
pnpm add @gram-ai/elements
|
|
17
26
|
```
|
|
18
27
|
|
|
28
|
+
### Backend Setup
|
|
29
|
+
|
|
30
|
+
If you're only using the server handlers (`@gram-ai/elements/server`), you can install without React:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
pnpm add @gram-ai/elements
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
> **Note:** Your package manager may show peer dependency warnings for React packages. These warnings are safe to ignore when using only `/server` exports, as React dependencies are marked as optional.
|
|
37
|
+
|
|
19
38
|
## Setting up your backend
|
|
20
39
|
|
|
21
40
|
At the moment, we provide a set of handlers via the `@gram-ai/elements/server` package that you can use to automatically setup your backend for usage with Gram Elements. The example below demonstrates the setup for Express:
|
|
@@ -88,7 +107,7 @@ The `ElementsConfig` object accepts the following configuration options:
|
|
|
88
107
|
| `projectSlug` | `string` | Yes | ✅ Implemented | - | The project slug to use for the Elements library |
|
|
89
108
|
| `mcp` | `string` | Yes | ✅ Implemented | - | The Gram Server URL. Can be retrieved from `https://app.getgram.ai/{team}/{project}/mcp/{mcp_slug}` |
|
|
90
109
|
| `chatEndpoint` | `string` | No | ✅ Implemented | `'/chat/completions'` | The path of your backend's chat endpoint |
|
|
91
|
-
| `environment` | `Record<string, unknown>` | No |
|
|
110
|
+
| `environment` | `Record<string, unknown>` | No | ✅ Implemented | `undefined` | Custom environment variable overrides for the MCP server |
|
|
92
111
|
| `variant` | `'widget' \| 'standalone'` | No | ✅ Implemented | `undefined` | Whether to render the chat window inside an expandable modal or as a standalone chat window |
|
|
93
112
|
| `theme` | `'light' \| 'dark' \| 'system'` | No | ⚠️ Not yet implemented | `undefined` | The theme to use for the Elements library |
|
|
94
113
|
| `welcome` | [`WelcomeConfig`](#welcome-configuration-welcomeconfig) | Yes | ✅ Implemented | - | Configuration for the welcome message and initial suggestions |
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@gram-ai/elements",
|
|
3
3
|
"description": "Gram Elements is a library of UI primitives for building chat-like experiences for MCP Servers.",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"version": "1.2.
|
|
5
|
+
"version": "1.2.5",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"exports": {
|
|
8
8
|
".": {
|
|
@@ -48,7 +48,37 @@
|
|
|
48
48
|
"remark-gfm": "^4.0.0",
|
|
49
49
|
"zustand": "^5.0.0"
|
|
50
50
|
},
|
|
51
|
+
"peerDependenciesMeta": {
|
|
52
|
+
"@assistant-ui/react": {
|
|
53
|
+
"optional": true
|
|
54
|
+
},
|
|
55
|
+
"@assistant-ui/react-markdown": {
|
|
56
|
+
"optional": true
|
|
57
|
+
},
|
|
58
|
+
"@types/react": {
|
|
59
|
+
"optional": true
|
|
60
|
+
},
|
|
61
|
+
"@types/react-dom": {
|
|
62
|
+
"optional": true
|
|
63
|
+
},
|
|
64
|
+
"motion": {
|
|
65
|
+
"optional": true
|
|
66
|
+
},
|
|
67
|
+
"react": {
|
|
68
|
+
"optional": true
|
|
69
|
+
},
|
|
70
|
+
"react-dom": {
|
|
71
|
+
"optional": true
|
|
72
|
+
},
|
|
73
|
+
"remark-gfm": {
|
|
74
|
+
"optional": true
|
|
75
|
+
},
|
|
76
|
+
"zustand": {
|
|
77
|
+
"optional": true
|
|
78
|
+
}
|
|
79
|
+
},
|
|
51
80
|
"dependencies": {
|
|
81
|
+
"@ai-sdk/mcp": "^0.0.11",
|
|
52
82
|
"@openrouter/ai-sdk-provider": "^1.4.1",
|
|
53
83
|
"@radix-ui/react-avatar": "^1.1.10",
|
|
54
84
|
"@radix-ui/react-collapsible": "^1.1.12",
|
|
@@ -56,6 +86,7 @@
|
|
|
56
86
|
"@radix-ui/react-popover": "^1.1.15",
|
|
57
87
|
"@radix-ui/react-slot": "^1.2.3",
|
|
58
88
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
89
|
+
"ai": "5.0.90",
|
|
59
90
|
"assistant-stream": "^0.2.42",
|
|
60
91
|
"class-variance-authority": "^0.7.1",
|
|
61
92
|
"clsx": "^2.1.1",
|
|
@@ -65,7 +96,6 @@
|
|
|
65
96
|
"zod": "^4.1.13"
|
|
66
97
|
},
|
|
67
98
|
"devDependencies": {
|
|
68
|
-
"@ai-sdk/mcp": "^0.0.11",
|
|
69
99
|
"@ai-sdk/openai": "^2.0.0-beta.5",
|
|
70
100
|
"@assistant-ui/react": "^0.11.37",
|
|
71
101
|
"@assistant-ui/react-ai-sdk": "^1.1.16",
|
|
@@ -79,7 +109,6 @@
|
|
|
79
109
|
"@types/lodash.merge": "^4.6.9",
|
|
80
110
|
"@types/node": "^24.10.1",
|
|
81
111
|
"@vitejs/plugin-react": "^5.0.3",
|
|
82
|
-
"ai": "5.0.90",
|
|
83
112
|
"chromatic": "^13.3.3",
|
|
84
113
|
"eslint": "^9.39.1",
|
|
85
114
|
"eslint-config-prettier": "^10.1.8",
|