AI Logo Generator
setBusinessName(e.target.value)} className="border p-2 rounded w-full max-w-md mb-4" /> setStylePrompt(e.target.value)} className="border p-2 rounded w-full max-w-md mb-4" /> {error &&{error}
} {logoUrl && (Here is your logo:
// Install dependencies:
// npm install next react react-dom openai tailwindcss axios
// ./pages/index.js
import { useState } from 'react';
import axios from 'axios';
export default function Home() {
const [businessName, setBusinessName] = useState(");
const [stylePrompt, setStylePrompt] = useState(");
const [logoUrl, setLogoUrl] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const generateLogo = async () => {
setLoading(true);
setError(null);
try {
const resp = await axios.post('/api/generate-logo', {
businessName,
stylePrompt
});
setLogoUrl(resp.data.url);
} catch (err) {
setError(err.response?.data?.error || 'Unexpected error');
} finally {
setLoading(false);
}
};
return (
)}
);
}
// ./pages/api/generate-logo.js
import { Configuration, OpenAIApi } from 'openai';
const config = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);
export default async function handler(req, res) {
if (req.method !== 'POST') {
res.setHeader('Allow', 'POST');
return res.status(405).json({ error: 'Method not allowed' });
}
const { businessName, stylePrompt } = req.body;
if (!businessName) {
return res.status(400).json({ error: 'Business name is required' });
}
try {
const prompt = `Create a high-resolution logo for a business called "${businessName}". Style: ${stylePrompt || 'clean and modern'}, transparent background.`;
const response = await openai.createImage({
prompt,
n: 1,
size: '512×512',
});
const url = response.data.data[0].url;
res.status(200).json({ url });
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Generation failed' });
}
}
// ./tailwind.config.js
module.exports = {
content: ['./pages/**/*.{js,jsx}', './components/**/*.{js,jsx}'],
theme: { extend: {} },
plugins: [],
};
// .env.local (do not commit)
// OPENAI_API_KEY=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
