Feat/system design analyzer

kits/agentic/system-design-analyzer/.env.example

@@ -0,0 +1,9 @@
+# Required Lamatic API Credentials
+# Get these from your Lamatic project dashboard
+LAMATIC_PROJECT_ENDPOINT=https://your-organization.lamatic.dev/graphql
+LAMATIC_FLOW_ID=your-flow-id-here
+LAMATIC_PROJECT_ID=your-project-id-here
+LAMATIC_PROJECT_API_KEY=lt-your-api-key-here
+
+# Application Branding (public)
+NEXT_PUBLIC_APP_NAME="System Design Analyzer"

kits/agentic/system-design-analyzer/.gitignore

@@ -0,0 +1,39 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# 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

kits/agentic/system-design-analyzer/README.md

@@ -0,0 +1,226 @@
+# 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 SDK (`lamatic` npm package)
+- **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_PROJECT_ENDPOINT="https://your-organization.lamatic.dev/graphql"
+LAMATIC_FLOW_ID="your-flow-id-here"
+LAMATIC_PROJECT_ID="your-project-id-here"
+LAMATIC_PROJECT_API_KEY="lt-your-api-key-here"
+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_PROJECT_ENDPOINT` | Lamatic GraphQL endpoint | ✅ |
+| `LAMATIC_FLOW_ID` | Flow ID for system design analysis | ✅ |
+| `LAMATIC_PROJECT_ID` | Your Lamatic Project ID | ✅ |
+| `LAMATIC_PROJECT_API_KEY` | Your Lamatic API Key | ✅ |
+| `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 SDK** (`lamatic` npm package) to execute flows. The integration is handled through server actions in `actions/orchestrate.ts`.
+
+### Server Action
+
+The `analyzeSystemDesign()` server action in `actions/orchestrate.ts` handles the API communication:
+
+```typescript
+import { lamaticClient } from '@/lib/lamatic-client';
+
+const { LAMATIC_FLOW_ID } = process.env;
+
+export async function analyzeSystemDesign(
+  systemDesign: string
+): Promise<ServerActionResponse<SystemDesignAnalysis>> {
+  const response = await lamaticClient.executeFlow(LAMATIC_FLOW_ID, {
+    system_design: systemDesign,
+  });
+
+  return response;
+}
+```
+
+## 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**: White (#ffffff) background, Black (#000000) text, Red (#dc2626) accent
+- **Typography**: Inter font family with variable weights
+- **Components**: Clean, minimalist design with focus on usability
+- **Responsiveness**: Fully responsive mobile and tablet support
+
+## Error Handling
+
+The application handles various error scenarios:
+
+- Input validation errors (minimum 10 characters)
+- Network errors during API calls
+- Server errors from Lamatic flows
+- Missing API credentials in environment variables
+
+All errors are displayed to the user with clear, actionable messages in the error section of the form.
+
+## License
+
+This project is part of the Lamatic AgentKit and follows the same license.
+
+## Deployment
+
+### Vercel (Recommended)
+
+1. Push your code to GitHub
+2. Import the repository in Vercel
+3. Set the root directory to `kits/agentic/system-design-analyzer`
+4. Add environment variables in Vercel Dashboard:
+   - `LAMATIC_PROJECT_ENDPOINT`
+   - `LAMATIC_FLOW_ID`
+   - `LAMATIC_PROJECT_ID`
+   - `LAMATIC_PROJECT_API_KEY`
+5. Deploy
+
+## Troubleshooting
+
+**Issue**: "LAMATIC_FLOW_ID is not set"
+- **Solution**: Check `.env.local` has all required variables
+
+**Issue**: Flow returns object instead of string
+- **Solution**: Ensure the flow response is properly serialized in `actions/orchestrate.ts`
+
+**Issue**: Port 3000 already in use
+- **Solution**: Use `PORT=3001 npm run dev` to run on a different port
+
+## Support
+
+For issues or questions:
+1. Check the [Lamatic documentation](https://lamatic.ai/docs)
+2. Review the [AgentKit README](https://github.com/Lamatic/AgentKit)
+3. Open an issue in the [GitHub repository](https://github.com/Lamatic/AgentKit/issues)
+
+## Contributing
+
+Contributions are welcome! Please follow the [AgentKit contribution guidelines](https://github.com/Lamatic/AgentKit/blob/main/CONTRIBUTING.md).

kits/agentic/system-design-analyzer/actions/orchestrate.ts

@@ -0,0 +1,87 @@
+'use server';
+
+import { lamaticClient } from '@/lib/lamatic-client';
+import type { ServerActionResponse, SystemDesignAnalysis } from '@/lib/types';
+
+const { LAMATIC_FLOW_ID } = process.env;
+
+export async function analyzeSystemDesign(
+  systemDesign: string
+): Promise<ServerActionResponse<SystemDesignAnalysis>> {
+  if (!LAMATIC_FLOW_ID) {
+    throw new Error('[Server] LAMATIC_FLOW_ID is not set in environment variables');
+  }
+
+  if (!systemDesign || systemDesign.trim().length === 0) {
+    throw new Error('[Server] System design input cannot be empty');
+  }
+
+  try {
+    console.log('[v0] Executing flow:', {
+      flowId: LAMATIC_FLOW_ID,
+      inputLength: systemDesign.length,
+      timestamp: new Date().toISOString(),
+    });
+
+    const response = await lamaticClient.executeFlow(LAMATIC_FLOW_ID, {
+      system_design: systemDesign,
+    });
+
+    console.log('[v0] Flow response received:', { status: response?.status });
+
+    if (!response) {
+      throw new Error('[Flow] No response received from flow execution');
+    }
+
+    // Check if the flow returned an error status
+    if (response.status === 'error' || response.status === 'failed') {
+      const errorDetails = response.error || response.message || 'Unknown error from flow';
+      console.error('[v0] Flow error:', errorDetails);
+      throw new Error(`[Flow] Execution failed: ${errorDetails}`);
+    }
+
+    // Validate and parse result
+    let analysisResult: SystemDesignAnalysis = {};
+
+    if (typeof response.result === 'string') {
+      try {
+        analysisResult = JSON.parse(response.result);
+      } catch {
+        // If not JSON, treat as summary text
+        analysisResult = { summary: { nextSteps: [response.result] } };
+      }
+    } else if (typeof response.result === 'object' && response.result !== null) {
+      analysisResult = response.result as SystemDesignAnalysis;
+    }
+
+    console.log('[v0] Analysis completed successfully');
+
+    return {
+      success: true,
+      status: response.status || 'completed',
+      result: analysisResult,
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    console.error('[v0] Analysis failed:', errorMessage);
+
+    // Handle specific flow configuration issues
+    let userFriendlyError = errorMessage;
+
+    if (errorMessage.includes('tool call validation failed') || 
+        errorMessage.includes('attempted to call tool') ||
+        errorMessage.includes('Instructor Agent')) {
+      userFriendlyError = 
+        'The flow is configured with Instructor Agents that require specific tools to be available. ' +
+        'Please update the flow in Lamatic Studio: Change node types from InstructorLLMNode to LLMNode, ' +
+        'or disable structured output mode to allow direct text generation.';
+      console.error('[v0] Flow configuration issue detected: Tool-calling nodes without available tools');
+    }
+
+    return {
+      success: false,
+      status: 'error',
+      error: userFriendlyError,
+    };
+  }
+}

kits/agentic/system-design-analyzer/app/globals.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #ff5630;
+  --color-primary-dark: #e63d1a;
+  --color-secondary: #1a1a2e;
+}