@gram-ai/elements 1.0.0
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 +32 -0
- package/package.json +88 -0
package/README.md
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# `@gram-ai/elements`
|
|
2
|
+
|
|
3
|
+
Elements is a library built for the agentic age. We provide customizable and elegant UI primitives for building chat-like experiences for MCP Servers. Works best with Gram MCP, but also supports connecting any MCP Server.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
First ensure that you have installed the required peer dependencies:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add react react-dom
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
`@gram-ai/elements` requires that you wrap your React tree with our context provider and reference our CSS:
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import { GramElementsProvider, Chat } from "@gram-ai/elements";
|
|
19
|
+
import "@gram-ai/elements/elements.css";
|
|
20
|
+
|
|
21
|
+
export const App = () => {
|
|
22
|
+
return (
|
|
23
|
+
<GramElementsProvider>
|
|
24
|
+
<Chat />
|
|
25
|
+
</GramElementsProvider>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Contributing
|
|
31
|
+
|
|
32
|
+
We welcome pull requests to Elements. Please read the contributing guide.
|
package/package.json
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@gram-ai/elements",
|
|
3
|
+
"description": "Gram Elements is a library of UI primitives for building chat-like experiences for MCP Servers.",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"version": "1.0.0",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
11
|
+
},
|
|
12
|
+
"./elements.css": "./dist/elements.css"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "https://github.com/speakeasy-api/gram-elements.git"
|
|
20
|
+
},
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"scripts": {
|
|
25
|
+
"type-check": "tsc --noEmit",
|
|
26
|
+
"build": "vite build",
|
|
27
|
+
"lint": "eslint . && tsc -b --noEmit",
|
|
28
|
+
"analyze": "pnpm dlx vite-bundle-visualizer",
|
|
29
|
+
"storybook": "storybook dev -p 6006",
|
|
30
|
+
"build-storybook": "storybook build",
|
|
31
|
+
"chromatic": "npx chromatic --project-token=chpt_25f10196300abe0"
|
|
32
|
+
},
|
|
33
|
+
"keywords": [],
|
|
34
|
+
"author": "Adam Bull <adam@speakeasy.com>",
|
|
35
|
+
"license": "ISC",
|
|
36
|
+
"packageManager": "pnpm@10.18.2",
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@ai-sdk/openai": "2.0.0-beta.5",
|
|
39
|
+
"@eslint/compat": "^2.0.0",
|
|
40
|
+
"@eslint/js": "^9.39.1",
|
|
41
|
+
"@storybook/addon-docs": "^10.0.8",
|
|
42
|
+
"@storybook/addon-onboarding": "^10.0.8",
|
|
43
|
+
"@storybook/react-vite": "^10.0.8",
|
|
44
|
+
"@types/express": "^5.0.5",
|
|
45
|
+
"@types/node": "^24.10.1",
|
|
46
|
+
"@vitejs/plugin-react": "^5.0.3",
|
|
47
|
+
"ai": "5.0.90",
|
|
48
|
+
"chromatic": "^13.3.3",
|
|
49
|
+
"eslint": "^9.39.1",
|
|
50
|
+
"eslint-config-prettier": "^10.1.8",
|
|
51
|
+
"eslint-js": "github:eslint/js",
|
|
52
|
+
"eslint-plugin-prettier": "^5.5.4",
|
|
53
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
54
|
+
"eslint-plugin-storybook": "^10.1.4",
|
|
55
|
+
"eslint-plugin-unused-imports": "^4.3.0",
|
|
56
|
+
"prettier": "^3.7.4",
|
|
57
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
58
|
+
"semantic-release": "^24.2.0",
|
|
59
|
+
"storybook": "^10.0.8",
|
|
60
|
+
"tw-animate-css": "^1.3.8",
|
|
61
|
+
"typescript-eslint": "^8.48.1",
|
|
62
|
+
"vite": "^7.1.6"
|
|
63
|
+
},
|
|
64
|
+
"peerDependencies": {
|
|
65
|
+
"@types/react": "^19.1.13",
|
|
66
|
+
"@types/react-dom": "^19.1.13",
|
|
67
|
+
"react": "^19.1.13",
|
|
68
|
+
"react-dom": "^19.1.13"
|
|
69
|
+
},
|
|
70
|
+
"dependencies": {
|
|
71
|
+
"@assistant-ui/react": "^0.11.37",
|
|
72
|
+
"@assistant-ui/react-ai-sdk": "^1.1.9",
|
|
73
|
+
"@assistant-ui/react-markdown": "^0.11.4",
|
|
74
|
+
"@radix-ui/react-avatar": "^1.1.10",
|
|
75
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
76
|
+
"@radix-ui/react-slot": "^1.2.3",
|
|
77
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
78
|
+
"@tailwindcss/vite": "^4.1.13",
|
|
79
|
+
"class-variance-authority": "^0.7.1",
|
|
80
|
+
"clsx": "^2.1.1",
|
|
81
|
+
"lucide-react": "^0.544.0",
|
|
82
|
+
"motion": "^12.23.14",
|
|
83
|
+
"remark-gfm": "^4.0.1",
|
|
84
|
+
"tailwind-merge": "^3.3.1",
|
|
85
|
+
"tailwindcss": "^4.1.13",
|
|
86
|
+
"zustand": "^5.0.8"
|
|
87
|
+
}
|
|
88
|
+
}
|