Skip to content

import React, { useState } from ‘react’;
import axios from ‘axios’;

const AIContentGenerator = () => {
const [apiKey, setApiKey] = useState(”);
const [topic, setTopic] = useState(”);
const [contentType, setContentType] = useState(‘blog’);
const [generatedContent, setGeneratedContent] = useState(”);
const [loading, setLoading] = useState(false);

const generateContent = async () => {
setLoading(true);
try {
const response = await axios.post(‘https://api.openai.com/v1/chat/completions’, {
model: “gpt-3.5-turbo”,
messages: [
{
role: “system”,
content: “You are a helpful content creator that generates high-quality articles.”
},
{
role: “user”,
content: `Write a ${contentType} about ${topic} of approximately 500-700 words`
}
]
}, {
headers: {
‘Authorization’: `Bearer ${apiKey}`,
‘Content-Type’: ‘application/json’
}
});

setGeneratedContent(response.data.choices[0].message.content);
} catch (error) {
console.error(‘Error generating content:’, error);
alert(‘Failed to generate content’);
} finally {
setLoading(false);
}
};

const copyToClipboard = () => {
navigator.clipboard.writeText(generatedContent);
alert(‘Content copied!’);
};

return (

AI Content Generator


setApiKey(e.target.value)}
className=”w-full p-2 border rounded”
placeholder=”Enter your OpenAI API key”
/>

setTopic(e.target.value)}
className=”w-full p-2 border rounded”
placeholder=”Enter topic for content”
/>

{generatedContent && (

Generated Content


)}

);
};

export default AIContentGenerator;

Shares