You are an expert AI application development consultant and a senior full-stack engineer. Your task is to generate a comprehensive, single-page React SPA (Single Page Application) for a platform that empowers developers to easily build and deploy AI-powered applications, addressing the 'AI Effect' paradox where increased developer productivity doesn't immediately translate to a visible increase in software output. The platform aims to bridge this gap by providing a low-code/visual interface for integrating and orchestrating AI models, offering pre-built templates, and enabling one-click deployment.
**PROJECT OVERVIEW:**
Our application, tentatively named 'AI App Weaver', aims to solve the problem highlighted by discussions on platforms like Hacker News: the apparent disconnect between AI-driven developer productivity gains and the visible creation of new software. Many developers report being 2x or even 100x more productive with AI tools, yet this doesn't directly manifest as a proportional increase in new applications or packages. AI App Weaver provides a low-code/no-code environment where developers can visually design, integrate, and deploy AI-powered applications without deep diving into complex infrastructure or boilerplate code. Our core value proposition is to make the creation and deployment of AI-enhanced applications as straightforward as using AI for coding assistance, thereby realizing the true potential of the 'AI Effect' and enabling a surplus of novel AI applications. This platform will act as a catalyst for innovation, allowing developers to rapidly prototype and launch AI solutions.
**TECH STACK:**
- **Frontend Framework:** React.js (using Create React App or Vite for scaffolding)
- **Styling:** Tailwind CSS for rapid UI development and consistent design.
- **State Management:** Zustand for efficient and simple global state management. Consider Redux Toolkit if complexity increases significantly.
- **Routing:** React Router DOM for handling navigation within the single-page application.
- **UI Components:** Headless UI for accessible and unstyled components that integrate seamlessly with Tailwind CSS.
- **API Client:** Axios for making HTTP requests to potential backend services (for saving projects, user authentication, deployment status, etc.). For MVP, local storage will be prioritized.
- **Icons:** Heroicons or Phosphor Icons for a clean and modern icon set.
- **Form Handling:** React Hook Form for efficient and performant form management, especially for configuring AI modules and application settings.
- **Animation Library:** Framer Motion for smooth and engaging UI animations and transitions.
**CORE FEATURES (MVP):**
1. **Visual AI Workflow Designer:**
* **User Flow:** Users access a drag-and-drop interface. They can select AI modules (e.g., 'Text Generation', 'Image Recognition', 'Sentiment Analysis', 'Code Completion') from a palette. Modules are represented as nodes. Users connect these nodes with 'edges' (representing data flow) to define an AI workflow. Each node has configurable parameters (e.g., for text generation: prompt, temperature, max tokens; for image recognition: model type, confidence threshold). The canvas should support panning and zooming.
* **Configuration:** Clicking on a node opens a sidebar or modal allowing detailed configuration of the AI module's parameters using forms managed by React Hook Form. Input/output types for each module must be clearly defined.
2. **AI Module Library:**
* **User Flow:** A browsable/searchable list of available AI modules. Each module entry displays its name, a brief description, input/output types, and potentially example use cases. Initially, these will be mock modules representing common AI tasks.
* **Integration:** Developers select modules from this library to drag onto the workflow canvas.
3. **Template Showcase:**
* **User Flow:** Users can browse a gallery of pre-built application templates (e.g., 'Blog Post Generator', 'Customer Feedback Analyzer', 'Code Helper Bot'). Each template is a pre-configured workflow designed for a specific purpose.
* **Customization:** Selecting a template loads the workflow designer with the template's structure, allowing users to customize it further.
4. **One-Click Deployment (Simulated for MVP):**
* **User Flow:** After designing or customizing a workflow, users click a 'Deploy' button. For MVP, this action will trigger a simulated deployment process. A modal appears showing the deployment status (e.g., 'Building container...', 'Deploying to staging...', 'Deployment Successful/Failed'). In a full version, this would trigger actual cloud deployments.
* **Output:** A shareable link or a status indicator for the deployed application.
5. **Project Management:**
* **User Flow:** A dashboard where users can see their saved projects (workflows). Options to create new projects, save current work, load existing projects, and delete projects.
* **Persistence:** Primarily using Local Storage for MVP. Each project is stored as a JSON object.
**UI/UX DESIGN:**
- **Layout:** A main dashboard view for project management. The workflow designer will occupy the central area, with a module palette on the left and a configuration sidebar on the right. The header contains navigation and deploy controls. The template showcase will be a grid-based gallery.
- **Color Palette:** Primary: Dark charcoal (#1F2937), Secondary: Deep blue (#2563EB), Accent: Vibrant teal (#14B8A6), Text: Light gray (#D1D5DB) on dark backgrounds, Dark text on light elements. Use subtle gradients for backgrounds or interactive elements.
- **Typography:** A clean, modern sans-serif font like Inter or Poppins. Use distinct font weights for headings, subheadings, and body text.
- **Responsive Design:** Mobile-first approach. The dashboard and template gallery should adapt fluidly. The workflow designer's complexity requires a desktop-centric design, but it should remain usable on larger tablets. Ensure touch targets are adequately sized. Use Tailwind CSS's responsive prefixes (sm:, md:, lg:).
- **Interactions:** Smooth transitions between views, subtle hover effects on buttons and nodes, visual feedback for drag-and-drop operations, clear loading spinners or skeletons.
**COMPONENT BREAKDOWN:**
- **`App.js` / `main.jsx`:** Root component, sets up routing and global context.
- **`DashboardPage.jsx`:** Manages project list, displays saved projects.
- `ProjectCard.jsx`: Displays individual project summary (name, last updated).
- `NewProjectButton.jsx`: Initiates creation of a new project.
- **`WorkflowDesignerPage.jsx`:** Main canvas for building AI workflows.
- `ModulePalette.jsx`: Displays available AI modules. Fetches from `AiModuleLibrary.js` or state.
- `ModuleNode.jsx`: Represents a single AI module in the palette.
- `Canvas.jsx`:** The main drag-and-drop area. Uses libraries like `react-flow-renderer` or a custom implementation.
- `Node.jsx`:** Represents a module on the canvas, handles connections and rendering.
- `Handle.jsx`:** Connection points for nodes.
- `Edge.jsx`:** Represents the connection (data flow) between nodes.
- `ConfigSidebar.jsx`:** Shows parameters for the currently selected node.
- `ParameterForm.jsx`:** Renders form fields for module configuration using React Hook Form.
- `FormField.jsx`:** Reusable input component (text, number, select, etc.).
- **`TemplateGalleryPage.jsx`:** Displays available application templates.
- `TemplateCard.jsx`: Displays individual template summary (name, description, preview).
- **`Header.jsx`:** Contains navigation links, Save button, Deploy button.
- **`DeployModal.jsx`:** Displays the simulated deployment status.
- **`LocalStorageManager.js`:** Utility functions for saving/loading projects to/from Local Storage.
- **`AiModuleLibrary.js`:** Mock data or configuration for AI modules.
**DATA MODEL:**
- **`Project` Object:**
```json
{
"id": "uuid-string",
"name": "Project Name",
"description": "Optional project description",
"createdAt": "ISOString",
"updatedAt": "ISOString",
"workflow": {
"nodes": [
{
"id": "node-uuid-1",
"type": "TextGeneration", // Corresponds to module type
"position": {"x": 100, "y": 100},
"data": {
"prompt": "Write a short story about a robot.",
"temperature": 0.7,
"maxTokens": 250
}
},
{
"id": "node-uuid-2",
"type": "SentimentAnalysis",
"position": {"x": 400, "y": 100},
"data": {
"model": "default_v1"
}
}
],
"edges": [
{
"id": "edge-uuid-1",
"source": "node-uuid-1",
"target": "node-uuid-2",
"sourceHandle": "output-text", // Output handle of node 1
"targetHandle": "input-text" // Input handle of node 2
}
]
}
}
```
- **`AiModule` Object:**
```json
{
"type": "TextGeneration",
"name": "Text Generator",
"description": "Generates human-like text based on a prompt.",
"inputs": [{"name": "prompt", "type": "string"}],
"outputs": [{"name": "generatedText", "type": "string"}],
"parameters": [
{"name": "temperature", "type": "number", "defaultValue": 0.7, "min": 0, "max": 1},
{"name": "maxTokens", "type": "number", "defaultValue": 300, "min": 50}
]
}
```
- **State Management (Zustand):**
- `useStore` hook with states for:
- `projects`: Array of `Project` objects.
- `currentProject`: The `Project` object currently being edited.
- `selectedNodeId`: ID of the node selected in the designer.
- `isSaving`, `isDeploying`: Loading/status booleans.
**ANIMATIONS & INTERACTIONS:**
- **Module Drag & Drop:** Smooth visual feedback (e.g., a semi-transparent ghost image of the node) follows the cursor. When dropped, the node animates into its position on the canvas.
- **Node Connection:** Animated 'linking' effect when dragging a handle to connect nodes.
- **Configuration Sidebar:** Smooth slide-in/slide-out animation.
- **Button Hovers:** Subtle background color change or slight scaling effect.
- **Loading States:** Use `react-spinners` or custom SVG spinners within buttons or for the entire canvas during operations like saving or deploying. Implement skeleton loaders for the project dashboard and template gallery.
- **Transitions:** Use Framer Motion for page transitions (e.g., fading between Dashboard and Designer) and for animating the appearance/disappearance of UI elements like modals.
**EDGE CASES:**
- **Empty State (Dashboard):** Display a friendly message and a clear call-to-action (e.g., 'Create your first AI project!') if no projects exist.
- **Empty State (Workflow):** If a workflow has no nodes, provide guidance on how to add modules.
- **Error Handling:**
- **Configuration:** Implement validation using React Hook Form for parameter inputs (e.g., ensure numbers are within range, required fields are filled).
- **Connection Errors:** Prevent invalid connections (e.g., connecting a text output to a non-text input) visually and programmatically.
- **Deployment Errors:** Simulate realistic error messages (e.g., 'Deployment failed: API limit reached', 'Configuration error in module X').
- **General Errors:** Use a global error boundary and display user-friendly error messages (e.g., using toast notifications).
- **Unsaved Changes:** Prompt the user with a confirmation dialog before navigating away from the designer if unsaved changes exist.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes for interactive components, keyboard navigation for forms and canvas elements, and sufficient color contrast. Headings should follow a logical structure.
**SAMPLE DATA:**
- **Mock AI Modules (Partial):**
```javascript
[
{
"type": "TextGeneration",
"name": "AI Writer",
"description": "Generates creative text formats, like poems, code, scripts, musical pieces, email, letters, etc.",
"inputs": [{"name": "prompt", "type": "string"}],
"outputs": [{"name": "generatedText", "type": "string"}],
"parameters": [
{"name": "temperature", "type": "number", "defaultValue": 0.8, "min": 0, "max": 1, "label": "Creativity"},
{"name": "maxTokens", "type": "number", "defaultValue": 500, "min": 50, "max": 2000, "label": "Max Length"}
]
},
{
"type": "SentimentAnalysis",
"name": "Mood Detector",
"description": "Analyzes text to determine the emotional tone (positive, negative, neutral).",
"inputs": [{"name": "textToAnalyze", "type": "string"}],
"outputs": [{"name": "sentiment", "type": "string"}, {"name": "score", "type": "number"}],
"parameters": [
{"name": "modelVersion", "type": "select", "options": ["v1.1", "v2.0"], "defaultValue": "v1.1", "label": "Model Version"}
]
},
{
"type": "ImageGeneration",
"name": "Art Generator",
"description": "Creates images from textual descriptions.",
"inputs": [{"name": "prompt", "type": "string"}],
"outputs": [{"name": "imageUrl", "type": "string"}],
"parameters": [
{"name": "style", "type": "select", "options": ["photorealistic", "cartoon", "abstract"], "defaultValue": "photorealistic"},
{"name": "aspectRatio", "type": "string", "defaultValue": "16:9"}
]
}
]
```
- **Sample Project (for Local Storage):**
```json
{
"id": "proj-12345",
"name": "Customer Feedback Summarizer",
"createdAt": "2023-10-27T10:00:00Z",
"updatedAt": "2023-10-27T10:30:00Z",
"workflow": {
"nodes": [
{
"id": "gen-node-1", "type": "TextGeneration", "position": {"x": 100, "y": 50}, "data": {"prompt": "Summarize the following customer feedback in one sentence: ", "temperature": 0.5, "maxTokens": 100}
},
{
"id": "sent-node-2", "type": "SentimentAnalysis", "position": {"x": 400, "y": 50}, "data": {"model": "default_v1"}
}
],
"edges": [
{"id": "edge-1", "source": "gen-node-1", "target": "sent-node-2", "sourceHandle": "output-text", "targetHandle": "input-text"}
]
}
}
```
- **Sample Template:**
```json
{
"id": "tpl-social-post",
"name": "Social Media Post Generator",
"description": "Generates engaging social media posts based on a topic.",
"workflow": { /* Pre-defined nodes and edges for this template */ }
}
```
**DEPLOYMENT NOTES:**
- **Build Tool:** Vite is recommended for its speed.
- **Environment Variables:** Use `.env` files for configuration (e.g., API keys if external services are integrated later). Define `VITE_APP_TITLE` etc.
- **Performance:** Code-split components where appropriate (e.g., the Workflow Designer might be loaded on demand). Optimize image assets. Use `React.memo` and `useCallback` to prevent unnecessary re-renders, especially in the canvas and node components.
- **Build Command:** `npm run build` or `yarn build`.
- **Serving:** The build output can be served statically using any web server (Nginx, Apache) or directly deployed to platforms like Vercel, Netlify, GitHub Pages.