Imagina tu web con una IA integrada: un chatbot inteligente, un generador de contenido automático, o un asesor virtual. Todo es posible con Claude API.
En este tutorial aprenderás a conectar Claude directamente a tu aplicación web, del backend al frontend, con ejemplos reales para beauty business.
Primero necesitas credenciales para usar Claude API.
console.anthropic.comAPI Keys (generalmente en el menú izquierdo)+ Create Keysk-ant-v0-1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t
Tu API key es como una contraseña maestra. Nunca la publiques en GitHub, en frontend code, o en redes sociales. Siempre usala en tu backend.
Crearemos un endpoint que tu frontend usará para hablar con Claude.
npm install @anthropic-ai/sdk
const express = require('express');
const Anthropic = require('@anthropic-ai/sdk');
const app = express();
app.use(express.json());
const client = new Anthropic({
apiKey: process.env.ANTHROPIC_API_KEY,
});
// Endpoint para generar contenido
app.post('/api/generate-content', async (req, res) => {
const { topic, style } = req.body;
try {
const message = await client.messages.create({
model: 'claude-sonnet-4-20250514',
max_tokens: 1024,
messages: [
{
role: 'user',
content: `Genera un post para redes sociales sobre: ${topic}
Estilo: ${style}
Incluye: Texto principal + Hashtags + Emoji`
}
]
});
res.json({
success: true,
content: message.content[0].text
});
} catch (error) {
res.status(500).json({
success: false,
error: error.message
});
}
});
app.listen(3000, () => {
console.log('Servidor escuchando en puerto 3000');
});ANTHROPIC_API_KEY=sk-ant-v0-xxxxxxxxxxxx
No subas el .env a GitHub. En tu plataforma de hosting, ve a Settings → Environment Variables y agrega ANTHROPIC_API_KEY ahí.
Ahora haremos que tu página web hable con tu backend.
<form id="contentForm">
<input
type="text"
id="topic"
placeholder="Tema (ej: Tratamiento facial)"
>
<select id="style">
<option>Profesional</option>
<option>Casual</option>
<option>Viral</option>
</select>
<button type="submit">Generar Contenido</button>
</form>
<div id="result" style="display:none;">
<h3>Contenido Generado:</h3>
<p id="generatedContent"></p>
</div>
<script>
document.getElementById('contentForm').addEventListener('submit', async (e) => {
e.preventDefault();
const topic = document.getElementById('topic').value;
const style = document.getElementById('style').value;
try {
const response = await fetch('/api/generate-content', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ topic, style })
});
const data = await response.json();
if (data.success) {
document.getElementById('generatedContent').textContent = data.content;
document.getElementById('result').style.display = 'block';
} else {
alert('Error: ' + data.error);
}
} catch (error) {
console.error('Error:', error);
}
});
</script>const systemPrompt = `Eres Nadia, asesora de belleza de un salón.
Tu rol: responder preguntas sobre tratamientos, precios y agendar citas.
Tono: amable, experto, cercano.`;
// En tu endpoint de chat:
const message = await client.messages.create({
model: 'claude-sonnet-4-20250514',
max_tokens: 512,
system: systemPrompt,
messages: [
{ role: 'user', content: userMessage }
]
});El cliente entra en tu web, responde un cuestionario y Claude genera una propuesta personalizada.
Después de una cita, Claude genera un email personalizado con consejos de cuidado específicos del tratamiento realizado.
Tus clientes dejan reviews, Claude los analiza y te sugiere mejoras.
// Limita a 5 generaciones/día por usuario
const userGenerations = {}; // O usa una BD real
app.post('/api/generate', (req, res) => {
const userId = req.user.id;
if (!userGenerations[userId]) {
userGenerations[userId] = 0;
}
if (userGenerations[userId] >= 5) {
return res.status(429).json({
error: 'Límite diario alcanzado'
});
}
// Proceder con generación...
userGenerations[userId]++;
});ANTHROPIC_API_KEYnetlify/functionsPara mejor UX, usa streaming: en lugar de esperar a que Claude termine la respuesta, muestra el texto caractér por caractér mientras se genera. Aquí está:
// En tu endpoint con streaming
stream: true,
Luego en frontend escuchas los eventos de stream y actualizas la UI en tiempo real. ¡Más rápido y profesional!