AI
Pass

How to Build an AI SEO Meta Writer with AI Pass SDK

Eiliya · February 24, 2026 · 3 min read · tutorial

How to Build an AI SEO Meta Writer with AI Pass SDK

Build an SEO meta writer that generates optimized titles and descriptions. Users pay directly for AI usage — you earn 50% commission.

What You're Building

An AI-powered SEO tool that:

  • Analyzes content or product descriptions
  • Generates multiple meta title options (60 chars)
  • Creates compelling meta descriptions (160 chars)
  • Optimizes for Google SEO
  • Shows preview in search results

Step 1: Create AI Pass Account

  1. Go to AI Pass
  2. Sign up and verify your email
  3. Get $1 free credit

Step 2: Get Your Client ID

  1. Go to Developer Dashboard
  2. Navigate to OAuth2 Clients
  3. Click "Create New Client"
  4. Copy your Client ID (starts with client_)

Step 3: Initialize the SDK

<script src="https://aipass.one/aipass-sdk.js"></script>
<link href="https://aipass.one/aipass-ui.css" rel="stylesheet">

<script>
AiPass.initialize({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true,
  darkMode: true
});
</script>

Step 4: Build the App

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI SEO Meta Writer</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
    textarea { width: 100%; height: 150px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; }
    .btn { padding: 10px 20px; background: #16A085; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
    .results { margin-top: 20px; }
    .option { padding: 15px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 5px; margin-bottom: 10px; }
    .char-count { font-size: 12px; color: #666; }
    .google-preview { background: #fff; border: 1px solid #dfe1e5; padding: 15px; border-radius: 8px; margin-top: 20px; }
    .google-title { color: #1a0dab; font-size: 20px; cursor: pointer; text-decoration: none; }
    .google-title:hover { text-decoration: underline; }
    .google-url { color: #006621; font-size: 14px; }
    .google-desc { color: #545454; font-size: 14px; line-height: 1.4; }
  </style>
</head>
<body>
  <h1>AI SEO Meta Writer</h1>
  <p>Paste your content or describe your product. AI generates optimized meta tags.</p>
  
  <textarea id="content" placeholder="Enter your page content or product description..."></textarea>
  
  <button class="btn" onclick="generateMeta()">Generate Meta Tags</button>
  <button class="btn" onclick="clearAll()">Clear</button>
  
  <div id="results" class="results hidden"></div>
  
  <script>
    AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true, darkMode: true });
    
    async function generateMeta() {
      const content = document.getElementById('content').value;
      if (!content) { alert('Please enter some content'); return; }
      
      document.getElementById('results').classList.remove('hidden');
      document.getElementById('results').innerHTML = '<p>Generating...</p>';
      
      try {
        const r = await AiPass.generateCompletion({
          model: 'gpt-5-mini',
          temperature: 1,
          max_tokens: 16000,
          messages: [{
            role: 'user',
            content: `Generate 5 SEO-optimized meta titles (max 60 characters each) and 5 meta descriptions (max 160 characters each) for this content. Return as JSON: {"titles":[...],"descriptions":[...]}.\n\nContent:\n${content}`
          }]
        });
        
        const data = JSON.parse(r.choices[0].message.content);
        displayResults(data);
      } catch (error) {
        alert('Error: ' + error.message);
      }
    }
    
    function displayResults(data) {
      let html = '<h2>Generated Options</h2>';
      
      html += '<h3>Meta Titles (max 60 chars)</h3>';
      data.titles.forEach((t, i) => {
        html += `<div class="option"><strong>${i+1}.</strong> ${t} <span class="char-count">(${t.length}/60)</span> <button class="btn" onclick="preview(${i}, 'title', '${t}')">Preview</button></div>`;
      });
      
      html += '<h3>Meta Descriptions (max 160 chars)</h3>';
      data.descriptions.forEach((d, i) => {
        html += `<div class="option"><strong>${i+1}.</strong> ${d} <span class="char-count">(${d.length}/160)</span> <button class="btn" onclick="preview(${i}, 'desc', '${d.replace(/'/g, "\\'")}')">Preview</button></div>`;
      });
      
      html += '<div id="previewArea" class="google-preview hidden"></div>';
      document.getElementById('results').innerHTML = html;
    }
    
    function preview(index, type, text) {
      const preview = document.getElementById('previewArea');
      preview.classList.remove('hidden');
      
      if (type === 'title') {
        preview.innerHTML = '<h3>Google Preview</h3><div class="google-preview"><a class="google-title">' + text + '</a><div class="google-url">example.com</div><div class="google-desc">Your meta description will appear here...</div></div>';
      } else {
        const titles = document.querySelectorAll('.option:nth-child(-n+5)');
        const title = titles[0] ? titles[0].textContent.replace(/^[0-9]+\. /, '').replace(/ \([0-9]+\/60\)/, '') : 'Your Meta Title';
        preview.innerHTML = '<h3>Google Preview</h3><div class="google-preview"><a class="google-title">' + title + '</a><div class="google-url">example.com</div><div class="google-desc">' + text + '</div></div>';
      }
    }
    
    function clearAll() {
      document.getElementById('content').value = '';
      document.getElementById('results').classList.add('hidden');
    }
  </script>
</body>
</html>

Critical: temperature: 1 and max_tokens: 16000 are required for GPT-5.

Step 5: Deploy

Option A: Self-Host — Upload to any web host, replace YOUR_CLIENT_ID

Option B: AI Pass Catalog — Developer Dashboard → Create App → HOSTED → Paste HTML

How You Earn Money

You earn 50% commission on every API call. Users pay directly — no billing for you.

Create your AI Pass account and start building.

Related Apps

seo-meta