Build a Grammar Fixer App with AI Pass SDK
Build a Grammar Fixer App with AI Pass SDK
Learn how to build an AI-powered grammar and spelling correction application using the AI Pass platform. This tutorial covers everything from signup to deployment.
Prerequisites
- Basic knowledge of HTML, CSS, and JavaScript
- A code editor (VS Code, Sublime Text, etc.)
- A modern web browser
Step 1: Sign Up for AI Pass
- Go to AI Pass
- Click "Sign Up" and create your account
- You'll receive $1 free credit on signup to test the platform
Step 2: Get Your Client ID
- Navigate to the Developer Dashboard
- Go to OAuth2 Clients section
- Click "Create New Client"
- Give your app a name (e.g., "My Grammar Fixer")
- Copy your Client ID — you'll need this for the SDK
Important: Keep your Client ID secure. In production, use environment variables.
Step 3: Include the AI Pass SDK
Add the AI Pass SDK to your HTML file:
<script src="https://aipass.one/aipass-sdk.js"></script>
Step 4: Initialize the SDK
Initialize the SDK with your Client ID and enable user authentication:
// Initialize AI Pass SDK
const client = new AiPass({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true // Requires users to log in to use your app
});
// Check if user is authenticated
client.on('ready', () => {
console.log('SDK ready, user authenticated:', client.isAuthenticated());
});
Step 5: Create the Grammar Fixer Function
Use the AI Pass API to fix grammar, spelling, and punctuation errors:
async function fixGrammar(text, mode) {
try {
// Check user credits before processing
const credits = await client.getUserCredits();
if (credits.available < 1) {
alert('Not enough credits. Please upgrade your plan.');
return null;
}
// Define the correction mode
const modeInstructions = {
'basic': 'Fix only grammar, spelling, and punctuation errors. Preserve the original style and tone.',
'professional': 'Correct errors AND improve for professional business communication. Make it more formal and polished.',
'creative': 'Fix errors AND enhance for creative writing. Improve flow and engagement.',
'academic': 'Fix errors AND adapt for academic writing. Use formal, scholarly language.',
'casual': 'Fix errors AND make it more natural and conversational.'
};
// Call the grammar correction model via AI Pass
const result = await client.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{
role: 'system',
content: `You are an expert grammar and writing assistant. ${modeInstructions[mode] || modeInstructions['basic']} Provide corrections in this JSON format: {"correctedText": "corrected version", "corrections": [{"original": "original text", "corrected": "corrected text", "type": "grammar|spelling|punctuation|style", "explanation": "why this change"}]}`
},
{
role: 'user',
content: `Fix this text: ${text}`
}
]
});
return result;
} catch (error) {
console.error('Error fixing grammar:', error);
throw error;
}
}
Critical: Always include temperature: 1 and max_tokens: 16000 when using GPT-5 models. The SDK defaults (temperature: 0.7, max_tokens: 1000) are incompatible with GPT-5's reasoning process and will result in empty responses.
Step 6: Build the User Interface
Create a simple HTML interface:
<!DOCTYPE html>
<html>
<head>
<title>Grammar Fixer</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
.container { display: flex; gap: 20px; }
.input-section, .output-section { flex: 1; }
textarea { width: 100%; height: 300px; padding: 10px; font-family: Arial, sans-serif; }
.controls { margin: 20px 0; }
select, button { padding: 10px; margin: 5px; }
#corrections { background: #f9f9f9; padding: 15px; border-radius: 5px; }
.correction { margin: 10px 0; padding: 10px; background: white; border-left: 3px solid #007bff; }
.correction-type { font-weight: bold; color: #007bff; }
</style>
</head>
<body>
<h1>AI Grammar Fixer</h1>
<div class="controls">
<select id="correctionMode">
<option value="basic">Basic (errors only)</option>
<option value="professional">Professional</option>
<option value="creative">Creative</option>
<option value="academic">Academic</option>
<option value="casual">Casual</option>
</select>
<button onclick="fixText()">Fix Grammar</button>
<button onclick="copyResult()">Copy Result</button>
</div>
<div class="container">
<div class="input-section">
<h3>Original Text</h3>
<textarea id="inputText" placeholder="Paste or type your text here..."></textarea>
</div>
<div class="output-section">
<h3>Corrected Text</h3>
<textarea id="outputText" readonly placeholder="Corrected text will appear here..."></textarea>
</div>
</div>
<div id="corrections"></div>
<script src="https://aipass.one/aipass-sdk.js"></script>
<script>
const client = new AiPass({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true
});
async function fixText() {
const inputText = document.getElementById('inputText').value;
const mode = document.getElementById('correctionMode').value;
const outputText = document.getElementById('outputText');
const correctionsDiv = document.getElementById('corrections');
if (!inputText.trim()) {
alert('Please enter some text to fix');
return;
}
outputText.value = 'Fixing grammar...';
correctionsDiv.innerHTML = '';
try {
const result = await fixGrammar(inputText, mode);
const data = JSON.parse(result.choices[0].message.content);
outputText.value = data.correctedText;
if (data.corrections && data.corrections.length > 0) {
correctionsDiv.innerHTML = '<h3>Corrections Made:</h3>';
data.corrections.forEach(correction => {
correctionsDiv.innerHTML += `
<div class="correction">
<span class="correction-type">${correction.type}</span>
<p><strong>Original:</strong> "${correction.original}"</p>
<p><strong>Corrected:</strong> "${correction.corrected}"</p>
<p><em>${correction.explanation}</em></p>
</div>
`;
});
}
} catch (error) {
outputText.value = 'Error: ' + error.message;
}
}
function copyResult() {
const outputText = document.getElementById('outputText');
outputText.select();
document.execCommand('copy');
alert('Copied to clipboard!');
}
async function fixGrammar(text, mode) {
// ... (function from Step 5)
}
</script>
</body>
</html>
Step 7: Deployment Options
Option A: Self-Host Anywhere
Deploy your app to any web hosting service:
- Netlify - Drag and drop your HTML file
- Vercel - Connect your Git repository
- GitHub Pages - Free hosting for static sites
- Your own server - Nginx, Apache, or any web server
Option B: Publish on AI Pass Catalog
Publish your app to the AI Pass marketplace and earn revenue:
- In the Developer Dashboard, go to My Apps
- Click "Publish to Catalog"
- Set your pricing (per-use or subscription)
- Submit for review
- Once approved, your app appears in the catalog
Earning Opportunity: You earn 50% commission on all revenue generated through the AI Pass catalog. This includes revenue from users who discover your app through the marketplace.
Step 8: Test Your App
- Open your app in a browser
- Sign in with your AI Pass account (or create one)
- Enter text with grammar errors
- Select a correction mode
- Verify the corrections work
- Test different modes and text types
Complete Example Code
For a complete working example, check out the AI Pass SDK documentation.
Next Steps
- Add support for multiple languages
- Implement document upload (DOCX, PDF)
- Add plagiarism detection
- Create style guide templates
- Publish to the catalog to earn revenue
- Explore other AI Pass models and APIs
Perfect your writing with AI-powered grammar checking! ✍️✅