ai-react-animations 1.1.3 → 1.2.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/dist/mcp/server.js +1062 -0
- package/mcp/registry.ts +857 -0
- package/mcp/server.ts +257 -0
- package/mcp-config.json +8 -0
- package/package.json +26 -5
package/mcp/server.ts
ADDED
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
/**
|
|
3
|
+
* AI React Animations - MCP Server
|
|
4
|
+
*
|
|
5
|
+
* Model Context Protocol server that allows AI assistants to:
|
|
6
|
+
* - List available animation components
|
|
7
|
+
* - Get component details and documentation
|
|
8
|
+
* - Add components to user projects
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
|
|
12
|
+
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
|
|
13
|
+
import {
|
|
14
|
+
CallToolRequestSchema,
|
|
15
|
+
ListToolsRequestSchema,
|
|
16
|
+
} from '@modelcontextprotocol/sdk/types.js';
|
|
17
|
+
import { components, getComponent, listComponents, getCategories, ComponentInfo } from './registry.js';
|
|
18
|
+
import * as fs from 'fs';
|
|
19
|
+
import * as path from 'path';
|
|
20
|
+
|
|
21
|
+
const server = new Server(
|
|
22
|
+
{
|
|
23
|
+
name: 'ai-react-animations',
|
|
24
|
+
version: '1.0.0',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
capabilities: {
|
|
28
|
+
tools: {},
|
|
29
|
+
},
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
// List available tools
|
|
34
|
+
server.setRequestHandler(ListToolsRequestSchema, async () => {
|
|
35
|
+
return {
|
|
36
|
+
tools: [
|
|
37
|
+
{
|
|
38
|
+
name: 'list_components',
|
|
39
|
+
description: 'List all available AI animation components. Optionally filter by category (loading, processing, creative, auth).',
|
|
40
|
+
inputSchema: {
|
|
41
|
+
type: 'object',
|
|
42
|
+
properties: {
|
|
43
|
+
category: {
|
|
44
|
+
type: 'string',
|
|
45
|
+
description: 'Filter by category: loading, processing, creative, auth, or all',
|
|
46
|
+
enum: ['all', 'loading', 'processing', 'creative', 'auth'],
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: 'get_component',
|
|
53
|
+
description: 'Get detailed information about a specific component including props, usage example, and source code.',
|
|
54
|
+
inputSchema: {
|
|
55
|
+
type: 'object',
|
|
56
|
+
properties: {
|
|
57
|
+
name: {
|
|
58
|
+
type: 'string',
|
|
59
|
+
description: 'Component name or ID (e.g., "LoadingDots", "loading-dots", "PulseCircle")',
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
required: ['name'],
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
name: 'add_component',
|
|
67
|
+
description: 'Add an animation component to the user\'s project. Creates the component file in the specified directory.',
|
|
68
|
+
inputSchema: {
|
|
69
|
+
type: 'object',
|
|
70
|
+
properties: {
|
|
71
|
+
name: {
|
|
72
|
+
type: 'string',
|
|
73
|
+
description: 'Component name or ID to add',
|
|
74
|
+
},
|
|
75
|
+
directory: {
|
|
76
|
+
type: 'string',
|
|
77
|
+
description: 'Directory path where to create the component (default: ./components)',
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
required: ['name'],
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
name: 'get_install_command',
|
|
85
|
+
description: 'Get the npm install command for required dependencies of a component.',
|
|
86
|
+
inputSchema: {
|
|
87
|
+
type: 'object',
|
|
88
|
+
properties: {
|
|
89
|
+
name: {
|
|
90
|
+
type: 'string',
|
|
91
|
+
description: 'Component name or ID',
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
required: ['name'],
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
],
|
|
98
|
+
};
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
// Handle tool calls
|
|
102
|
+
server.setRequestHandler(CallToolRequestSchema, async (request) => {
|
|
103
|
+
const { name, arguments: args } = request.params;
|
|
104
|
+
|
|
105
|
+
switch (name) {
|
|
106
|
+
case 'list_components': {
|
|
107
|
+
const category = (args as { category?: string })?.category || 'all';
|
|
108
|
+
const filtered = listComponents(category);
|
|
109
|
+
|
|
110
|
+
const summary = filtered.map(c => ({
|
|
111
|
+
name: c.name,
|
|
112
|
+
id: c.id,
|
|
113
|
+
category: c.category,
|
|
114
|
+
description: c.description,
|
|
115
|
+
}));
|
|
116
|
+
|
|
117
|
+
return {
|
|
118
|
+
content: [
|
|
119
|
+
{
|
|
120
|
+
type: 'text',
|
|
121
|
+
text: JSON.stringify({
|
|
122
|
+
total: filtered.length,
|
|
123
|
+
categories: getCategories(),
|
|
124
|
+
components: summary,
|
|
125
|
+
}, null, 2),
|
|
126
|
+
},
|
|
127
|
+
],
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
case 'get_component': {
|
|
132
|
+
const componentName = (args as { name: string }).name;
|
|
133
|
+
const component = getComponent(componentName);
|
|
134
|
+
|
|
135
|
+
if (!component) {
|
|
136
|
+
return {
|
|
137
|
+
content: [
|
|
138
|
+
{
|
|
139
|
+
type: 'text',
|
|
140
|
+
text: `Component "${componentName}" not found. Use list_components to see available components.`,
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
isError: true,
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
return {
|
|
148
|
+
content: [
|
|
149
|
+
{
|
|
150
|
+
type: 'text',
|
|
151
|
+
text: JSON.stringify({
|
|
152
|
+
name: component.name,
|
|
153
|
+
id: component.id,
|
|
154
|
+
description: component.description,
|
|
155
|
+
category: component.category,
|
|
156
|
+
dependencies: component.dependencies,
|
|
157
|
+
props: component.props,
|
|
158
|
+
usage: component.usage,
|
|
159
|
+
source: component.source,
|
|
160
|
+
}, null, 2),
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
case 'add_component': {
|
|
167
|
+
const componentName = (args as { name: string; directory?: string }).name;
|
|
168
|
+
const directory = (args as { directory?: string }).directory || './components';
|
|
169
|
+
const component = getComponent(componentName);
|
|
170
|
+
|
|
171
|
+
if (!component) {
|
|
172
|
+
return {
|
|
173
|
+
content: [
|
|
174
|
+
{
|
|
175
|
+
type: 'text',
|
|
176
|
+
text: `Component "${componentName}" not found. Use list_components to see available components.`,
|
|
177
|
+
},
|
|
178
|
+
],
|
|
179
|
+
isError: true,
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const filePath = path.join(directory, `${component.name}.tsx`);
|
|
184
|
+
|
|
185
|
+
// Return the component details for the AI to create the file
|
|
186
|
+
return {
|
|
187
|
+
content: [
|
|
188
|
+
{
|
|
189
|
+
type: 'text',
|
|
190
|
+
text: JSON.stringify({
|
|
191
|
+
success: true,
|
|
192
|
+
component: component.name,
|
|
193
|
+
filePath: filePath,
|
|
194
|
+
source: component.source,
|
|
195
|
+
dependencies: component.dependencies,
|
|
196
|
+
installCommand: `npm install ${component.dependencies.join(' ')}`,
|
|
197
|
+
usage: component.usage,
|
|
198
|
+
instructions: `
|
|
199
|
+
1. Create the file at: ${filePath}
|
|
200
|
+
2. Install dependencies: npm install ${component.dependencies.join(' ')}
|
|
201
|
+
3. Import and use the component as shown in the usage example.
|
|
202
|
+
|
|
203
|
+
Note: Make sure you have 'use client' directive if using Next.js App Router.
|
|
204
|
+
`.trim(),
|
|
205
|
+
}, null, 2),
|
|
206
|
+
},
|
|
207
|
+
],
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
case 'get_install_command': {
|
|
212
|
+
const componentName = (args as { name: string }).name;
|
|
213
|
+
const component = getComponent(componentName);
|
|
214
|
+
|
|
215
|
+
if (!component) {
|
|
216
|
+
return {
|
|
217
|
+
content: [
|
|
218
|
+
{
|
|
219
|
+
type: 'text',
|
|
220
|
+
text: `Component "${componentName}" not found.`,
|
|
221
|
+
},
|
|
222
|
+
],
|
|
223
|
+
isError: true,
|
|
224
|
+
};
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
return {
|
|
228
|
+
content: [
|
|
229
|
+
{
|
|
230
|
+
type: 'text',
|
|
231
|
+
text: `npm install ${component.dependencies.join(' ')}`,
|
|
232
|
+
},
|
|
233
|
+
],
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
default:
|
|
238
|
+
return {
|
|
239
|
+
content: [
|
|
240
|
+
{
|
|
241
|
+
type: 'text',
|
|
242
|
+
text: `Unknown tool: ${name}`,
|
|
243
|
+
},
|
|
244
|
+
],
|
|
245
|
+
isError: true,
|
|
246
|
+
};
|
|
247
|
+
}
|
|
248
|
+
});
|
|
249
|
+
|
|
250
|
+
// Start the server
|
|
251
|
+
async function main() {
|
|
252
|
+
const transport = new StdioServerTransport();
|
|
253
|
+
await server.connect(transport);
|
|
254
|
+
console.error('AI React Animations MCP Server running on stdio');
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
main().catch(console.error);
|
package/mcp-config.json
ADDED
package/package.json
CHANGED
|
@@ -1,20 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ai-react-animations",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "Beautiful AI loading animation components for React/Next.js
|
|
3
|
+
"version": "1.2.0",
|
|
4
|
+
"description": "Beautiful AI loading animation components for React/Next.js with MCP server support.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
"bin": {
|
|
9
|
+
"ai-react-animations-mcp": "./dist/mcp/server.js"
|
|
10
|
+
},
|
|
8
11
|
"exports": {
|
|
9
12
|
".": {
|
|
10
13
|
"types": "./dist/index.d.ts",
|
|
11
14
|
"import": "./dist/index.mjs",
|
|
12
15
|
"require": "./dist/index.js"
|
|
13
16
|
},
|
|
14
|
-
"./styles.css": "./dist/styles.css"
|
|
17
|
+
"./styles.css": "./dist/styles.css",
|
|
18
|
+
"./mcp": "./dist/mcp/server.js"
|
|
15
19
|
},
|
|
16
20
|
"files": [
|
|
17
21
|
"dist",
|
|
22
|
+
"mcp",
|
|
23
|
+
"mcp-config.json",
|
|
18
24
|
"README.md",
|
|
19
25
|
"LICENSE"
|
|
20
26
|
],
|
|
@@ -23,7 +29,10 @@
|
|
|
23
29
|
"build": "next build",
|
|
24
30
|
"start": "next start",
|
|
25
31
|
"build:lib": "node scripts/build.js",
|
|
26
|
-
"
|
|
32
|
+
"build:mcp": "npx esbuild mcp/server.ts --bundle --platform=node --format=esm --outfile=dist/mcp/server.js --external:@modelcontextprotocol/sdk --banner:js='#!/usr/bin/env node'",
|
|
33
|
+
"mcp": "node --experimental-specifier-resolution=node dist/mcp/server.js",
|
|
34
|
+
"mcp:dev": "npx tsx mcp/server.ts",
|
|
35
|
+
"prepublishOnly": "npm run build:lib && npm run build:mcp"
|
|
27
36
|
},
|
|
28
37
|
"keywords": [
|
|
29
38
|
"react",
|
|
@@ -42,8 +51,19 @@
|
|
|
42
51
|
"url": "https://github.com/johnbekele/ai-react-animations"
|
|
43
52
|
},
|
|
44
53
|
"dependencies": {
|
|
54
|
+
"@modelcontextprotocol/sdk": "^1.25.1",
|
|
55
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
56
|
+
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
57
|
+
"@radix-ui/react-separator": "^1.1.8",
|
|
58
|
+
"@radix-ui/react-slot": "^1.2.4",
|
|
59
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
60
|
+
"class-variance-authority": "^0.7.1",
|
|
61
|
+
"clsx": "^2.1.1",
|
|
45
62
|
"framer-motion": "^11.0.0",
|
|
46
|
-
"lucide-react": "^0.344.0"
|
|
63
|
+
"lucide-react": "^0.344.0",
|
|
64
|
+
"tailwind-merge": "^3.4.0",
|
|
65
|
+
"tailwindcss-animate": "^1.0.7",
|
|
66
|
+
"tsx": "^4.21.0"
|
|
47
67
|
},
|
|
48
68
|
"peerDependencies": {
|
|
49
69
|
"react": ">=17.0.0",
|
|
@@ -61,6 +81,7 @@
|
|
|
61
81
|
"postcss": "^8.4.33",
|
|
62
82
|
"react": "^18.3.1",
|
|
63
83
|
"react-dom": "^18.3.1",
|
|
84
|
+
"shadcn": "^3.6.2",
|
|
64
85
|
"tailwindcss": "^3.4.1",
|
|
65
86
|
"typescript": "^5.3.3"
|
|
66
87
|
}
|