Sales Marketing Demo

sneakyaneurysm

Marketing Intelligence Platform - Svelte + xAI Grok API with real-time streaming

Marketing Intelligence Platform

Modern marketing intelligence application built with Svelte + Vite and powered by xAI Grok API with real-time streaming responses.

🎨 Tech Stack

Frontend: Svelte 4 + TypeScript + Vite
Styling: x.ai-inspired glassmorphism with dark theme
AI: xAI Grok Fast 4 Reasoning API
Deployment: Vercel (Frontend) + Railway/Fly.io (Backend)

🚀 Features

AI-Powered Chat: Real-time streaming responses from Grok
Agentic Search: Web search and X (Twitter) search capabilities
Confidence Scoring: Visual indicators for AI response reliability
Executive Summaries: Structured insights with KPI dashboards
File Upload: Support for campaign data, market reports, and competitive intelligence
Analysis Types: Brand Intelligence, ROI Optimization, Competitive Edge
Export Reports: Download conversation history as text files

📋 Prerequisites

Node.js 18+ and npm
Backend API: FastAPI server (deployed separately)
xAI API Key: Configured in backend environment

🛠️ Local Development

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:5173

Environment Configuration

For local development with a backend API:

# Copy the example environment file
cp env.local.example .env.local

# Edit .env.local with your backend URL
VITE_API_URL=http://localhost:8000  # or your backend URL

🚢 Deployment to Vercel

Quick Deploy

Manual Deployment

# Install Vercel CLI
npm install -g vercel

# Deploy to preview
vercel

# Deploy to production
vercel --prod

Environment Variables

Critical: Set VITE_API_URL in Vercel Dashboard for each environment.

Via Vercel Dashboard:

Go to Project Settings → Environment Variables
Add VITE_API_URL with your backend URL
Select environments: Production, Preview, Development

Via CLI:

# Production
vercel env add VITE_API_URL production
# Enter: https://your-backend.railway.app

# Preview (for PR deployments)
vercel env add VITE_API_URL preview
# Enter: https://your-backend-staging.railway.app

# Development
vercel env add VITE_API_URL development
# Enter: http://localhost:8000

Important: Variables with VITE_ prefix are exposed to the client. Never include secrets in VITE_* variables.

Backend Deployment

Deploy the FastAPI backend separately to Railway, Fly.io, or similar:

Railway:

# In your backend directory
railway login
railway init
railway up

# Set environment variable
railway variables set XAI_API_KEY=your_key_here
railway variables set ALLOWED_ORIGINS=https://your-frontend.vercel.app

Fly.io:

# In your backend directory
flyctl auth login
flyctl launch
flyctl secrets set XAI_API_KEY=your_key_here
flyctl secrets set ALLOWED_ORIGINS=https://your-frontend.vercel.app

🏗️ Project Structure

marketing_agent_svelte/
├── src/
│   ├── components/         # Svelte components
│   │   ├── AnalysisSelector.svelte
│   │   ├── ChatInterface.svelte
│   │   └── FileUpload.svelte
│   ├── stores/             # Svelte stores (state management)
│   │   └── chat.ts
│   ├── lib/                # Utilities
│   │   ├── api.ts          # API client & SSE handling
│   │   └── markdown.ts     # Secure markdown rendering
│   ├── types/              # TypeScript types
│   │   └── index.ts
│   ├── App.svelte          # Root component
│   ├── main.ts             # Entry point
│   └── app.css             # Global styles
├── public/                 # Static assets
├── index.html              # HTML template
├── vercel.json             # Vercel configuration
├── vite.config.ts          # Vite configuration
├── package.json            # Dependencies
└── README.md               # This file

🔒 Security

XSS Prevention (CWE-79)

DOMPurify sanitizes all markdown content before rendering
Whitelist of allowed HTML tags and attributes
No dangerous innerHTML usage

API Key Protection (CWE-798)

API keys stored in backend only (never in frontend)
Environment variables used for all secrets
Build artifacts verified to contain no credentials

CORS Configuration (CWE-942)

Vercel rewrites handle API routing
Backend validates Origin header
No wildcard CORS with credentials

🎯 API Integration

The frontend communicates with a FastAPI backend via:

Endpoint: /api/chat (POST)
Format: Server-Sent Events (SSE) for streaming
Routing: Vercel rewrites /api/* to backend URL

Request Format

FormData {
  message: string;
  session_id?: string;
  analysis_type?: 'sentiment' | 'campaign' | 'competitor';
  file?: File;
}

Response Format (SSE)

data: {"chunk": "partial response..."}
data: {"chunk": "more content..."}
data: {"done": true, "session_id": "abc123"}

🎨 Design System

Color Palette

--color-bg-primary: #000000           /* Pure black background */
--color-brand-primary: #3b82f6        /* Brand blue */
--color-accent-green: #10b981         /* Success/positive */
--color-accent-orange: #f59e0b        /* Warning/moderate */
--color-accent-red: #ef4444           /* Error/negative */

Glassmorphism Effects

backdrop-filter: blur(20px) for glass panels
Semi-transparent backgrounds with rgba(0, 0, 0, 0.4)
Subtle borders with 1px solid rgba(255, 255, 255, 0.08)

📦 Build & Production

# Build optimized production bundle
npm run build

# Preview production build locally
npm run preview

# Type checking
npm run check

Bundle Size (Production)

Svelte Runtime: ~2KB (compiled away)
Dependencies: ~40KB (marked + DOMPurify)
Application Code: ~25KB (minified + gzipped)
Total: ~67KB initial load

🧪 Development Features

Hot Module Replacement: Instant updates without page reload
TypeScript: Full type safety across components
Scoped CSS: Component-level styling with no runtime cost
Tree-shaking: Unused code eliminated automatically

🎯 Vercel Deployment Best Practices

1. Repository Setup

# Initialize git (if not already done)
git init
git add .
git commit -m "Initial commit"

# Push to GitHub
git remote add origin https://github.com/your-org/your-repo.git
git branch -M main
git push -u origin main

2. Connect to Vercel

Import project from GitHub in Vercel Dashboard
Vercel auto-detects Vite configuration
Configure environment variables before first deployment

3. Environment Configuration

Set these in Vercel Dashboard → Settings → Environment Variables:

Variable	Production Value	Preview Value	Development Value
`VITE_API_URL`	`https://api.example.com`	`https://api-staging.example.com`	`http://localhost:8000`
`VITE_ENV`	`production`	`preview`	`development`

4. Enable Preview Deployments

Automatic preview URLs for every PR
Test changes before merging to main
Preview deployments use Preview environment variables

5. Production Checklist

Backend deployed and accessible via HTTPS
CORS configured on backend (allow Vercel domain)
VITE_API_URL set in Vercel Dashboard
Test deployment with vercel (preview)
Verify SSE streaming works in preview
Deploy to production with vercel --prod
Test production deployment end-to-end

6. Performance Optimizations

Static assets automatically cached (1 year)
Gzip/Brotli compression enabled by default
Global CDN distribution (300+ edge locations)
HTTP/2 and HTTP/3 support

7. Monitoring

Enable Vercel Analytics for real-time metrics
Monitor Web Vitals (LCP, FID, CLS)
Set up Vercel Speed Insights for performance tracking

8. Security Headers

Security headers are pre-configured in vercel.json:

Content Security Policy (CSP)
X-Frame-Options (clickjacking protection)
X-Content-Type-Options (MIME sniffing protection)
Referrer-Policy
Permissions-Policy

📝 License

MIT - Built for marketing professionals, powered by xAI Grok.

🔗 Links

Top categories