Build an AI TikTok Script Writer App with the AI Pass SDK
Build an AI TikTok Script Writer App with the AI Pass SDK
TikTok has over 1 billion users and creators need scripts constantly. This is a high-demand, high-retention tool — people who find a good script generator come back daily. This tutorial builds a complete AI TikTok script writer with the AI Pass SDK.
Prerequisites
- HTML/JavaScript basics
- AI Pass account (sign up at aipass.one)
- Client ID from the Developer Dashboard
Step 1: Get Your Client ID
- Log in at aipass.one
- Go to Developer Dashboard
- Open OAuth2 Clients → Create New Client
- Name it "TikTok Script Writer" and copy your
client_XXXX...ID
Step 2: 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 TikTok Script Writer</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', sans-serif;
background: #0a0a0a;
color: #fff;
max-width: 760px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
h1 { font-size: 2rem; background: linear-gradient(135deg, #ff0050, #00f2ea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { color: #999; margin: 0.5rem 0 2rem; }
label { display: block; font-size: 0.875rem; font-weight: 600; color: #ccc; margin-bottom: 0.4rem; }
input, textarea, select {
width: 100%;
background: #1a1a1a;
border: 1px solid #333;
color: #fff;
padding: 0.75rem;
border-radius: 8px;
font-size: 0.95rem;
margin-bottom: 1.25rem;
font-family: inherit;
}
textarea { min-height: 80px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
button {
width: 100%;
padding: 0.875rem;
background: linear-gradient(135deg, #ff0050, #ff375f);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.5px;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
.output-card {
background: #111;
border: 1px solid #222;
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.5rem;
display: none;
}
.section-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #ff0050;
margin-bottom: 0.5rem;
}
.hook-box {
background: #1a0a0f;
border-left: 3px solid #ff0050;
padding: 0.75rem 1rem;
border-radius: 0 8px 8px 0;
font-size: 1.1rem;
margin-bottom: 1.25rem;
}
.script-text {
white-space: pre-wrap;
line-height: 1.7;
color: #e0e0e0;
font-size: 0.95rem;
}
#status { text-align: center; color: #666; margin-top: 1rem; font-size: 0.9rem; }
</style>
</head>
<body>
<h1>🎬 TikTok Script Writer</h1>
<p class="subtitle">AI-powered scripts with viral hooks and CTAs</p>
<label>Your Content Idea *</label>
<textarea id="topic" placeholder="e.g. 5 money mistakes people make in their 20s, How I went from 0 to 10k followers, Why you should stop drinking coffee before noon"></textarea>
<div class="row">
<div>
<label>Niche</label>
<select id="niche">
<option value="general">General</option>
<option>Finance & Money</option>
<option>Fitness & Health</option>
<option>Beauty & Fashion</option>
<option>Food & Cooking</option>
<option>Business & Entrepreneurship</option>
<option>Technology</option>
<option>Education & Learning</option>
<option>Comedy & Entertainment</option>
<option>Travel & Lifestyle</option>
<option>Relationships & Dating</option>
<option>Mental Health & Wellness</option>
<option>Gaming</option>
</select>
</div>
<div>
<label>Video Style</label>
<select id="style">
<option>Educational / Tips</option>
<option>Storytime / Personal</option>
<option>Listicle</option>
<option>Controversial Hot Take</option>
<option>POV / Scenario</option>
<option>Tutorial / How-To</option>
<option>Motivational</option>
</select>
</div>
</div>
<div class="row">
<div>
<label>Video Length</label>
<select id="length">
<option>15-30 seconds</option>
<option>30-60 seconds</option>
<option>1-2 minutes</option>
<option>2-3 minutes</option>
</select>
</div>
<div>
<label>Tone</label>
<select id="tone">
<option>Engaging & Direct</option>
<option>Funny & Casual</option>
<option>Serious & Authoritative</option>
<option>Inspirational</option>
<option>Relatable & Raw</option>
</select>
</div>
</div>
<button id="genBtn" onclick="generateScript()">⚡ Generate TikTok Script</button>
<p id="status"></p>
<div class="output-card" id="output">
<div class="section-label">Hook (First 3 seconds)</div>
<div class="hook-box" id="hookText"></div>
<div class="section-label">Full Script</div>
<div class="script-text" id="scriptText"></div>
<div id="captionSection" style="margin-top:1.25rem">
<div class="section-label">Caption & Hashtags</div>
<div class="script-text" id="captionText"></div>
</div>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: true
});
async function generateScript() {
const topic = document.getElementById('topic').value.trim();
if (!topic) { alert('Please enter your content idea.'); return; }
const btn = document.getElementById('genBtn');
const status = document.getElementById('status');
btn.disabled = true;
status.textContent = '⏳ Generating your script...';
const niche = document.getElementById('niche').value;
const style = document.getElementById('style').value;
const length = document.getElementById('length').value;
const tone = document.getElementById('tone').value;
const prompt = `Write a viral TikTok script for the following:
Topic: ${topic}
Niche: ${niche}
Style: ${style}
Video Length: ${length}
Tone: ${tone}
Provide:
1. HOOK: Write 3 different hook options for the first 3 seconds (labeled Hook 1, Hook 2, Hook 3)
2. SCRIPT: Full script with [ACTION] notes for visual cues
3. CTA: The call-to-action at the end
4. CAPTION: Suggested caption text with 5-8 relevant hashtags
Make the hook impossible to ignore. Use punchy, short sentences. Write it exactly as someone would speak it — no formal writing.`;
try {
const result = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{
role: 'system',
content: 'You are a viral TikTok content strategist who has studied thousands of viral videos. You write scripts that stop the scroll, build tension, and drive engagement.'
},
{ role: 'user', content: prompt }
]
});
const content = result.choices[0].message.content;
// Parse sections
const hookMatch = content.match(/HOOK[:\s]+([\s\S]*?)(?=SCRIPT:|$)/i);
const scriptMatch = content.match(/SCRIPT[:\s]+([\s\S]*?)(?=CTA:|CAPTION:|$)/i);
const captionMatch = content.match(/CAPTION[:\s]+([\s\S]*?)$/i);
document.getElementById('hookText').textContent = hookMatch ? hookMatch[1].trim() : content.substring(0, 300);
document.getElementById('scriptText').textContent = scriptMatch ? scriptMatch[1].trim() : content;
document.getElementById('captionText').textContent = captionMatch ? captionMatch[1].trim() : '';
document.getElementById('output').style.display = 'block';
status.textContent = '✅ Script ready! Copy and start filming.';
} catch (err) {
status.textContent = '❌ Error: ' + err.message;
}
btn.disabled = false;
}
</script>
</body>
</html>
SDK Key Parameters
Always include these for gpt-5-mini:
AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1, // Required for GPT-5 family
max_tokens: 16000, // Required — prevents truncation
messages: [...]
})
Deploy & Monetize
Option A: Self-host on Netlify, Vercel, GitHub Pages — any static host works.
Option B: Publish on AI Pass catalog and earn 50% commission on every script generated by your users. TikTok creators are high-frequency users — they generate scripts daily.
The embed button (</> bottom-right) gives you iframe code to put the tool anywhere — blog, newsletter, Discord.
Resources
Content creators need this every single day. Build it and let the commission flow.