Build an AI Essay Writer App with AI Pass SDK
Build an AI Essay Writer App with AI Pass SDK
Writing apps are consistently popular — students, bloggers, and professionals all need them. Here's how to build a complete AI essay generator using the AI Pass SDK.
What You'll Build
A polished web app where users:
- Enter a topic or thesis
- Choose essay style and length
- Generate a complete, structured essay
- Copy or download the result
Prerequisites
- AI Pass Developer account
- Your OAuth2 Client ID
The App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Essay Writer</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; max-width: 820px; margin: 40px auto; padding: 20px; }
h1 { font-size: 30px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
textarea { width: 100%; padding: 12px; font-size: 15px; border: 1px solid #ddd; border-radius: 8px; }
select { width: 100%; padding: 10px; font-size: 15px; border: 1px solid #ddd; border-radius: 8px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #555; }
.generate-btn { width: 100%; padding: 14px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 8px; font-weight: 600; }
#essay-output { margin-top: 24px; white-space: pre-wrap; background: #f9fafb; padding: 24px; border-radius: 8px; font-size: 15px; line-height: 1.8; border: 1px solid #e5e7eb; min-height: 100px; }
.actions { display: flex; gap: 8px; margin-top: 10px; }
.action-btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.copy { background: #10b981; color: white; }
</style>
</head>
<body>
<h1>📝 AI Essay Writer</h1>
<p style="color:#666">Enter your topic and preferences. Get a complete essay in seconds.</p>
<label>Essay Topic or Thesis</label>
<textarea id="topic" rows="3" placeholder="e.g. The impact of social media on mental health in teenagers..."></textarea>
<div class="grid" style="margin-top:12px">
<div>
<label>Essay Style</label>
<select id="style">
<option value="argumentative">Argumentative</option>
<option value="informational">Informational / Expository</option>
<option value="analytical">Analytical</option>
<option value="narrative">Narrative</option>
<option value="persuasive">Persuasive</option>
<option value="compare-contrast">Compare and Contrast</option>
</select>
</div>
<div>
<label>Target Length</label>
<select id="length">
<option value="500">~500 words (short)</option>
<option value="800" selected>~800 words (standard)</option>
<option value="1200">~1200 words (detailed)</option>
<option value="1500">~1500 words (long-form)</option>
</select>
</div>
</div>
<div style="margin-top:12px">
<label>Academic Level</label>
<select id="level">
<option value="high school">High School</option>
<option value="undergraduate" selected>Undergraduate</option>
<option value="graduate">Graduate</option>
<option value="professional">Professional / Business</option>
</select>
</div>
<label style="margin-top:12px">Additional Instructions (optional)</label>
<textarea id="instructions" rows="2" placeholder="e.g. Focus on the US context. Use APA citation style. Include counterarguments."></textarea>
<button class="generate-btn" onclick="generateEssay()">Generate Essay</button>
<div id="essay-output">Your essay will appear here...</div>
<div class="actions" id="action-bar" style="display:none">
<button class="action-btn copy" onclick="copyEssay()">Copy</button>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: false
});
async function generateEssay() {
const topic = document.getElementById('topic').value;
const style = document.getElementById('style').value;
const length = document.getElementById('length').value;
const level = document.getElementById('level').value;
const extra = document.getElementById('instructions').value;
const output = document.getElementById('essay-output');
if (!topic.trim()) {
alert('Please enter an essay topic.');
return;
}
output.textContent = 'Generating your essay... (this takes ~10 seconds for longer essays)';
document.getElementById('action-bar').style.display = 'none';
const systemPrompt = 'You are an expert academic writer. Write a well-structured ' + style + ' essay at a ' + level + ' level. ' +
'Target approximately ' + length + ' words. ' +
'Structure: Introduction with clear thesis, body paragraphs (each with topic sentence, evidence, analysis), conclusion. ' +
'Write in natural, engaging prose. Do not use bullet points. Output only the essay.';
const userPrompt = 'Topic/Thesis: ' + topic + (extra ? '\n\nAdditional instructions: ' + extra : '') + '\n\nWrite the complete essay now.';
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: userPrompt }
]
});
output.textContent = r.choices[0].message.content;
document.getElementById('action-bar').style.display = 'flex';
} catch (err) {
output.textContent = 'Error: ' + err.message;
}
}
function copyEssay() {
navigator.clipboard.writeText(document.getElementById('essay-output').textContent);
document.querySelector('.copy').textContent = 'Copied!';
setTimeout(function() { document.querySelector('.copy').textContent = 'Copy'; }, 2000);
}
</script>
</body>
</html>
SDK Parameters (Critical for GPT-5)
Always include these when using GPT-5 models:
temperature: 1— Required. GPT-5 rejects the default 0.7.max_tokens: 16000— Required. Longer essays need many tokens.- Response:
r.choices[0].message.content
Deploy
Option A: Self-host anywhere (Vercel, Netlify, GitHub Pages).
Option B: Publish on AI Pass catalog — earn 50% commission on every API call your users make.