Skip to content

Soham-0047/Microscribe

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
backend
backend
 
 
browser-extension
browser-extension
 
 
docs
docs
 
 
frontend
frontend
 
 
.gitignore
.gitignore
 
 

Repository files navigation

MicroScribe

A Smart Microcopy & UX Content Generator powered by AI

MicroScribe is a full-stack GenAI application built on the MERN stack (MongoDB/Supabase, Express, React, Node.js) that leverages advanced language models to automatically generate high-quality microcopy and UX content for websites, applications, and digital products.

📋 Table of Contents

🎯 Overview

MicroScribe helps product teams, designers, and marketers generate optimized microcopy—the small text elements that guide users through applications. Whether it's button labels, error messages, onboarding instructions, or call-to-action text, MicroScribe uses AI to create contextually appropriate, on-brand content.

Key Capabilities:

  • AI-Powered Generation: Multiple AI model options (OpenAI GPT-3.5, Hugging Face models, local LLMs)
  • Tone & Style Control: Generate content in different tones (professional, casual, friendly, etc.)
  • Translation Support: Translate generated content into multiple languages
  • Team Collaboration: Manage projects and teams with role-based access
  • A/B Testing Metrics: Track and analyze performance of different microcopy variants
  • Subscription Plans: Tiered pricing with Stripe integration
  • Export Options: Export generated content in various formats
  • Browser Extension: Quick access to generation features from your browser

📁 Project Structure

microscribe/
├── backend/                 # Node.js/Express API server
│   ├── api/                # API endpoints
│   │   ├── figma/         # Figma integration
│   │   ├── generate/      # Core content generation
│   │   ├── stripe-webhook/# Payment webhook handling
│   │   ├── subscription/  # Subscription management
│   │   └── user/          # User profile endpoints
│   ├── middleware/        # Express middleware
│   │   └── errorHandler.js
│   ├── utils/             # Utility functions
│   │   ├── cors.js       # CORS configuration
│   │   ├── stripe.js     # Stripe payment integration
│   │   └── supabase.js   # Supabase database client
│   ├── package.json
│   └── .env              # Environment variables
├── frontend/               # React application
│   ├── public/            # Static assets
│   ├── src/
│   │   ├── components/    # Reusable React components
│   │   ├── pages/         # Page components
│   │   │   ├── Dashboard.jsx      # Project dashboard
│   │   │   ├── Generator.jsx      # Main generation interface
│   │   │   ├── Login.jsx          # Authentication
│   │   │   ├── Pricing.jsx        # Pricing page
│   │   │   ├── Project.jsx        # Project details
│   │   │   ├── Settings.jsx       # User settings
│   │   │   ├── Team.jsx           # Team management
│   │   │   └── Home.jsx           # Landing page
│   │   ├── services/      # API service layer
│   │   ├── store/         # Redux state management
│   │   │   └── slices/    # Redux slices
│   │   ├── contexts/      # React contexts
│   │   ├── hooks/         # Custom React hooks
│   │   ├── utils/         # Utility functions
│   │   ├── styles/        # Global styles
│   │   └── App.jsx        # Root component
│   ├── package.json
│   ├── tailwind.config.js # Tailwind CSS configuration
│   ├── postcss.config.js  # PostCSS configuration
│   └── .env              # Environment variables
└── browser-extension/      # Chrome/Firefox extension
    ├── manifest.json       # Extension configuration
    └── popup/             # Extension popup interface

🛠 Tech Stack

Backend

  • Runtime: Node.js (ES modules)
  • Framework: Express.js
  • Database: Supabase (PostgreSQL)
  • Authentication: Supabase Auth
  • AI/ML Integration:
    • OpenAI API (GPT-3.5-turbo)
    • Hugging Face Inference (Qwen 2.5, Phi-3, etc.)
    • Web LLM (local model support)
  • Payments: Stripe API
  • Other: CORS, dotenv, UUID

Frontend

  • Framework: React 18
  • State Management: Redux Toolkit
  • Routing: React Router v6
  • Styling: Tailwind CSS + Framer Motion
  • UI Components: Headless UI, Heroicons
  • API Client: Axios
  • Visualization: Recharts
  • Code Display: React Syntax Highlighter
  • Local Models: Web LLM

Browser Extension

  • Manifest v3 compatible
  • HTML/CSS/JavaScript popup interface

✨ Features

1. Content Generation

  • Generate microcopy using multiple AI models
  • Fallback system: Primary model → Fallback models → Manual override
  • Context-aware generation based on user input
  • Support for various content types

2. Tone & Style Customization

  • Multiple tone options (Professional, Casual, Friendly, Formal, etc.)
  • ToneSelector component for easy tone switching
  • Consistent tone application across generated content

3. Translation

  • Multi-language support via TranslationModal
  • Translate generated content on-demand
  • Language preferences storage

4. Project Management

  • Create and manage projects
  • Store generation history
  • Organize content by project
  • Project-level settings

5. Team Collaboration

  • Invite team members
  • Role-based access control
  • Team settings and preferences

6. A/B Testing

  • ABTestMetrics component for variant tracking
  • Performance analytics
  • Comparison tools for different microcopy versions

7. Export Options

  • Multiple export formats (JSON, CSV, etc.)
  • Batch export functionality
  • Custom export templates

8. Authentication & Authorization

  • Supabase Auth integration
  • Protected routes
  • Session persistence
  • User profiles

9. Subscription & Payments

  • Stripe payment integration
  • Multiple subscription tiers
  • Usage tracking and limits
  • Webhook handling for payment events

10. Browser Extension

  • Quick access to generation features
  • Context menu integration
  • Quick-copy functionality

🚀 Installation & Setup

Prerequisites

  • Node.js 16+
  • npm or yarn
  • Supabase account
  • OpenAI API key
  • Hugging Face API token
  • Stripe account

Backend Setup

  1. Navigate to backend directory

    cd backend

  2. Install dependencies

    npm install

  3. Create .env file (in backend root)

    OPENAI_API_KEY=your_openai_key
HUGGINGFACE_API_KEY=your_huggingface_token
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_webhook_secret
NODE_ENV=development
PORT=3001

  4. Start the backend server

    npm start

    Server runs on http://localhost:3001

Frontend Setup

  1. Navigate to frontend directory

    cd frontend

  2. Install dependencies

    npm install

  3. Create .env file (in frontend root)

    REACT_APP_SUPABASE_URL=your_supabase_url
REACT_APP_SUPABASE_ANON_KEY=your_supabase_anon_key
REACT_APP_API_URL=http://localhost:3001

  4. Start the frontend development server

    npm start

    Application runs on http://localhost:3000

Browser Extension Setup

  1. Navigate to browser-extension directory

    cd browser-extension

  2. Load in Chrome/Edge:

    • Open chrome://extensions/
    • Enable "Developer mode"
    • Click "Load unpacked"
    • Select the browser-extension folder

  3. Load in Firefox:

    • Open about:debugging#/runtime/this-firefox
    • Click "Load Temporary Add-on"
    • Select manifest.json

🔌 Backend API

Core Endpoints

Generate Content (POST /api/generate)

Generates microcopy using AI models

{
  "context": "Button for form submission",
  "tone": "professional",
  "contentType": "button-label",
  "count": 5
}

User Profile (GET/POST /api/user/profile)

Manages user account information

  • GET: Retrieve user profile
  • POST: Update user preferences

Subscription (GET/POST/PUT /api/subscription)

Handles subscription management

  • GET: Get current subscription
  • POST: Create new subscription
  • PUT: Update subscription plan

Stripe Webhook (POST /api/stripe-webhook)

Processes payment events from Stripe

  • Subscription updated
  • Payment succeeded/failed
  • Invoice created

Figma Integration (POST /api/figma)

Integrates with Figma for design-aware generation

  • Extract design context from Figma files
  • Apply brand guidelines to generated content

💻 Frontend Application

Pages

  1. Home - Landing page and feature showcase
  2. Login - User authentication
  3. Signup - New user registration
  4. Dashboard - Project overview and management
  5. Generator - Main content generation interface
  6. Project - Detailed project view with history
  7. Team - Team member management
  8. Settings - User preferences and account settings
  9. Pricing - Subscription plan selection

Key Components

  • Navbar - Navigation and user menu
  • Sidebar - Project/team navigation
  • GenerationCard - Display generated content
  • ToneSelector - Select content tone
  • TranslationModal - Translate content
  • ExportOptions - Export generated content
  • ABTestMetrics - View A/B test results
  • ContextInput - Input context for generation
  • LoadingSpinner - Loading indicator
  • Toast - Notification system
  • ProtectedRoute - Route authentication wrapper

State Management (Redux)

  • authSlice - Authentication state
  • generatorSlice - Generation history and current content
  • userSlice - User profile and preferences

Services

  • api.jsx - API client for backend communication
  • localModelService.jsx - Local LLM inference
  • translate.jsx - Translation service

🧩 Browser Extension

Provides quick access to MicroScribe's generation features:

  • Popup interface in popup/popup.html
  • Context menu integration
  • Content script for in-page generation
  • Manifest V3 compliant

⚙️ Configuration

Tailwind CSS

  • Configured in tailwind.config.js
  • Custom theme extensions
  • Plugin integrations (forms)

PostCSS

  • Configured in postcss.config.js
  • Autoprefixer for browser compatibility

Environment Variables

Backend:

  • OPENAI_API_KEY - OpenAI API key
  • HUGGINGFACE_API_KEY - Hugging Face token
  • SUPABASE_URL - Supabase project URL
  • SUPABASE_KEY - Supabase API key
  • STRIPE_SECRET_KEY - Stripe secret key
  • STRIPE_WEBHOOK_SECRET - Stripe webhook secret
  • PORT - Server port (default: 3001)

Frontend:

  • REACT_APP_SUPABASE_URL - Supabase project URL
  • REACT_APP_SUPABASE_ANON_KEY - Supabase public key
  • REACT_APP_API_URL - Backend API URL

🚀 Deployment

Backend (Vercel)

  • Configured for Vercel deployment
  • .vercel/project.json contains deployment config
  • Automatically deploys API functions

Frontend (Vercel/Netlify)

npm run build
  • Creates production build in build/ directory
  • Ready for deployment to Vercel, Netlify, or other services

Browser Extension

  • Can be published to:
    • Chrome Web Store
    • Firefox Add-ons
    • Edge Add-ons

📊 Database Schema

Built on Supabase (PostgreSQL):

  • users - User accounts and profiles
  • projects - User projects
  • generations - Generated content history
  • subscriptions - User subscription data
  • teams - Team management
  • team_members - Team membership tracking

🔒 Security

  • Environment variables for sensitive data
  • Supabase Auth for authentication
  • Protected routes and API endpoints
  • CORS middleware for cross-origin requests
  • Stripe webhooks with secret verification

📝 License

[Add your license information here]

👥 Contributing

[Add contribution guidelines here]

📞 Support

For issues, questions, or feature requests, please create an issue in the repository.

Happy generating! 🎉

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages