From 01fdf03e02ad8422d80a7d4ba31626b84572c66f Mon Sep 17 00:00:00 2001 From: Trishix Date: Wed, 25 Mar 2026 02:50:58 +0530 Subject: [PATCH 01/15] feat: Add system-design-analyzer kit --- .../system-design-analyzer/.env.example | 10 + .../agentic/system-design-analyzer/.gitignore | 38 ++ kits/agentic/system-design-analyzer/README.md | 200 +++++++++ .../actions/orchestrate.ts | 70 ++++ .../system-design-analyzer/app/globals.css | 59 +++ .../system-design-analyzer/app/layout.tsx | 33 ++ .../system-design-analyzer/app/page.tsx | 273 ++++++++++++ .../system-design-analyzer/components.json | 11 + .../components/ui/button.tsx | 37 ++ .../components/ui/card.tsx | 51 +++ .../components/ui/input.tsx | 20 + .../components/ui/textarea.tsx | 19 + .../system-design-analyzer/config.json | 22 + .../system-design-analyzer/flows/README.md | 63 +++ .../system-design-analyzer/flows/config.json | 387 ++++++++++++++++++ .../system-design-analyzer/flows/inputs.json | 146 +++++++ .../system-design-analyzer/flows/meta.json | 9 + .../system-design-analyzer/next.config.mjs | 11 + .../system-design-analyzer/package.json | 36 ++ .../system-design-analyzer/postcss.config.mjs | 9 + .../system-design-analyzer/tailwind.config.ts | 58 +++ .../system-design-analyzer/tsconfig.json | 29 ++ 22 files changed, 1591 insertions(+) create mode 100644 kits/agentic/system-design-analyzer/.env.example create mode 100644 kits/agentic/system-design-analyzer/.gitignore create mode 100644 kits/agentic/system-design-analyzer/README.md create mode 100644 kits/agentic/system-design-analyzer/actions/orchestrate.ts create mode 100644 kits/agentic/system-design-analyzer/app/globals.css create mode 100644 kits/agentic/system-design-analyzer/app/layout.tsx create mode 100644 kits/agentic/system-design-analyzer/app/page.tsx create mode 100644 kits/agentic/system-design-analyzer/components.json create mode 100644 kits/agentic/system-design-analyzer/components/ui/button.tsx create mode 100644 kits/agentic/system-design-analyzer/components/ui/card.tsx create mode 100644 kits/agentic/system-design-analyzer/components/ui/input.tsx create mode 100644 kits/agentic/system-design-analyzer/components/ui/textarea.tsx create mode 100644 kits/agentic/system-design-analyzer/config.json create mode 100644 kits/agentic/system-design-analyzer/flows/README.md create mode 100644 kits/agentic/system-design-analyzer/flows/config.json create mode 100644 kits/agentic/system-design-analyzer/flows/inputs.json create mode 100644 kits/agentic/system-design-analyzer/flows/meta.json create mode 100644 kits/agentic/system-design-analyzer/next.config.mjs create mode 100644 kits/agentic/system-design-analyzer/package.json create mode 100644 kits/agentic/system-design-analyzer/postcss.config.mjs create mode 100644 kits/agentic/system-design-analyzer/tailwind.config.ts create mode 100644 kits/agentic/system-design-analyzer/tsconfig.json diff --git a/kits/agentic/system-design-analyzer/.env.example b/kits/agentic/system-design-analyzer/.env.example new file mode 100644 index 00000000..53fcfdd4 --- /dev/null +++ b/kits/agentic/system-design-analyzer/.env.example @@ -0,0 +1,10 @@ +# Lamatic Configuration +LAMATIC_API_URL = "https://trishitsorganization963-chekyoursaas335.lamatic.dev/graphql" +LAMATIC_PROJECT_ID = "92d387df-59be-4563-acec-02288b4d8d95" +LAMATIC_API_KEY = "YOUR_LAMATIC_API_KEY_HERE" + +# Flow Configuration +SYSTEM_DESIGN_ANALYZER_FLOW_ID = "2392ad97-51e9-4954-8d38-bc668e644818" + +# Application Settings +NEXT_PUBLIC_APP_NAME = "System Design Analyzer" diff --git a/kits/agentic/system-design-analyzer/.gitignore b/kits/agentic/system-design-analyzer/.gitignore new file mode 100644 index 00000000..46fa85ed --- /dev/null +++ b/kits/agentic/system-design-analyzer/.gitignore @@ -0,0 +1,38 @@ +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env +.env.local +.env.*.local + +# IDE +.vscode/ +.idea/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db diff --git a/kits/agentic/system-design-analyzer/README.md b/kits/agentic/system-design-analyzer/README.md new file mode 100644 index 00000000..98a41caf --- /dev/null +++ b/kits/agentic/system-design-analyzer/README.md @@ -0,0 +1,200 @@ +# System Design Analyzer + +A modern, AI-powered web application that analyzes system design specifications and provides comprehensive insights using Lamatic flows. + +## Features + +- 🤖 **AI-Powered Analysis** - Get intelligent insights on your system architecture +- ⚡ **Real-time Processing** - Get instant feedback on your design specifications +- 🎨 **Modern UI** - Clean, responsive interface built with Next.js and Tailwind CSS +- 📋 **Example Designs** - Quick-start examples to explore the tool +- 📋 **Copy Results** - Easily copy analysis results to clipboard + +## Tech Stack + +- **Frontend**: Next.js 15, React 18, TypeScript +- **Styling**: Tailwind CSS v4, custom components +- **API**: Lamatic GraphQL API +- **Form Handling**: React Hook Form + Zod validation +- **Icons**: Lucide React + +## Prerequisites + +- Node.js 18+ and npm +- A Lamatic API Key +- Lamatic Project ID and API URL + +## Installation + +### 1. Clone or Navigate to the Kit + +```bash +cd kits/agentic/system-design-analyzer +``` + +### 2. Install Dependencies + +```bash +npm install +``` + +### 3. Set Up Environment Variables + +Copy the example environment file and fill in your Lamatic credentials: + +```bash +cp .env.example .env.local +``` + +Edit `.env.local` with your Lamatic credentials: + +```env +LAMATIC_API_URL = "https://trishitsorganization963-chekyoursaas335.lamatic.dev/graphql" +LAMATIC_PROJECT_ID = "92d387df-59be-4563-acec-02288b4d8d95" +LAMATIC_API_KEY = "YOUR_LAMATIC_API_KEY_HERE" +SYSTEM_DESIGN_ANALYZER_FLOW_ID = "2392ad97-51e9-4954-8d38-bc668e644818" +NEXT_PUBLIC_APP_NAME = "System Design Analyzer" +``` + +### 4. Run Development Server + +```bash +npm run dev +``` + +Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. + +## Configuration + +### Environment Variables + +| Variable | Description | Required | +|----------|-------------|----------| +| `LAMATIC_API_URL` | Lamatic GraphQL endpoint | ✅ | +| `LAMATIC_PROJECT_ID` | Your Lamatic Project ID | ✅ | +| `LAMATIC_API_KEY` | Your Lamatic API Key | ✅ | +| `SYSTEM_DESIGN_ANALYZER_FLOW_ID` | Flow ID for system design analysis | ✅ | +| `NEXT_PUBLIC_APP_NAME` | Application name | ✅ | + +## Flows + +### System Design Analyzer Flow + +- **Flow ID**: `2392ad97-51e9-4954-8d38-bc668e644818` +- **Type**: Synchronous +- **Input**: `system_design` (string) - The system design specification +- **Output**: `status` (string), `result` (string) - Analysis status and results + +## Usage + +1. **Enter Design Specification**: Paste or type your system design requirements in the text area +2. **Click Analyze**: Submit your design for AI analysis +3. **View Results**: Get comprehensive insights and recommendations +4. **Copy Results**: Use the copy button to save results to clipboard + +### Example Designs + +The app comes with example designs that you can quickly load: + +- Design a scalable distributed cache system like Redis +- Build a real-time notification system for a mobile app +- Create a URL shortener service like bit.ly +- Design a video streaming platform like YouTube + +## Building for Production + +```bash +npm run build +npm run start +``` + +## API Integration + +The application uses the Lamatic GraphQL API to process system design specifications. The integration is handled through server actions in `actions/orchestrate.ts`. + +### GraphQL Query + +```graphql +query ExecuteWorkflow( + $workflowId: String! + $system_design: String +) { + executeWorkflow( + workflowId: $workflowId + payload: { + system_design: $system_design + } + ) { + status + result + } +} +``` + +## Project Structure + +``` +system-design-analyzer/ +├── app/ +│ ├── layout.tsx # Root layout +│ ├── page.tsx # Main page +│ └── globals.css # Global styles +├── actions/ +│ └── orchestrate.ts # Server action for API calls +├── components/ +│ └── ui/ # Reusable UI components +│ ├── button.tsx +│ ├── card.tsx +│ ├── input.tsx +│ └── textarea.tsx +├── flows/ +│ └── system-design-analyzer/ # Flow configuration +│ ├── config.json +│ ├── inputs.json +│ ├── meta.json +│ └── README.md +├── public/ # Static assets +├── styles/ # Additional styles +├── .env.example # Example environment variables +├── .env.local # Local environment variables +├── package.json +├── tsconfig.json +├── tailwind.config.ts +├── next.config.mjs +└── README.md +``` + +## Design Theme + +The application follows Lamatic's modern design system: + +- **Colors**: Red-Orange gradient primary (matching Lamatic branding) +- **Typography**: Poppins font family +- **Components**: Clean, minimalist design with focus on usability +- **Responsiveness**: Full mobile and tablet support + +## Error Handling + +The application handles various error scenarios: + +- Missing API credentials +- Network errors +- API errors from Lamatic +- Validation errors on form submission + +All errors are displayed to the user with clear, actionable messages. + +## License + +This project is part of the Lamatic AgentKit and follows the same license. + +## Support + +For issues or questions: +1. Check the [Lamatic documentation](https://lamatic.ai/docs) +2. Review the flow configuration in `flows/system-design-analyzer/` +3. Ensure all environment variables are correctly set + +## Contributing + +Contributions are welcome! Please follow the AgentKit contribution guidelines in the main repository. diff --git a/kits/agentic/system-design-analyzer/actions/orchestrate.ts b/kits/agentic/system-design-analyzer/actions/orchestrate.ts new file mode 100644 index 00000000..68a6b6df --- /dev/null +++ b/kits/agentic/system-design-analyzer/actions/orchestrate.ts @@ -0,0 +1,70 @@ +'use server'; + +import axios from 'axios'; + +const LAMATIC_API_URL = process.env.LAMATIC_API_URL; +const LAMATIC_PROJECT_ID = process.env.LAMATIC_PROJECT_ID; +const LAMATIC_API_KEY = process.env.LAMATIC_API_KEY; +const FLOW_ID = process.env.SYSTEM_DESIGN_ANALYZER_FLOW_ID; + +const query = ` + query ExecuteWorkflow( + $workflowId: String! + $system_design: String + ) { + executeWorkflow( + workflowId: $workflowId + payload: { + system_design: $system_design + } + ) { + status + result + } + } +`; + +export async function analyzeSystemDesign(systemDesign: string) { + if (!LAMATIC_API_KEY) { + throw new Error('LAMATIC_API_KEY is not set'); + } + + if (!FLOW_ID) { + throw new Error('SYSTEM_DESIGN_ANALYZER_FLOW_ID is not set'); + } + + try { + const variables = { + workflowId: FLOW_ID, + system_design: systemDesign, + }; + + const options = { + method: 'POST', + url: LAMATIC_API_URL, + headers: { + Authorization: `Bearer ${LAMATIC_API_KEY}`, + 'Content-Type': 'application/json', + 'x-project-id': LAMATIC_PROJECT_ID, + }, + data: { query, variables }, + }; + + const response = await axios(options); + + if (response.data?.errors) { + throw new Error(response.data.errors[0]?.message || 'GraphQL error'); + } + + const result = response.data?.data?.executeWorkflow; + + return { + success: true, + status: result?.status, + result: result?.result, + }; + } catch (error) { + console.error('Error calling Lamatic API:', error); + throw error; + } +} diff --git a/kits/agentic/system-design-analyzer/app/globals.css b/kits/agentic/system-design-analyzer/app/globals.css new file mode 100644 index 00000000..d7e19c5e --- /dev/null +++ b/kits/agentic/system-design-analyzer/app/globals.css @@ -0,0 +1,59 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.6%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.6%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.6%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 84% 60%; + --accent-foreground: 0 0% 100%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 100%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --primary: 0 84% 60%; + --primary-foreground: 0 0% 100%; + --secondary: 217 32.6% 17.5%; + --secondary-foreground: 0 0% 100%; + --ring: 0 84% 60%; + --radius: 0.5rem; + } + + .dark { + --background: 0 0% 3.6%; + --foreground: 0 0% 98.2%; + --card: 0 0% 7.8%; + --card-foreground: 0 0% 98.2%; + --popover: 0 0% 7.8%; + --popover-foreground: 0 0% 98.2%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 84% 60%; + --accent-foreground: 0 0% 9% 100%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 9.2%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --primary: 0 84% 60%; + --primary-foreground: 0 0% 9.2%; + --secondary: 217 32.6% 17.5%; + --secondary-foreground: 0 0% 100%; + --ring: 0 84% 60%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/kits/agentic/system-design-analyzer/app/layout.tsx b/kits/agentic/system-design-analyzer/app/layout.tsx new file mode 100644 index 00000000..a4670b1a --- /dev/null +++ b/kits/agentic/system-design-analyzer/app/layout.tsx @@ -0,0 +1,33 @@ +import type { Metadata } from 'next'; +import { Poppins } from 'next/font/google'; +import './globals.css'; + +const poppins = Poppins({ + subsets: ['latin'], + weight: ['400', '500', '600', '700'], + variable: '--font-poppins', +}); + +export const metadata: Metadata = { + title: 'System Design Analyzer | Lamatic', + description: 'AI-powered system design analysis and insights powered by Lamatic', + keywords: ['system design', 'architecture', 'AI analysis', 'lamatic'], +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + + + + {children} + + + ); +} diff --git a/kits/agentic/system-design-analyzer/app/page.tsx b/kits/agentic/system-design-analyzer/app/page.tsx new file mode 100644 index 00000000..ab56b0ae --- /dev/null +++ b/kits/agentic/system-design-analyzer/app/page.tsx @@ -0,0 +1,273 @@ +'use client'; + +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { z } from 'zod'; +import { useState } from 'react'; +import { analyzeSystemDesign } from '@/actions/orchestrate'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Textarea } from '@/components/ui/textarea'; +import { Loader2, Zap, ChevronRight, Copy, Check } from 'lucide-react'; + +const formSchema = z.object({ + systemDesign: z.string().min(10, { + message: 'Please enter a system design specification (at least 10 characters).', + }), +}); + +type FormValues = z.infer; + +export default function Home() { + const [isLoading, setIsLoading] = useState(false); + const [result, setResult] = useState(null); + const [status, setStatus] = useState(null); + const [copied, setCopied] = useState(false); + const [error, setError] = useState(null); + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { + systemDesign: '', + }, + }); + + const onSubmit = async (values: FormValues) => { + setIsLoading(true); + setError(null); + setResult(null); + setStatus(null); + + try { + const response = await analyzeSystemDesign(values.systemDesign); + setStatus(response.status); + setResult(response.result); + } catch (err) { + const errorMessage = err instanceof Error ? err.message : 'Failed to analyze system design'; + setError(errorMessage); + console.error('Error:', err); + } finally { + setIsLoading(false); + } + }; + + const copyToClipboard = () => { + if (result) { + navigator.clipboard.writeText(result); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + }; + + const exampleDesigns = [ + 'Design a scalable distributed cache system like Redis', + 'Build a real-time notification system for a mobile app', + 'Create a URL shortener service like bit.ly', + 'Design a video streaming platform like YouTube', + ]; + + const handleExampleClick = (example: string) => { + form.setValue('systemDesign', example); + }; + + return ( +
+ {/* Header */} +
+
+
+
+ +
+

+ System Design Analyzer +

+
+
+ Powered by Lamatic +
+
+
+ + {/* Main Content */} +
+
+ {/* Hero Section */} +
+

+ Analyze Your System Designs +

+

+ Get AI-powered insights and recommendations for your system architecture. Enter your design + specification and receive comprehensive analysis. +

+
+ +
+ {/* Form Section */} +
+ + + Enter System Design + + Describe your system architecture, components, and requirements + + + +
+
+ +