mini-app-builder.html•7.04 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base Mini App Builder</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 20px; background: #000; color: #fff; }
.container { max-width: 800px; margin: 0 auto; }
.header { text-align: center; margin-bottom: 40px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #333; border-radius: 5px; background: #111; color: #fff; }
button { background: #0052FF; color: white; padding: 12px 24px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
button:hover { background: #003dbf; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.feature { display: flex; align-items: center; }
.feature input { width: auto; margin-right: 8px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚀 Base Mini App Builder</h1>
<p>Create your Base mini app in minutes</p>
</div>
<form id="builderForm">
<div class="form-group">
<label for="projectName">Project Name</label>
<input type="text" id="projectName" name="projectName" placeholder="My Awesome Mini App" required>
</div>
<div class="form-group">
<label for="appType">App Type</label>
<select id="appType" name="appType" required>
<option value="nextjs">Next.js (Base Mini App Standard)</option>
</select>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" name="description" placeholder="A Base mini app that..." rows="3" required></textarea>
</div>
<div class="form-group">
<label for="category">Category</label>
<select id="category" name="category" required>
<option value="games">Games</option>
<option value="social">Social</option>
<option value="finance">Finance</option>
<option value="utility">Utility</option>
<option value="productivity">Productivity</option>
<option value="health-fitness">Health & Fitness</option>
<option value="news-media">News & Media</option>
<option value="music">Music</option>
<option value="shopping">Shopping</option>
<option value="education">Education</option>
<option value="developer-tools">Developer Tools</option>
<option value="entertainment">Entertainment</option>
<option value="art-creativity">Art & Creativity</option>
</select>
</div>
<div class="form-group">
<label>Features</label>
<div class="features">
<div class="feature">
<input type="checkbox" id="auth" name="features" value="authentication">
<label for="auth">Authentication</label>
</div>
<div class="feature">
<input type="checkbox" id="wallet" name="features" value="wallet_connect">
<label for="wallet">Wallet Connect</label>
</div>
<div class="feature">
<input type="checkbox" id="transactions" name="features" value="transactions">
<label for="transactions">Transactions</label>
</div>
<div class="feature">
<input type="checkbox" id="notifications" name="features" value="notifications">
<label for="notifications">Notifications</label>
</div>
<div class="feature">
<input type="checkbox" id="sharing" name="features" value="sharing">
<label for="sharing">Sharing</label>
</div>
<div class="feature">
<input type="checkbox" id="baseAccount" name="features" value="base_account">
<label for="baseAccount">Base Account</label>
</div>
</div>
</div>
<div class="form-group">
<label for="coinbaseApiKey">Coinbase Developer API Key</label>
<input type="text" id="coinbaseApiKey" name="coinbaseApiKey" placeholder="Get from https://portal.cdp.coinbase.com/" required>
<small style="color: #666; font-size: 12px;">Required for Base mini app functionality</small>
</div>
<div class="form-group">
<label for="outputDir">Output Directory</label>
<input type="text" id="outputDir" name="outputDir" placeholder="./" value="./">
</div>
<button type="submit">Create Mini App</button>
</form>
<div id="result" style="margin-top: 30px; padding: 20px; background: #111; border-radius: 5px; display: none;">
<h3>Result</h3>
<pre id="resultText"></pre>
</div>
</div>
<script>
document.getElementById('builderForm').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = {
project_name: formData.get('projectName'),
app_type: formData.get('appType'),
description: formData.get('description'),
category: formData.get('category'),
features: formData.getAll('features'),
coinbase_api_key: formData.get('coinbaseApiKey'),
output_directory: formData.get('outputDir')
};
try {
// This would normally call the MCP server
// For demo purposes, we'll show the data that would be sent
document.getElementById('result').style.display = 'block';
document.getElementById('resultText').textContent = JSON.stringify(data, null, 2);
} catch (error) {
document.getElementById('result').style.display = 'block';
document.getElementById('resultText').textContent = 'Error: ' + error.message;
}
});
</script>
</body>
</html>