Asistente de Blogs con
Gemini API

La API de Gemini provee una capa generativa inmensamente potente y generosa. Mediante Prompt Engineering estructurado (System Instructions), podemos obligar al LLM a devolver un artículo perfectamente jerarquizado en Markdown, facilitando la interpolación en nuestro frontend (o CMS remoto).

Inicializando Gemini en el Servidor

Usaremos el SDK oficial @google/generative-ai para asegurar la calidad de la integración:

npm install @google/generative-ai

// server/blog-generator.js
import { GoogleGenerativeAI } from '@google/generative-ai';

// 1. Inicializar la SDK con tu API Key (Mantenida en el server)
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

// 2. Escoger el modelo adecuado 
// (gemini-1.5-flash es ultra rápido y barato. gemini-1.5-pro es mejor para lógica profunda)
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

Construyendo el System Prompt "Blogger"

A diferencia de un chat convencional, aquí inyectamos un formato fuerte. Queremos que el bot no se comunique ("Hola, aquí tienes el artículo:"), sino que emita pura data:

app.post('/api/generate-blog', async (c) => {
    const { topic, keywords } = await c.req.json();

    const promptTemplate = \`
Actúa como un experto Copywriter SEO. Redacta un artículo exhaustivo sobre "\${topic}".
Debes incluir obligatoriamente las siguientes palabras clave a lo largo del texto (marcadas en negrita): \${keywords.join(', ')}.

REGLAS DE FORMATO (Markdown Estricto):
1. No incluyas saludos ni despedidas, genera SÓLO el post.
2. Inicia con un título atractivo en formato Heading 1 (#).
3. Escribe un párrafo de introducción de no más de 50 palabras.
4. Desarrolla el contenido en 3 secciones utilizando Heading 2 (##).
5. Incluye al menos una lista de viñetas (-).
6. Termina con un Heading 3 (###) invitando al usuario a comentar o actuar.
\`;

    try {
        const result = await model.generateContent(promptTemplate);
         // Devuelve el markdown renderizado al cliente
        return c.json({ markdown: result.response.text() });
    } catch (e) {
         return c.json({ error: e.message }, 500);
    }
});

Integrando en el Dashboard (HTML/JS)

El cliente capturará la salida vía fetch y debe transformar el raw Markdown (# Título, **negrita**) en un Editor Visual o parsearlo con librerías como marked.js para previsualizarlo:

<!-- Incluir librería de Markdown Parseo -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
...

<!-- Vista del Editor -->
<div class="border border-gray-700 rounded-xl overflow-hidden shadow-lg bg-gray-900">
    <div class="bg-gray-800 p-3 border-b border-gray-700 flex justify-between">
        <span class="text-sm font-bold text-gray-400">Previsualización del Artículo</span>
        <button id="copyBtn" class="text-xs bg-blue-600 px-3 py-1 rounded text-white font-medium">Copiar HTML</button>
    </div>
    
    <div id="articlePreview" class="p-6 text-gray-300 prose prose-invert w-full max-w-none">
    <!-- El texto markdown renderizado aparecerá aquí. La clase 'prose' de Tailwind estiliza H1, p, ul. -->
    </div>
</div>

<script>
document.getElementById('generateForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const topic = document.getElementById('topic').value;
    const keywords = document.getElementById('keywords').value.split(','); // Convertir a array "kw1, kw2"

    const res = await fetch('/api/generate-blog', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({topic, keywords})
    });
    
    const data = await res.json();
    
    // Convertir el string Markdown devuelto por Gemini en HTML insertable y estilizado
    document.getElementById('articlePreview').innerHTML = marked.parse(data.markdown);
});
</script>

Publicación Directa (Avanzado)

Si manejas un CMS Headless (ej: Strapi, WordPress Headless, Sanity) o repositorios estáticos, puedes añadir un botón Extra llamado "Publicar" que lance el Markdown final a sus correspondientes APIs Rest o commitee los cambios en GitHub Actions utilizando la API de Git Tree. Tu editor IA se vuelve 100% autónomo y el flujo de publicación baja a segundos.