This is page 3 of 3. Use http://codebase.md/alfonsograziano/node-code-sandbox-mcp?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .commitlintrc
├── .env.sample
├── .github
│ └── workflows
│ ├── docker.yaml
│ ├── publish-node-chartjs-canvas.yaml
│ ├── publish-on-npm.yaml
│ └── test.yaml
├── .gitignore
├── .husky
│ ├── commit-msg
│ └── pre-commit
├── .lintstagedrc
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc.js
├── .vscode
│ ├── extensions.json
│ ├── mcp.json
│ └── settings.json
├── assets
│ └── images
│ └── website_homepage.png
├── Dockerfile
├── eslint.config.js
├── evals
│ ├── auditClient.ts
│ ├── basicEvals.json
│ ├── evals.json
│ └── index.ts
├── examples
│ ├── docker.js
│ ├── ephemeral.js
│ ├── ephemeralWithDependencies.js
│ ├── ephemeralWithFiles.js
│ ├── playwright.js
│ └── simpleSandbox.js
├── images
│ └── node-chartjs-canvas
│ └── Dockerfile
├── NODE_GUIDELINES.md
├── package-lock.json
├── package.json
├── README.md
├── src
│ ├── config.ts
│ ├── containerUtils.ts
│ ├── dockerUtils.ts
│ ├── linterUtils.ts
│ ├── logger.ts
│ ├── runUtils.ts
│ ├── server.ts
│ ├── snapshotUtils.ts
│ ├── tools
│ │ ├── exec.ts
│ │ ├── getDependencyTypes.ts
│ │ ├── initialize.ts
│ │ ├── runJs.ts
│ │ ├── runJsEphemeral.ts
│ │ ├── searchNpmPackages.ts
│ │ └── stop.ts
│ ├── types.ts
│ └── utils.ts
├── test
│ ├── execInSandbox.test.ts
│ ├── getDependencyTypes.test.ts
│ ├── initialize.test.ts
│ ├── initializeSandbox.test.ts
│ ├── runJs-cache.test.ts
│ ├── runJs.test.ts
│ ├── runJsEphemeral.test.ts
│ ├── runJsListenOnPort.test.ts
│ ├── runMCPClient.test.ts
│ ├── sandbox.test.ts
│ ├── searchNpmPackages.test.ts
│ ├── snapshotUtils.test.ts
│ ├── stopSandbox.test.ts
│ ├── unit
│ │ └── linterUtils.test.ts
│ ├── utils.test.ts
│ └── utils.ts
├── tsconfig.build.json
├── tsconfig.json
├── USE_CASE.md
├── vitest.config.ts
└── website
├── .gitignore
├── index.html
├── LICENSE.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ └── images
│ ├── client.png
│ ├── graph-gpt_markdown.png
│ ├── graph-gpt_reference_section.png
│ ├── graph-gpt.png
│ ├── js_ai.jpeg
│ └── simple_agent.jpeg
├── src
│ ├── App.tsx
│ ├── Components
│ │ ├── Footer.tsx
│ │ ├── GettingStarted.tsx
│ │ └── Header.tsx
│ ├── index.css
│ ├── main.tsx
│ ├── pages
│ │ ├── GraphGPT.tsx
│ │ ├── Home.tsx
│ │ ├── NodeMCPServer.tsx
│ │ └── TinyAgent.tsx
│ ├── polyfills.ts
│ ├── useCases.ts
│ └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── vite-env.d.ts
└── vite.config.ts
```
# Files
--------------------------------------------------------------------------------
/website/src/pages/Home.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import {
4 | Brain,
5 | Code,
6 | Zap,
7 | Shield,
8 | Rocket,
9 | Terminal,
10 | ArrowRight,
11 | CheckCircle,
12 | Play,
13 | Github,
14 | GitBranch,
15 | } from 'lucide-react';
16 | import Footer from '../Components/Footer';
17 | import Header from '../Components/Header';
18 |
19 | const Home: React.FC = () => {
20 | const gridBg: React.CSSProperties = {
21 | backgroundImage:
22 | 'linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px)',
23 | backgroundSize: '20px 20px',
24 | };
25 |
26 | const features = [
27 | {
28 | icon: Brain,
29 | title: 'AI-First Development',
30 | description:
31 | 'Build intelligent applications with JavaScript-first AI tools and frameworks',
32 | },
33 | {
34 | icon: Zap,
35 | title: 'Rapid Prototyping',
36 | description:
37 | 'Quickly iterate and test AI features with our sandboxed development environment',
38 | },
39 | {
40 | icon: Shield,
41 | title: 'Enterprise Security',
42 | description:
43 | 'Production-ready security practices for AI applications in regulated industries',
44 | },
45 | {
46 | icon: Rocket,
47 | title: 'Scalable Architecture',
48 | description:
49 | 'Design patterns and best practices for AI systems that grow with your business',
50 | },
51 | ];
52 |
53 | const tools = [
54 | {
55 | title: 'Node.js Sandbox MCP',
56 | description:
57 | 'Run JavaScript in secure Docker containers with automatic dependency management',
58 | category: 'Development Tools',
59 | link: '/mcp',
60 | icon: Terminal,
61 | },
62 | {
63 | title: 'Tiny Agent Framework',
64 | description:
65 | 'Intelligent AI agent framework with RAG capabilities and memory persistence',
66 | category: 'AI Development',
67 | link: '/tiny-agent',
68 | icon: Brain,
69 | },
70 | {
71 | title: 'GraphGPT',
72 | description:
73 | 'Graph-based interface for LLM interactions that mirrors human thinking patterns',
74 | category: 'AI Interface',
75 | link: '/graph-gpt',
76 | icon: GitBranch,
77 | },
78 | ];
79 |
80 | return (
81 | <div style={gridBg} className="min-h-screen bg-gray-50 text-gray-900">
82 | {/* Header */}
83 | <Header />
84 |
85 | {/* Hero Section */}
86 | <header className="relative overflow-hidden">
87 | <div className="max-w-6xl mx-auto px-6 py-20 text-center">
88 | <h1 className="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">
89 | Build the Future of
90 | <span className="block text-green-600">AI-Powered Apps</span>
91 | <span className="block text-3xl md:text-4xl font-normal text-gray-600 mt-4">
92 | with JavaScript
93 | </span>
94 | </h1>
95 |
96 | <p className="text-lg md:text-xl text-gray-700 mb-8 max-w-3xl mx-auto">
97 | Your comprehensive toolkit for building intelligent applications.
98 | From AI integration to production deployment, we've got everything
99 | you need to succeed in the AI revolution.
100 | </p>
101 |
102 | <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
103 | <Link
104 | to="/mcp"
105 | className="inline-flex items-center gap-2 px-8 py-4 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-lg font-semibold"
106 | >
107 | <Play size={20} />
108 | Try Our Sandbox
109 | </Link>
110 | <a
111 | href="#tools"
112 | className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-gray-300 text-gray-800 rounded-lg hover:bg-gray-100 transition text-lg font-semibold"
113 | >
114 | <Code size={20} />
115 | Explore Tools
116 | </a>
117 | </div>
118 |
119 | {/* Hero Image */}
120 | <div className="relative max-w-4xl mx-auto">
121 | <div className="bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl p-2 shadow-2xl">
122 | <img
123 | src="/images/js_ai.jpeg"
124 | alt="JavaScript AI Development - Showcase of AI-powered development workflow with modern tools and frameworks"
125 | className="w-full h-auto rounded-xl shadow-lg"
126 | />
127 | </div>
128 | </div>
129 | </div>
130 | </header>
131 |
132 | {/* Why JavaScript for AI Section - Expanded */}
133 | <section className="py-20 bg-gradient-to-b from-gray-50 to-white">
134 | <div className="max-w-6xl mx-auto px-6">
135 | {/* Section Header */}
136 | <div className="text-center mb-16">
137 | <h2 className="text-3xl md:text-5xl font-bold mb-6">
138 | Why JavaScript for AI Development?
139 | </h2>
140 | <p className="text-lg md:text-xl text-gray-600 max-w-4xl mx-auto">
141 | While Python dominates model training, JavaScript excels at
142 | building the applications that users actually interact with.
143 | Here's why JS is the perfect choice for AI-powered apps.
144 | </p>
145 | </div>
146 |
147 | {/* Main Value Proposition */}
148 | <div className="bg-white rounded-2xl shadow-lg p-8 md:p-12 mb-16">
149 | <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
150 | <div>
151 | <h3 className="text-2xl md:text-3xl font-bold mb-6 text-gray-900">
152 | Build Where Users Are
153 | </h3>
154 | <p className="text-lg text-gray-700 mb-6">
155 | JavaScript runs everywhere your users are - browsers, mobile
156 | apps, servers, and edge computing. While Python trains the
157 | models, JavaScript delivers the experience.
158 | </p>
159 | <div className="space-y-4">
160 | <div className="flex items-center gap-3">
161 | <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
162 | <CheckCircle size={16} className="text-green-600" />
163 | </div>
164 | <span className="text-gray-700 font-medium">
165 | Frontend AI interfaces that users love
166 | </span>
167 | </div>
168 | <div className="flex items-center gap-3">
169 | <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
170 | <CheckCircle size={16} className="text-green-600" />
171 | </div>
172 | <span className="text-gray-700 font-medium">
173 | Real-time AI responses with WebSockets
174 | </span>
175 | </div>
176 | <div className="flex items-center gap-3">
177 | <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
178 | <CheckCircle size={16} className="text-green-600" />
179 | </div>
180 | <span className="text-gray-700 font-medium">
181 | Edge AI deployment for low latency
182 | </span>
183 | </div>
184 | </div>
185 | </div>
186 |
187 | {/* Code Example Image */}
188 | <div className="bg-gray-900 rounded-xl">
189 | <img
190 | src="/images/simple_agent.jpeg"
191 | alt="Simple AI Agent Code Example - JavaScript AI chat interface implementation in React"
192 | className="w-full h-auto rounded-lg shadow-lg"
193 | />
194 | </div>
195 | </div>
196 | </div>
197 |
198 | {/* AI Use Cases Grid */}
199 | <div className="mb-16">
200 | <h3 className="text-2xl md:text-3xl font-bold text-center mb-12">
201 | What You Can Build with JavaScript AI
202 | </h3>
203 | <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
204 | {/* RAG Applications */}
205 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
206 | <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
207 | <span className="text-2xl">🔍</span>
208 | </div>
209 | <h4 className="text-xl font-semibold mb-3">RAG Applications</h4>
210 | <p className="text-gray-600 mb-4">
211 | Build intelligent search and question-answering systems that
212 | combine your data with AI models.
213 | </p>
214 | <div className="text-sm text-gray-500">
215 | <strong>Tools:</strong> LangChain.js, Vector DBs, OpenAI API
216 | </div>
217 | </div>
218 |
219 | {/* AI Agents */}
220 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
221 | <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
222 | <span className="text-2xl">🤖</span>
223 | </div>
224 | <h4 className="text-xl font-semibold mb-3">AI Agents</h4>
225 | <p className="text-gray-600 mb-4">
226 | Create autonomous agents that can browse the web, use tools,
227 | and complete complex multi-step tasks.
228 | </p>
229 | <div className="text-sm text-gray-500">
230 | <strong>Tools:</strong> Playwright, Puppeteer, Function
231 | Calling
232 | </div>
233 | </div>
234 |
235 | {/* Real-time AI Chat */}
236 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
237 | <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
238 | <span className="text-2xl">💬</span>
239 | </div>
240 | <h4 className="text-xl font-semibold mb-3">
241 | Real-time AI Chat
242 | </h4>
243 | <p className="text-gray-600 mb-4">
244 | Build responsive chat interfaces with streaming responses,
245 | typing indicators, and rich media support.
246 | </p>
247 | <div className="text-sm text-gray-500">
248 | <strong>Tools:</strong> WebSockets, Server-Sent Events, React
249 | </div>
250 | </div>
251 |
252 | {/* AI-Powered APIs */}
253 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
254 | <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
255 | <span className="text-2xl">⚡</span>
256 | </div>
257 | <h4 className="text-xl font-semibold mb-3">AI-Powered APIs</h4>
258 | <p className="text-gray-600 mb-4">
259 | Create intelligent backends that process natural language,
260 | generate content, and make smart decisions.
261 | </p>
262 | <div className="text-sm text-gray-500">
263 | <strong>Tools:</strong> Express.js, Fastify, Serverless
264 | </div>
265 | </div>
266 |
267 | {/* Browser AI */}
268 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
269 | <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
270 | <span className="text-2xl">🌐</span>
271 | </div>
272 | <h4 className="text-xl font-semibold mb-3">Browser AI</h4>
273 | <p className="text-gray-600 mb-4">
274 | Run AI models directly in the browser with WebAssembly,
275 | enabling privacy-first AI applications.
276 | </p>
277 | <div className="text-sm text-gray-500">
278 | <strong>Tools:</strong> ONNX.js, TensorFlow.js, WebAssembly
279 | </div>
280 | </div>
281 |
282 | {/* AI Automation */}
283 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
284 | <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
285 | <span className="text-2xl">🔄</span>
286 | </div>
287 | <h4 className="text-xl font-semibold mb-3">AI Automation</h4>
288 | <p className="text-gray-600 mb-4">
289 | Automate workflows with AI-driven decision making, from
290 | content generation to data processing.
291 | </p>
292 | <div className="text-sm text-gray-500">
293 | <strong>Tools:</strong> Node.js, Cron Jobs, Webhooks
294 | </div>
295 | </div>
296 | </div>
297 | </div>
298 |
299 | {/* JavaScript AI Advantages */}
300 | <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
301 | <div className="bg-gradient-to-br from-green-50 to-blue-50 rounded-2xl p-8">
302 | <h3 className="text-2xl font-bold mb-6 text-gray-900">
303 | 🚀 JavaScript AI Superpowers
304 | </h3>
305 | <div className="space-y-6">
306 | <div>
307 | <h4 className="font-semibold text-lg mb-2 text-gray-800">
308 | Async by Nature
309 | </h4>
310 | <p className="text-gray-600">
311 | JavaScript's async/await makes it perfect for AI API calls,
312 | streaming responses, and handling multiple concurrent AI
313 | operations without blocking the UI.
314 | </p>
315 | </div>
316 | <div>
317 | <h4 className="font-semibold text-lg mb-2 text-gray-800">
318 | JSON Native
319 | </h4>
320 | <p className="text-gray-600">
321 | AI APIs speak JSON, and JavaScript speaks JSON natively. No
322 | parsing overhead, no type conversion - just seamless data
323 | flow.
324 | </p>
325 | </div>
326 | <div>
327 | <h4 className="font-semibold text-lg mb-2 text-gray-800">
328 | Real-time Ready
329 | </h4>
330 | <p className="text-gray-600">
331 | WebSockets, Server-Sent Events, and WebRTC are built into
332 | the ecosystem. Perfect for streaming AI responses and
333 | collaborative AI features.
334 | </p>
335 | </div>
336 | </div>
337 | </div>
338 |
339 | <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8">
340 | <h3 className="text-2xl font-bold mb-6 text-gray-900">
341 | 🌍 Ecosystem Advantages
342 | </h3>
343 | <div className="space-y-6">
344 | <div>
345 | <h4 className="font-semibold text-lg mb-2 text-gray-800">
346 | 2M+ NPM Packages
347 | </h4>
348 | <p className="text-gray-600">
349 | The largest package ecosystem in the world includes
350 | countless AI libraries, integrations, and tools ready to use
351 | in your projects.
352 | </p>
353 | </div>
354 | <div>
355 | <h4 className="font-semibold text-lg mb-2 text-gray-800">
356 | Universal Deployment
357 | </h4>
358 | <p className="text-gray-600">
359 | Deploy anywhere: Vercel, Netlify, AWS Lambda, Cloudflare
360 | Workers, or traditional servers. One codebase, infinite
361 | possibilities.
362 | </p>
363 | </div>
364 | <div>
365 | <h4 className="font-semibold text-lg mb-2 text-gray-800">
366 | Developer Velocity
367 | </h4>
368 | <p className="text-gray-600">
369 | Hot reload, excellent debugging, TypeScript support, and the
370 | best developer tools mean you can iterate on AI features
371 | incredibly fast.
372 | </p>
373 | </div>
374 | </div>
375 | </div>
376 | </div>
377 |
378 | {/* AI Integration Examples */}
379 | <div className="bg-white rounded-2xl shadow-lg p-8 md:p-12 mb-16">
380 | <h3 className="text-2xl md:text-3xl font-bold text-center mb-12">
381 | Popular AI Integrations in JavaScript
382 | </h3>
383 | <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
384 | <div className="text-center p-4">
385 | <div className="w-16 h-16 bg-gradient-to-r from-green-400 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
386 | <span className="text-white text-2xl font-bold">🤖</span>
387 | </div>
388 | <h4 className="font-semibold mb-2">OpenAI</h4>
389 | <p className="text-sm text-gray-600">GPT-4, DALL-E, Whisper</p>
390 | <a
391 | href="https://github.com/openai/openai-node"
392 | target="_blank"
393 | rel="noopener noreferrer"
394 | className="text-xs text-green-600 hover:underline"
395 | >
396 | openai-node
397 | </a>
398 | </div>
399 | <div className="text-center p-4">
400 | <div className="w-16 h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
401 | <span className="text-white text-2xl font-bold">🧠</span>
402 | </div>
403 | <h4 className="font-semibold mb-2">Anthropic</h4>
404 | <p className="text-sm text-gray-600">
405 | Claude, Constitutional AI
406 | </p>
407 | <a
408 | href="https://github.com/anthropics-ai/anthropic-sdk-typescript"
409 | target="_blank"
410 | rel="noopener noreferrer"
411 | className="text-xs text-blue-600 hover:underline"
412 | >
413 | anthropic-sdk
414 | </a>
415 | </div>
416 | <div className="text-center p-4">
417 | <div className="w-16 h-16 bg-gradient-to-r from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
418 | <span className="text-white text-2xl font-bold">🔗</span>
419 | </div>
420 | <h4 className="font-semibold mb-2">LangChain</h4>
421 | <p className="text-sm text-gray-600">Agents, Chains, Tools</p>
422 | <a
423 | href="https://github.com/langchain-ai/langchainjs"
424 | target="_blank"
425 | rel="noopener noreferrer"
426 | className="text-xs text-purple-600 hover:underline"
427 | >
428 | langchainjs
429 | </a>
430 | </div>
431 | <div className="text-center p-4">
432 | <div className="w-16 h-16 bg-gradient-to-r from-orange-400 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
433 | <span className="text-white text-2xl font-bold">📊</span>
434 | </div>
435 | <h4 className="font-semibold mb-2">Vector DBs</h4>
436 | <p className="text-sm text-gray-600">
437 | Pinecone, Weaviate, Chroma
438 | </p>
439 | <a
440 | href="https://github.com/pinecone-io/pinecone-js"
441 | target="_blank"
442 | rel="noopener noreferrer"
443 | className="text-xs text-orange-600 hover:underline"
444 | >
445 | pinecone-js
446 | </a>
447 | </div>
448 | </div>
449 | </div>
450 |
451 | {/* JavaScript AI Frameworks & Tools */}
452 | <div className="bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-8 md:p-12 mb-16">
453 | <h3 className="text-2xl md:text-3xl font-bold text-center mb-12">
454 | JavaScript AI Frameworks & Tools
455 | </h3>
456 | <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
457 | {/* Vercel AI SDK */}
458 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
459 | <div className="flex items-center gap-3 mb-4">
460 | <div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center">
461 | <span className="text-white text-xl font-bold">▲</span>
462 | </div>
463 | <div>
464 | <h4 className="text-lg font-semibold">Vercel AI SDK</h4>
465 | <p className="text-sm text-gray-500">
466 | Streaming AI responses
467 | </p>
468 | </div>
469 | </div>
470 | <p className="text-gray-600 mb-4">
471 | Build AI-powered streaming text and chat UIs with React,
472 | Svelte, Vue, and more.
473 | </p>
474 | <div className="flex items-center justify-between">
475 | <span className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full">
476 | React/Next.js
477 | </span>
478 | <a
479 | href="https://github.com/vercel/ai"
480 | target="_blank"
481 | rel="noopener noreferrer"
482 | className="text-sm text-blue-600 hover:underline"
483 | >
484 | GitHub →
485 | </a>
486 | </div>
487 | </div>
488 |
489 | {/* TensorFlow.js */}
490 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
491 | <div className="flex items-center gap-3 mb-4">
492 | <div className="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center">
493 | <span className="text-white text-xl font-bold">TF</span>
494 | </div>
495 | <div>
496 | <h4 className="text-lg font-semibold">TensorFlow.js</h4>
497 | <p className="text-sm text-gray-500">
498 | Browser ML framework
499 | </p>
500 | </div>
501 | </div>
502 | <p className="text-gray-600 mb-4">
503 | Run machine learning models directly in the browser with
504 | JavaScript.
505 | </p>
506 | <div className="flex items-center justify-between">
507 | <span className="text-xs bg-orange-100 text-orange-700 px-2 py-1 rounded-full">
508 | ML/AI
509 | </span>
510 | <a
511 | href="https://github.com/tensorflow/tfjs"
512 | target="_blank"
513 | rel="noopener noreferrer"
514 | className="text-sm text-blue-600 hover:underline"
515 | >
516 | GitHub →
517 | </a>
518 | </div>
519 | </div>
520 |
521 | {/* Hugging Face */}
522 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
523 | <div className="flex items-center gap-3 mb-4">
524 | <div className="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center">
525 | <span className="text-white text-xl font-bold">🤗</span>
526 | </div>
527 | <div>
528 | <h4 className="text-lg font-semibold">Hugging Face</h4>
529 | <p className="text-sm text-gray-500">Transformers.js</p>
530 | </div>
531 | </div>
532 | <p className="text-gray-600 mb-4">
533 | Run transformer models in the browser with zero dependencies.
534 | </p>
535 | <div className="flex items-center justify-between">
536 | <span className="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">
537 | NLP
538 | </span>
539 | <a
540 | href="https://github.com/xenova/transformers.js"
541 | target="_blank"
542 | rel="noopener noreferrer"
543 | className="text-sm text-blue-600 hover:underline"
544 | >
545 | GitHub →
546 | </a>
547 | </div>
548 | </div>
549 |
550 | {/* AutoGen */}
551 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
552 | <div className="flex items-center gap-3 mb-4">
553 | <div className="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center">
554 | <span className="text-white text-xl font-bold">🤖</span>
555 | </div>
556 | <div>
557 | <h4 className="text-lg font-semibold">Mastra</h4>
558 | <p className="text-sm text-gray-500">
559 | TypeScript Agent Framework
560 | </p>
561 | </div>
562 | </div>
563 | <p className="text-gray-600 mb-4">
564 | The TypeScript Agent Framework from the Gatsby team. Build AI
565 | agents with modern JavaScript.
566 | </p>
567 | <div className="flex items-center justify-between">
568 | <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full">
569 | Agents
570 | </span>
571 | <a
572 | href="https://mastra.ai/"
573 | target="_blank"
574 | rel="noopener noreferrer"
575 | className="text-sm text-blue-600 hover:underline"
576 | >
577 | Website →
578 | </a>
579 | </div>
580 | </div>
581 |
582 | {/* ChromaDB */}
583 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
584 | <div className="flex items-center gap-3 mb-4">
585 | <div className="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center">
586 | <span className="text-white text-xl font-bold">📊</span>
587 | </div>
588 | <div>
589 | <h4 className="text-lg font-semibold">ChromaDB</h4>
590 | <p className="text-sm text-gray-500">Vector database</p>
591 | </div>
592 | </div>
593 | <p className="text-gray-600 mb-4">
594 | Embedding database for AI applications with JavaScript client.
595 | </p>
596 | <div className="flex items-center justify-between">
597 | <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
598 | Vector DB
599 | </span>
600 | <a
601 | href="https://docs.trychroma.com/docs/overview/introduction#javascripttypescript"
602 | target="_blank"
603 | rel="noopener noreferrer"
604 | className="text-sm text-blue-600 hover:underline"
605 | >
606 | Docs →
607 | </a>
608 | </div>
609 | </div>
610 |
611 | {/* BMAD-METHOD */}
612 | <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
613 | <div className="flex items-center gap-3 mb-4">
614 | <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
615 | <span className="text-white text-xl font-bold">🚀</span>
616 | </div>
617 | <div>
618 | <h4 className="text-lg font-semibold">BMAD-METHOD™</h4>
619 | <p className="text-sm text-gray-500">
620 | Universal AI Agent Framework
621 | </p>
622 | </div>
623 | </div>
624 | <p className="text-gray-600 mb-4">
625 | Universal AI Agent Framework with Agentic Planning and
626 | Context-Engineered Development for any domain.
627 | </p>
628 | <div className="flex items-center justify-between">
629 | <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">
630 | AI Agents
631 | </span>
632 | <a
633 | href="https://github.com/bmad-code-org/bmad-method"
634 | target="_blank"
635 | rel="noopener noreferrer"
636 | className="text-sm text-blue-600 hover:underline"
637 | >
638 | GitHub →
639 | </a>
640 | </div>
641 | </div>
642 | </div>
643 | </div>
644 |
645 | {/* Comparison Section */}
646 | <div className="bg-gradient-to-r from-gray-900 to-gray-800 rounded-2xl p-8 md:p-12 text-white mb-16">
647 | <h3 className="text-2xl md:text-3xl font-bold text-center mb-8">
648 | Python vs JavaScript in AI Development
649 | </h3>
650 | <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
651 | <div className="bg-white/10 rounded-xl p-6">
652 | <h4 className="text-xl font-semibold mb-4 text-yellow-400">
653 | 🐍 Python's Domain
654 | </h4>
655 | <ul className="space-y-3 text-gray-300">
656 | <li>• Model training & fine-tuning</li>
657 | <li>• Data science & research</li>
658 | <li>• Deep learning frameworks</li>
659 | <li>• Scientific computing</li>
660 | <li>• ML experimentation</li>
661 | </ul>
662 | </div>
663 | <div className="bg-white/10 rounded-xl p-6">
664 | <h4 className="text-xl font-semibold mb-4 text-green-400">
665 | ⚡ JavaScript's Domain
666 | </h4>
667 | <ul className="space-y-3 text-gray-300">
668 | <li>• User-facing AI applications</li>
669 | <li>• Real-time AI interactions</li>
670 | <li>• AI-powered web & mobile apps</li>
671 | <li>• Agent orchestration</li>
672 | <li>• Production AI deployment</li>
673 | </ul>
674 | </div>
675 | </div>
676 | <div className="text-center mt-8">
677 | <p className="text-lg text-gray-300">
678 | <strong className="text-white">The Perfect Partnership:</strong>{' '}
679 | Train in Python, Deploy in JavaScript
680 | </p>
681 | </div>
682 | </div>
683 |
684 | {/* Call to Action */}
685 | <div className="text-center bg-gradient-to-r from-green-600 to-blue-600 rounded-2xl p-8 md:p-12 text-white">
686 | <h3 className="text-2xl md:text-3xl font-bold mb-4">
687 | Ready to Build AI Apps with JavaScript?
688 | </h3>
689 | <p className="text-lg mb-8 opacity-90 max-w-2xl mx-auto">
690 | Join thousands of developers who are already building the future
691 | of AI applications with the language they know and love.
692 | </p>
693 | <Link
694 | to="/mcp"
695 | className="inline-flex items-center gap-2 px-8 py-4 bg-white text-green-600 rounded-lg hover:bg-gray-100 transition text-lg font-semibold"
696 | >
697 | <Terminal size={20} />
698 | Start Building Now
699 | </Link>
700 | </div>
701 | </div>
702 | </section>
703 |
704 | {/* Features Section */}
705 | <section className="py-20">
706 | <div className="max-w-6xl mx-auto px-6">
707 | <div className="text-center mb-16">
708 | <h2 className="text-3xl md:text-4xl font-bold mb-4">
709 | Everything You Need to Build AI Apps
710 | </h2>
711 | <p className="text-lg text-gray-600 max-w-2xl mx-auto">
712 | From development tools to production best practices, we've curated
713 | the essential resources for modern AI development with JavaScript.
714 | </p>
715 | </div>
716 |
717 | <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
718 | {features.map((feature, index) => (
719 | <div
720 | key={index}
721 | className="bg-white bg-opacity-80 p-6 rounded-xl shadow-md hover:shadow-lg transition"
722 | >
723 | <feature.icon
724 | width={32}
725 | height={32}
726 | className="text-green-600 mb-4"
727 | />
728 | <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
729 | <p className="text-gray-700">{feature.description}</p>
730 | </div>
731 | ))}
732 | </div>
733 | </div>
734 | </section>
735 |
736 | {/* Tools Section */}
737 | <section id="tools" className="py-20 bg-white">
738 | <div className="max-w-6xl mx-auto px-6">
739 | <div className="text-center mb-16">
740 | <h2 className="text-3xl md:text-4xl font-bold mb-4">
741 | Essential AI Development Tools
742 | </h2>
743 | <p className="text-lg text-gray-600 max-w-2xl mx-auto">
744 | Discover the tools that will accelerate your AI development
745 | journey
746 | </p>
747 | </div>
748 |
749 | <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
750 | {tools.map((tool, index) => (
751 | <div
752 | key={index}
753 | className="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-green-300 transition"
754 | >
755 | <div className="flex items-start gap-4">
756 | <div className="p-3 bg-green-100 rounded-lg">
757 | <tool.icon size={24} className="text-green-600" />
758 | </div>
759 | <div className="flex-1">
760 | <div className="flex items-center gap-2 mb-2">
761 | <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
762 | {tool.category}
763 | </span>
764 | </div>
765 | <h3 className="text-xl font-semibold mb-2">{tool.title}</h3>
766 | <p className="text-gray-600 mb-4">{tool.description}</p>
767 | {tool.link ? (
768 | <Link
769 | to={tool.link}
770 | className="inline-flex items-center gap-2 text-green-600 hover:text-green-700 font-medium"
771 | >
772 | Learn More <ArrowRight size={16} />
773 | </Link>
774 | ) : (
775 | <span className="inline-flex items-center gap-2 text-gray-400 font-medium">
776 | Coming Soon <ArrowRight size={16} />
777 | </span>
778 | )}
779 | </div>
780 | </div>
781 | </div>
782 | ))}
783 | </div>
784 | </div>
785 | </section>
786 |
787 | {/* Community Section */}
788 | <section className="py-20 bg-white">
789 | <div className="max-w-6xl mx-auto px-6 text-center">
790 | <h2 className="text-3xl md:text-4xl font-bold mb-6">
791 | Join the AI JavaScript Community
792 | </h2>
793 | <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
794 | Connect with developers, share knowledge, and stay updated with the
795 | latest AI development trends and tools.
796 | </p>
797 |
798 | <div className="flex justify-center">
799 | <a
800 | href="https://github.com/alfonsograziano/node-code-sandbox-mcp"
801 | target="_blank"
802 | rel="noopener noreferrer"
803 | className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition"
804 | >
805 | <Github size={20} />
806 | GitHub Community
807 | </a>
808 | </div>
809 | </div>
810 | </section>
811 |
812 | {/* CTA Section */}
813 | <section className="py-20 bg-gradient-to-r from-green-600 to-blue-600 text-white">
814 | <div className="max-w-4xl mx-auto px-6 text-center">
815 | <h2 className="text-3xl md:text-4xl font-bold mb-6">
816 | Ready to Build the Future?
817 | </h2>
818 | <p className="text-xl mb-8 opacity-90">
819 | Start your AI development journey with our comprehensive toolkit and
820 | community support.
821 | </p>
822 | <div className="flex justify-center">
823 | <Link
824 | to="/mcp"
825 | className="inline-flex items-center gap-2 px-8 py-4 bg-white text-green-600 rounded-lg hover:bg-gray-100 transition text-lg font-semibold"
826 | >
827 | <Terminal size={20} />
828 | Try Our Sandbox
829 | </Link>
830 | </div>
831 | </div>
832 | </section>
833 |
834 | {/* Footer */}
835 | <Footer />
836 | </div>
837 | );
838 | };
839 |
840 | export default Home;
841 |
```