I built an SEO A.I. analysis web app in 2 days using n8n + Replit
Turned my boring n8n workflow into a beautiful dashboard using webhooks
I thought learning n8n was enough to build everything I wanted with A.I., I was dead wrong. There’s ALOT of things you couldn’t build with A.I. But in this post, I’ll show you why I think pairing n8n with a cloud development A.I. like Replit/Lovable/v0/Bolt will be a game changer.
I already built an A.I. SEO n8n workflow that pulled in Google Analytics data and sent me weekly SEO reports via email. The problem? Those emails looked boring - plain text, no charts, no visual appeal. Alot of my customers are agencies who bought my system to present data to their clients and they keep asking me about how to make this a web page to show their clients.
So I transformed my boring automation into a stunning web app using n8n, webhooks and Replit. I’ll break down how it works.
Here's what we're covering:
• Why webhooks are the secret sauce for connecting n8n to external apps
• How I built a beautiful dashboard in Replit that calls my n8n workflow
• The 3 components you need to build your own automation-powered web apps
Weekly Resource List:
Dia A.I. browser - I love Arc browser and this is their new A.I. browser. It’s free.
Descript A.I. Video Editor - I’ve switched from Screen Studio to this cool A.I. video editor
-----
Check out my A.I. SEO system: https://seo.rumjahn.com/
Save 100+ hours by using my A.I. SEO agent system to generate reports for you!
SEO web analytics dashboard uses n8n to aggregate data from multiple sources and passes it to AI for intelligent analysis. Instead of spending hours manually checking different platforms, you get automated insights that actually help you grow your traffic. The system pulls data from Google Analytics, Search Console, and other tools to create actionable reports that save you 10+ hours per week.
Check out the full system and see how it can transform your SEO workflow.
-----
3 Components To Build Automation-Powered Web Apps Even If You're Not A Developer
You can build a dashboard like this!
To turn your n8n workflows into beautiful web applications, you need three key pieces working together.
n8n workflow
Front end
Webhook
What is a webhook?
You need a way for your web app to talk to your n8n workflow and vice versa.
Think of webhooks like a doorbell system. Instead of constantly knocking on the door (polling an API), you ring the bell once and wait for someone to answer. In my setup, the Replit web app "rings the bell" by sending a webhook to n8n to start the data collection process. Then n8n "answers the door" by sending the processed data back to another webhook endpoint in my web app. This took me 2 days to figure out because n8n has some quirky settings - you need to enable "Respond to Webhook" and set up the proper HTTP response nodes. But once it clicks, it's incredibly powerful.
The key is to do this step by step. Before you build a 100 step workflow, start with getting your simple webhook works. I wanted to test my n8n server can respond to an outside call. So I created a simple webhook and respond to webhook workflow and created a webhook tester on Replit. The tester will call the webhook and display the results.
You can build a webhook tester with this prompt:
Prompt for Creating a Webhook Testing Application
Build a full-stack webhook testing tool specifically designed for validating n8n workflows. This should be a production-ready application with a modern, professional interface.
Core Requirements
Application Purpose:
Test webhooks by sending customizable HTTP requests
Store request/response history for inspection
Handle both quick responses and long-running workflows (3-5 minutes)
Support GET and POST requests with various body types
Tech Stack:
Frontend: React 18 + TypeScript + Vite
Backend: Express.js + TypeScript
Database: In-memory storage (expandable to PostgreSQL)
UI: shadcn/ui components + Tailwind CSS
State Management: TanStack Query
Routing: Wouter
Key Features to Implement
1. Request Configuration
HTTP method selector (GET, POST, PUT, DELETE)
URL input field with validation
Dynamic headers management (add/remove key-value pairs)
Multiple body types:
JSON with syntax highlighting
Form data with key-value pairs
Raw text input
2. Pre-built Test Scenarios
Create test scenarios including:
Basic GET request with query parameters
Analytics workflow trigger (for n8n)
User event simulation (signup, login)
Error handling tests
Large payload testing
3. Response Analysis
Response status with color coding (green for 2xx, yellow for 4xx, red for 5xx)
Response headers display
Response body with JSON formatting
Response time measurement
Copy to clipboard functionality
4. Request History
Store all requests and responses
Sortable by timestamp (newest first)
View individual request details
Persistent storage using in-memory implementation
5. Long-running Workflow Support
6-minute timeout for n8n workflows
Progress indicator during long requests
AbortController for request cancellation
Proper loading states
UI/UX Requirements
Design:
Dark theme with modern slate color palette
Two-panel layout: configuration on left, response on right
Tabbed interface for headers, body, and scenarios
Professional header with app branding
Responsive design
Color Scheme:
Background: slate-900
Panels: slate-800
Borders: slate-700
Inputs: slate-700 with slate-600 borders
Primary: blue-600
Success: green-600
Error: red-600
Technical Implementation
Backend API Routes
POST /api/webhook-requests - Save request to history
GET /api/webhook-requests - Get all request history
GET /api/webhook-requests/:id - Get specific request
Data Schema
interface WebhookRequest {
id: number;
method: string;
url: string;
headers: Record<string, string>;
body: string;
bodyType: 'json' | 'form' | 'raw';
responseStatus: number | null;
responseHeaders: Record<string, string> | null;
responseBody: string | null;
responseTime: number | null;
createdAt: string;
}
Frontend Components
Main webhook tester page with form controls
Request history panel
Response viewer with syntax highlighting
Test scenario loader
Toast notifications for user feedback
Specific Features
Default Configuration
Set default method to GET (for n8n compatibility)
Pre-populate with example n8n webhook URL
Default Content-Type: application/json header
Error Handling
Network error management
Timeout handling for long requests
Form validation
Proper error messages
Performance Optimizations
Debounced form inputs
Efficient re-renders with React Query
Optimistic updates for better UX
Additional Requirements
Type Safety: Full TypeScript implementation with strict configuration
Code Organization: Feature-based folder structure with shared utilities
Testing Ready: Structure for easy testing implementation
Extensible: Easy to add new body types, scenarios, or features
Production Ready: Error boundaries, loading states, and proper error handling
File Structure
├── client/
│ ├── src/
│ │ ├── components/ui/ (shadcn components)
│ │ ├── pages/webhook-tester.tsx
│ │ ├── lib/queryClient.ts
│ │ └── App.tsx
├── server/
│ ├── index.ts
│ ├── routes.ts
│ └── storage.ts
├── shared/
│ └── schema.ts
The application should feel professional and production-ready, with attention to details like proper loading states, error handling, and user feedback. Focus on creating a tool that developers would actually want to use for testing their webhooks.
The Frontend Dashboard
You need a beautiful interface that users actually want to interact with.
My boring email report
This is where tools like Replit, v0, or Lovable shine. Instead of sending boring email reports, I built a responsive web dashboard with charts, graphs, and interactive elements. Here’s the prompt I used:
SEO Analytics Dashboard - Replication Guide
🎯 Project Overview
Create a comprehensive analytics dashboard that integrates Google Analytics data from an n8n workflow webhook, featuring AI-powered SEO insights from industry experts.
📋 What You'll Build
Real-time Analytics Dashboard displaying weekly/monthly metrics and page engagement data
Database Storage for historical analytics reports with PostgreSQL
AI SEO Analysis using OpenRouter API with selectable industry experts
Professional UI with shadcn/ui components and Tailwind CSS styling
🚀 Setup Instructions for Replit
Step 1: Create New Replit Project
Create a new Replit project and copy this prompt to get started
Step 2: Required Dependencies
The app uses these key technologies:
Frontend: React + TypeScript + Vite
Backend: Express.js + TypeScript
Database: PostgreSQL with Drizzle ORM
UI: shadcn/ui + Tailwind CSS
AI: OpenRouter API integration
Step 3: Database Setup
You'll need PostgreSQL database access. The app will automatically:
Create user and analytics_reports tables
Handle data storage and retrieval
Manage historical report viewing
Step 4: Required API Keys
You'll need to obtain:
OpenRouter API Key (for AI SEO analysis)
Sign up at https://openrouter.ai
Get your API key from the dashboard
Add as OPENAI_API_KEY environment variable
Step 5: Analytics Data Source
The app fetches data from an n8n workflow webhook that:
Processes Google Analytics data
Takes ~3.5 minutes to complete
Returns structured HTML analytics data
Can be replaced with your own data source
🔧 Detailed Implementation Prompt
Copy this prompt to Replit AI to build the complete application:
BUILD REQUEST:
Create a full-stack analytics dashboard web application with the following specifications:
Core Features Required:
1. Analytics Dashboard
Display weekly and monthly change metrics in formatted tables
Show page engagement data (pageviews, active users, etc.)
Auto-refresh data every 5 minutes
Manual "Load Fresh Data" button for immediate updates
"Load Previous Data" to view historical reports from database
2. Database Integration
PostgreSQL database with Drizzle ORM
Store analytics reports with timestamps
Users table and analytics_reports table
Automatic saving of new analytics data
Historical data viewing capability
3. SEO Analysis Tab
Dropdown to select SEO experts: Rand Fishkin, Eli Schwartz, Tim Soulo, Aleyda Solis, Brian Dean
Custom expert input field
AI-powered analysis using OpenRouter API (google/gemma-3n-e4b-it:free model)
Professional formatting with gradient backgrounds and structured sections
Copy button for sharing analysis results
Smart text formatting (auto-detect headings, lists, paragraphs)
4. Data Processing
Parse HTML analytics data into structured TypeScript types
Handle weekly/monthly metrics, engagement data
Error handling for failed API calls
Loading states and progress indicators
5. UI/UX Requirements
Modern, professional design using shadcn/ui components
Responsive layout with proper spacing
Purple accent color scheme for SEO sections
Card-based layout for data sections
Proper error states and loading indicators
Copy functionality with confirmation feedback
Technical Architecture:
Frontend Structure:
client/src/
├── components/
│ ├── analytics-dashboard.tsx (main dashboard)
│ ├── weekly-change-section.tsx
│ ├── monthly-change-section.tsx
│ ├── page-engagement-section.tsx
│ ├── seo-analysis-section.tsx (AI analysis tab)
│ └── ui/ (shadcn components)
├── types/analytics.ts (TypeScript interfaces)
├── lib/queryClient.ts (API requests)
└── pages/home.tsx
Backend Structure:
server/
├── index.ts (Express server)
├── routes.ts (API endpoints)
├── db.ts (database connection)
└── storage.ts (data operations)
shared/
└── schema.ts (Drizzle database schema)
Database Schema:
// Users table
users: {
id: serial primary key
username: varchar(255) unique not null
password: varchar(255) not null
}
// Analytics reports table
analyticsReports: {
id: serial primary key
weeklyChange: jsonb
monthlyChange: jsonb
engagementThisWeek: jsonb
engagementPriorWeek: jsonb
rawHtml: text
createdAt: timestamp default now()
}
API Endpoints:
GET /api/webhook-proxy - Fetch analytics from n8n workflow
POST /api/analytics - Save analytics report to database
GET /api/analytics/latest - Get most recent analytics report
POST /api/seo-analysis - Generate AI SEO analysis
Data Types:
interface MetricRow {
metric: string;
current: string;
previous: string;
change: string;
changePercent?: number;
isPositive?: boolean | null;
}
interface EngagementRow {
page: string;
pageViews: string;
activeUsers: string;
viewsPerUser: string;
eventCount: string;
}
interface AnalyticsData {
weeklyChange: MetricRow[];
monthlyChange: MetricRow[];
engagementThisWeek: EngagementRow[];
engagementPriorWeek: EngagementRow[];
rawHtml: string;
}
Key Implementation Details:
1. Data Fetching
Use TanStack Query for state management
5-minute auto-refresh intervals
Timeout handling for long-running requests
Fallback to database data on webhook failures
2. SEO Analysis Implementation
// OpenRouter API integration
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'google/gemma-3n-e4b-it:free',
messages: [{
role: 'user',
content: `You are ${expert}, analyze this analytics data...`
}],
max_tokens: 1200,
temperature: 0.7
})
});
3. Text Formatting Logic
Auto-detect markdown headers (#, ##)
Convert bullet points to styled list items
Format paragraphs with proper spacing
Purple gradient backgrounds for analysis sections
4. Database Operations
Use Drizzle ORM with PostgreSQL
Automatic schema management with npm run db:push
Type-safe database operations
Connection pooling with Neon serverless
Environment Variables Required:
DATABASE_URL=postgresql://...
OPENAI_API_KEY=sk-or-...
Build Commands:
npm run dev # Start development server
npm run db:push # Push database schema changes
npm run build # Build for production
Expected User Flow:
User loads dashboard and sees analytics data
Click "Load Fresh Data" to trigger n8n workflow (3.5 min wait)
Data automatically saves to database when received
Switch to SEO Analysis tab
Select expert (Rand Fishkin, etc.) or enter custom expert
Click "Get SEO Analysis" and wait 30-60 seconds
View formatted analysis with copy button
Use "Load Previous Data" to view historical reports
Success Criteria:
✅ Dashboard displays real analytics data in formatted tables
✅ Database stores and retrieves historical reports
✅ SEO analysis generates expert insights with professional formatting
✅ Copy functionality works for sharing analysis
✅ Error handling for API timeouts and failures
✅ Responsive design with purple accent styling
✅ Auto-refresh and manual refresh capabilities
🎯 Final Result
You'll have a professional analytics dashboard that:
Fetches real Google Analytics data
Stores historical reports in PostgreSQL
Generates AI-powered SEO insights from industry experts
Features a modern, responsive UI with copy/share functionality
Handles errors gracefully with proper loading states
The entire application will be production-ready and deployable on Replit with proper error handling, professional styling, and comprehensive functionality.The Data Processing Engine
You need n8n to do the heavy lifting of data collection and analysis.
This is where n8n really shines. My workflow pulls data from Google Analytics, processes it through AI for insights, and formats it perfectly for the web app. The beauty is that all the complex API calls, data transformations, and AI analysis happen in the background. Your web app just needs to trigger the process and display the results. I have nodes that handle authentication, data cleaning, AI analysis, and error handling - all running automatically when the webhook is triggered.
That's it.
Here's what you learned today:
- Webhooks are the bridge between n8n workflows and external web apps
- Modern no-code tools make building dashboards accessible to everyone
- The real power comes from combining automation with beautiful presentation
Stop settling for ugly email reports when you can have professional dashboards that actually get used. Pick one workflow you're currently running, identify the webhook endpoints you need, and spend this weekend building your first automation-powered web app.
-----
Tell me what you thought of today's email.
* Good?
* Ok?
* Bad?
Leave a comment/hit the reply button and let me know why.
-----
PS...If you're enjoying this newsletter, please consider referring this edition to a friend. They'll get actionable automation tips that save hours every week.
And whenever you are ready, there are 2 ways I can help you:
1. Get the complete SEO automation system at https://seo.rumjahn.com/
2. Reply to this email with your biggest automation challenge and I'll help you solve it