🎤 GhostWriter AI

Convierte tus ideas en voz a contenido listo para publicar en X, LinkedIn y Notion

Demo en vivo: 🔗 Ver Demo

---

✨ Características Destacadas

• 🎤 Transcripción en tiempo real: Web Speech API del navegador, sin APIs externas
• 📊 Visualizador de audio: Visualización en vivo con waviz mientras grabas
• ⚡ Streaming de contenido: Ve el contenido generarse en tiempo real (Chrome/Edge)
• 🤖 IA avanzada: AWS Bedrock con Claude 3.5 Sonnet para generación inteligente
• 📱 3 formatos automáticos: Hilos para X, posts para LinkedIn, notas en Markdown
• 🎨 Diseño moderno: UI minimalista estilo Vercel
• 🔒 100% en el navegador: Sin instalaciones, sin descargas de modelos
• 💰 Gratis: Sin suscripciones, sin límites ocultos

🚀 Demo

Nota: Agrega screenshots o un GIF aquí mostrando el flujo completo

1. Graba tu pensamiento (1-2 minutos)
2. Ve la transcripción en tiempo real
3. Observa cómo se genera el contenido progresivamente
4. Copia y publica en tu plataforma favorita

🛠️ Tech Stack

Frontend

• Next.js 16 (App Router, Turbopack)
• React 19 + TypeScript
• Tailwind CSS 4 + shadcn/ui
• waviz - Visualizador de audio en tiempo real

Backend & AI

• AWS Bedrock - Claude 3.5 Sonnet
• Web Speech API - Transcripción en el navegador
• Server-Sent Events (SSE) - Streaming de respuestas

Características Técnicas

• ✅ Streaming en tiempo real (SSE)
• ✅ Transcripción progresiva
• ✅ Visualización de audio con Web Audio API
• ✅ Diseño responsive
• ✅ Dark mode support

Instalación

# Instalar dependencias
bun install
# o
npm install

# Configurar variables de entorno (requerido para generación de contenido)
cp env.example .env.local
# Edita .env.local con tus credenciales AWS

# Iniciar servidor de desarrollo
bun dev
# o
npm run dev

Abre http://localhost:3000 en tu navegador.

Uso

1. Graba tu pensamiento: Haz clic en el botón grande de grabar y habla durante 1-2 minutos
2. Transcripción automática: El navegador transcribe en vivo con la Web Speech API
3. Generación de contenido: La transcripción se transforma en 3 formatos usando IA
4. Copia y pega: Usa los botones de copiar en cada tab para usar el contenido donde necesites

Transcripción (Sin Configuración)

La transcripción usa la Web Speech API del navegador:

• No requiere API keys ni descargas
• Funciona en Chrome, Edge y Safari (Firefox no soporta SpeechRecognition)
• Sin modelos que descargar

Generación de Contenido (Requiere AWS)

Para generar los 3 formatos de contenido necesitas configurar AWS Bedrock:

• Requiere credenciales AWS
• Usa Claude 3.5 Sonnet (alta calidad)
• Genera los 3 formatos simultáneamente con streaming
• Proceso de 2 pasos: primero genera un prompt optimizado, luego el contenido

Configuración AWS

Necesitas AWS Bedrock configurado para generar contenido. La transcripción funciona sin AWS.

Variables de Entorno

# AWS Configuration (requerido para generación de contenido)
AWS_REGION=us-east-1
AWS_ACCESS_KEY_ID=tu_access_key
AWS_SECRET_ACCESS_KEY=tu_secret_key

Configurar AWS Bedrock

1. Crea una cuenta en AWS
2. Habilita Bedrock en tu región
3. Solicita acceso a Claude 3 Haiku
4. Crea credenciales IAM con permisos para Bedrock
5. Agrega las credenciales a .env.local

Estructura del Proyecto

src/
├── app/
│   ├── api/
│   │   └── ghostwrite/     # API para transformar transcripciones
│   └── page.tsx            # Página principal (GhostWriter)
├── components/
│   ├── GhostWriter.tsx     # Componente principal
│   └── ui/                 # Componentes UI (shadcn/ui)
└── lib/
    ├── web-speech.ts       # Transcripción con Web Speech API
    └── aws/
        └── bedrock.ts      # Helper para AWS Bedrock

Scripts

bun dev      # Servidor de desarrollo
bun build    # Build de producción
bun start    # Ejecutar build de producción
bun lint     # Linting

🔄 Flujo de Trabajo

1. Grabar: Haz clic en el botón de grabar y habla 1-2 minutos
   • Visualizador de audio muestra las ondas en tiempo real
   • Transcripción aparece progresivamente mientras hablas
2. Detener: Al detener, se procesa la transcripción final
3. Generación (2 pasos):
   • Paso 1: La IA genera un prompt optimizado (streaming)
   • Paso 2: Usa ese prompt para generar el contenido (streaming)
4. Resultados: Se muestran en 4 tabs:
   • Prompt generado (transparente, puedes ver qué se usó)
   • Hilo para X (Twitter)
   • Post para LinkedIn
   • Nota en Markdown

📸 Screenshots

Agrega screenshots aquí:

• Vista de grabación con visualizador
• Transcripción en tiempo real
• Contenido generado en tabs

🎯 Por qué construí esto

Esta herramienta resuelve el problema de tener ideas pero no tiempo para escribirlas. Permite:

• Capturar pensamientos rápidamente mientras están frescos
• Generar contenido optimizado para cada plataforma automáticamente
• Ahorrar tiempo en la creación de contenido

🚧 Limitaciones

• Streaming solo funciona en Chrome y Edge (otros navegadores muestran el resultado al finalizar)
• Requiere permisos de micrófono
• La generación de contenido requiere AWS Bedrock configurado

📝 Notas Adicionales

• Compatibilidad: La transcripción funciona en Chrome, Edge y Safari. Firefox no soporta SpeechRecognition.
• Streaming: El streaming en tiempo real funciona mejor en Chrome y Edge
• Sin modelos locales: Todo se hace con APIs del navegador y AWS
• Costo: AWS Bedrock cobra por uso. Claude 3.5 Sonnet es económico para este caso de uso.

🤝 Contribuciones

Las contribuciones son bienvenidas. Siéntete libre de abrir un issue o PR.

📄 Licencia

MIT

---

Hecho con ❤️ usando Next.js, React y AWS Bedrock