So i waas bored and designed an ai humanizer (ironically enough, i built it with ai [claude sonnet 4.5]). The way i built it you coud put text through multiple times and it would sound more human every time. Source code is below.
UPD: LINK:
v1 https://claude.ai/public/artifacts/f0cc9560-e45b-42a0-9853-7c0e8f445a5b
v2 https://claude.ai/public/artifacts/a7ef9d3f-ea8c-4758-8dd7-500a87fb49f5
Code
import React, { useState } from 'react';
import { Sparkles, Copy, Check, Loader2 } from 'lucide-react';
export default function WritingEnhancer() {
const [inputText, setInputText] = useState('');
const [outputText, setOutputText] = useState('');
const [isProcessing, setIsProcessing] = useState(false);
const [passCount, setPassCount] = useState(0);
const [copied, setCopied] = useState(false);
const [error, setError] = useState('');
const enhanceText = async (textToEnhance, isRerun = false) => {
if (!textToEnhance.trim()) {
setError('Please enter some text to enhance');
return;
}
setIsProcessing(true);
setError('');
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1000,
messages: [
{
role: 'user',
content: `You are a writing enhancement tool that makes text sound more natural, conversational, and human. Analyze the following text and rewrite it to be more engaging and natural while keeping the core meaning intact.
Focus on:
- Varying sentence structure and length
- Adding natural transitions
- Removing overly formal or stiff phrasing
- Making the tone warmer and more conversational
- Using contractions where appropriate
- Adding personality while staying professional
${isRerun ? 'This text has already been enhanced once. Look for any remaining areas that could sound more natural or human-like.' : ''}
Text to enhance:
${textToEnhance}
Provide ONLY the enhanced text without any preamble or explanation.`
}
]
})
});
const data = await response.json();
if (data.content && data.content[0] && data.content[0].text) {
const enhanced = data.content[0].text.trim();
setOutputText(enhanced);
setPassCount(prev => prev + 1);
} else {
setError('Failed to enhance text. Please try again.');
}
} catch (err) {
setError('An error occurred. Please try again.');
console.error(err);
} finally {
setIsProcessing(false);
}
};
const handleEnhance = () => {
setPassCount(0);
enhanceText(inputText, false);
};
const handleEnhanceAgain = () => {
enhanceText(outputText, true);
};
const copyToClipboard = () => {
navigator.clipboard.writeText(outputText);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-8">
<div className="flex items-center justify-center gap-2 mb-2">
<Sparkles className="w-8 h-8 text-purple-400" />
<h1 className="text-4xl font-bold text-white">Writing Style Enhancer</h1>
</div>
<p className="text-purple-200">Make your text more natural, conversational, and engaging</p>
{passCount > 0 && (
<div className="mt-2 inline-block bg-purple-500/20 text-purple-200 px-4 py-1 rounded-full text-sm">
Enhancement Pass: {passCount}
</div>
)}
</div>
{/* Main Content */}
<div className="grid md:grid-cols-2 gap-6">
{/* Input Section */}
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 shadow-2xl">
<h2 className="text-xl font-semibold text-white mb-4">Original Text</h2>
<textarea
value={inputText}
onChange={(e) => setInputText(e.target.value)}
placeholder="Paste your text here..."
className="w-full h-96 bg-white/5 border border-white/20 rounded-xl p-4 text-white placeholder-purple-300/50 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none"
/>
<button
onClick={handleEnhance}
disabled={isProcessing || !inputText.trim()}
className="w-full mt-4 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 disabled:from-gray-500 disabled:to-gray-600 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center justify-center gap-2 shadow-lg"
>
{isProcessing ? (
<>
<Loader2 className="w-5 h-5 animate-spin" />
Enhancing...
</>
) : (
<>
<Sparkles className="w-5 h-5" />
Enhance Text
</>
)}
</button>
</div>
{/* Output Section */}
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 shadow-2xl">
<h2 className="text-xl font-semibold text-white mb-4">Enhanced Text</h2>
<div className="relative">
<textarea
value={outputText}
readOnly
placeholder="Your enhanced text will appear here..."
className="w-full h-96 bg-white/5 border border-white/20 rounded-xl p-4 text-white placeholder-purple-300/50 focus:outline-none resize-none"
/>
{outputText && (
<button
onClick={copyToClipboard}
className="absolute top-2 right-2 bg-white/10 hover:bg-white/20 text-white p-2 rounded-lg transition-all duration-200"
title="Copy to clipboard"
>
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
</button>
)}
</div>
<div className="flex gap-3 mt-4">
<button
onClick={handleEnhanceAgain}
disabled={isProcessing || !outputText}
className="flex-1 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 disabled:from-gray-500 disabled:to-gray-600 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center justify-center gap-2 shadow-lg"
>
{isProcessing ? (
<>
<Loader2 className="w-5 h-5 animate-spin" />
Processing...
</>
) : (
<>
<Sparkles className="w-5 h-5" />
Enhance Again
</>
)}
</button>
</div>
</div>
</div>
{/* Error Message */}
{error && (
<div className="mt-6 bg-red-500/20 border border-red-500/50 text-red-200 px-6 py-4 rounded-xl text-center">
{error}
</div>
)}
{/* Info Section */}
<div className="mt-8 bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
<h3 className="text-lg font-semibold text-white mb-3">How It Works</h3>
<div className="text-purple-200 space-y-2 text-sm">
<p>1. <strong>Paste your text</strong> in the left panel</p>
<p>2. <strong>Click "Enhance Text"</strong> to make it more natural and conversational</p>
<p>3. <strong>Review the results</strong> in the right panel</p>
<p>4. <strong>Click "Enhance Again"</strong> to run another pass for even more refinement</p>
<p className="text-purple-300 mt-4">💡 Tip: Multiple passes help catch increasingly subtle improvements!</p>
</div>
</div>
</div>
</div>
);
}
NOTE: i don’t know if this will work outside of Claude artifacts, so if it doesn’t work, it will be published there soon. alsoo, currently updating, will post new code soon.
