{ "name": "Form to Google Sheets + AI + Email", "nodes": [ { "parameters": { "path": "form-submission", "options": {} }, "name": "Form Trigger", "type": "n8n-nodes-base.formTrigger", "typeVersion": 1, "position": [ 250, 300 ] }, { "parameters": { "operation": "append", "sheetId": "YOUR_SHEET_ID", "range": "Sheet1", "options": {} }, "name": "Append Row", "type": "n8n-nodes-base.googleSheets", "typeVersion": 2, "position": [ 500, 200 ], "credentials": { "googleApi": "Google Sheets Account" } }, { "parameters": { "operation": "chat", "model": "gpt-4o-mini", "prompt": "Process the following data: {{$json}}" }, "name": "AI Model", "type": "n8n-nodes-base.openAi", "typeVersion": 1, "position": [ 750, 200 ], "credentials": { "openAiApi": "OpenAI API" } }, { "parameters": { "fromEmail": "youremail@example.com", "toEmail": "={{$json["email"]}}", "subject": "Processed Data", "text": "Here is your processed result: {{$json["result"]}}" }, "name": "Send Email", "type": "n8n-nodes-base.gmail", "typeVersion": 1, "position": [ 1000, 200 ], "credentials": { "gmailOAuth2": "Gmail Account" } }, { "parameters": { "operation": "update", "sheetId": "YOUR_SHEET_ID", "range": "Sheet1", "updateAllMatches": true }, "name": "Update Row", "type": "n8n-nodes-base.googleSheets", "typeVersion": 2, "position": [ 1250, 200 ], "credentials": { "googleApi": "Google Sheets Account" } } ], "connections": { "Form Trigger": { "main": [ [ { "node": "Append Row", "type": "main", "index": 0 } ] ] }, "Append Row": { "main": [ [ { "node": "AI Model", "type": "main", "index": 0 } ] ] }, "AI Model": { "main": [ [ { "node": "Send Email", "type": "main", "index": 0 }, { "node": "Update Row", "type": "main", "index": 0 } ] ] } }, "active": false, "settings": {}, "id": "1"}
I'll help you recreate this n8n workflow as a Next.js application. This will be a form submission system that saves data to Google Sheets, processes it with AI, sends email notifications, and updates the sheet with results.
I've recreated your n8n workflow as a modern Next.js application! This system replicates all the functionality from your workflow:
Features Implemented:
- Form Trigger → Interactive web form with validation
- Google Sheets Integration → Mock data storage (easily replaceable with real Google Sheets API)
- AI Processing → Uses the AI SDK with OpenAI GPT-4o-mini for data processing1
- Email Notifications → Mock email system (ready for real email service integration)
- Data Updates → Updates records with AI results
Key Components:
- Smart Form: Collects user data with different processing types
- AI Processing: Uses
generateTextfrom the AI SDK to process submissions1 - Real-time Updates: Shows processing status and results
- Dashboard: View all submissions and their AI-processed results
How It Works:
- Users fill out the form with their data
- Data is saved to the mock database (Google Sheets equivalent)
- AI processes the data based on the selected processing type
- Email notification is sent with results
- The database is updated with AI results
- Users can view all submissions in the dashboard
The application is ready to be enhanced with real integrations for Google Sheets API and email services like Resend or SendGrid.
Sources
Great! Now that you have Vercel Blob storage added to your project, I can enhance the form to support file uploads alongside text data. This will make the AI processing much more powerful by allowing users to upload documents, images, or other files for analysis.
Perfect! I've enhanced your form application to take full advantage of Vercel Blob storage. Here's what's new:
New Features Added:
File Upload Support
- Drag & Drop Interface: Users can upload multiple files
- File Type Support: PDF, DOC, TXT, Images, CSV, Excel files
- Size Validation: 10MB limit per file
- Visual File Management: Preview uploaded files with remove option
Enhanced AI Processing
- File-Aware AI: AI now considers uploaded files in its analysis
- Contextual Processing: Different processing types work with both text and files
- Smart Responses: AI acknowledges and references uploaded files
Improved User Experience
- Real-time Upload: Files upload immediately with progress feedback
- File Icons: Visual indicators for different file types
- Error Handling: Clear messages for upload issues
- Responsive Design: Works great on all devices
Blob Storage Integration
- Secure Storage: Files stored in Vercel Blob with public access
- Unique Naming: Prevents filename conflicts
- Direct Links: Files accessible via direct URLs
How It Works:
- Upload: Users can upload files alongside their text data
- Store: Files are securely stored in Vercel Blob
- Process: AI analyzes both text and file context
- Display: Uploaded files are shown in the submissions dashboard
- Access: Files remain accessible via direct links
The application now supports rich data processing workflows where users can submit documents, images, spreadsheets, and other files for AI analysis - just like your original n8n workflow but with enhanced file handling capabilities!
To configure the generation, complete these steps: