Plantilla de Sitio Web Personal con IA Nativa: Código Abierto Completo

Plantilla de Sitio Web Personal con IA Nativa: Código Abierto Completo

No es otro "sitio de Next.js para currículum". Next.js 16 + React 19 + AI SDK 6 + WebGPU, un sitio personal con el que puedes conversar, generar UI y ver cómo un Agente piensa. Ejecuta con un solo comando, todo el código es de código abierto.

Veamos el resultado

Demo en línea: conorliu.com

Repositorio de código abierto: hyxnj666-creator/ai-site-template

git clone https://github.com/hyxnj666-creator/ai-site-template.git
cd ai-site-template
pnpm install
pnpm dev

Solo necesitas configurar una OPENAI_API_KEY para ejecutarlo. La base de datos es opcional; si no la configuras, automáticamente degrada a archivos JSON.

¿Por qué otra plantilla de sitio web personal

En 2025-2026, los sitios web personales son muy comunes. Despliegue con un clic en Vercel, copiar y pegar de shadcn, algo de animación con Framer Motion, todos parecen similares.

Pero cuando realmente quería poner "capacidad de ingeniería de IA" en mi propio sitio, descubrí que había pocas plantillas a las que referirme:

  • Los sitios de currículum solo apilan contenido estático
  • Los portafolios solo tienen un widget de chatbot
  • La mayoría de las plantillas "nativas de IA" se quedan en los ejemplos oficiales de streamText

Lo que quería era:

Un sitio web personnel que realmente trata a la IA como ciudadana de primera. No una burbuja de chat decorativa, sino donde cada interacción permite que la IA participe, razon y renderice.

Así que hice un conjunto - lo uso yo mismo (conorliu.com) y también lo hice una plantilla de código abierto (ai-site-template), cualquiera puede hacer fork y modificarlo.

En qué se diferencia de otras plantillas de sitios web personales

Veamos primero la navegación en /ai - aquí está la matriz de capacidades de IA del sitio: Neural Chat / Mission Control / Sentient Flow (Workflow) / Knowledge Archive / Protocol Bridge (MCP) / Model Arena / Agent OS Console - cada tarjeta es un módulo de IA completamente funcional:

Vamos a desglosar cada uno.

1. UI Generativa: La IA no solo "habla", sino que también "dibuja"

Sitios web de IA tradicionales: preguntas algo, responde con texto.

Aquí, la IA invoca herramientas y genera componentes UI según tu intención:

  • Dices "cambiar a tema oscuro" → La IA invoca la herramienta cambiarTema, el tema cambia directamente
  • Dices "muéstrame el gráfico de habilidades" → La IA navega a /about y renderiza el gráfico de radar de habilidades
  • Dices "haz una demo de página de inicio de sesión" → El Agente planifica, desglosa pasos, genera HTML Artifact y muestra en tiempo real

Estos no son if-else codificados, son el mecanismo de llamada tool() de AI SDK v6 + un conjunto de instrucciones de UI Generativa definidas en el frontend.

herramienta({
  descripcion: "Cambiar tema del sitio entre claro y oscuro",
  esquemaEntrada: z.object({ tema: z.enum(["claro", "oscuro"]) }),
  ejecutar: async ({ tema }) => {
    return { accion: "tema_cambiado", tema };
  },
});

La IA decide cuándo invocar, el frontend recibe y ejecuta.

2. Control de Misiones de Agente: Ver cómo la IA piensa

/ai/agent es una consola que te permite ver el proceso de ejecución del Agente:

Planificación ▸ Estrategia de análisis de resultados    ✓ Completado
Ejecución ▸ Lista de tareas                         ✓ Completado
           ▸ Generación paralela de 2 resultados auxiliares  ▸ En progreso
Resultados ▸ HTML Artifact                           ✓ Completado
           ▸ Fragmento de Python                      ✓ Completado
Reflexión ▸ Respuesta final                          ✓ Completado

Cada paso llega mediante eventos de servidor en tiempo real, los detalles de los pasos son plegables y rastreables.

Técnicamente se hicieron dos optimizaciones:

  • Programación de modelo en niveles: La planificación y la respuesta final usan gpt-5.4-mini (rápido, barato), los resultados principales (HTML, Python) usan gpt-5.4 (estable, alta calidad)
  • Generación paralela de resultados auxiliares: Múltiples Artifact secundarios se generan simultáneamente con Promise.all, 2-3 veces más rápido que en serie

Ver "visualización de ejecución de Agente" en un sitio web personal, algo que rara vez se ve actualmente.

3. Partículas WebGPU + Constelación Canvas 2D: Dos fondos ejecutándose simultáneamente

Los sitios personales de nivel Awwwards a menudo juegan con efectos de fondo. La mayoría usa Three.js + Shader preexistente.

Aquí se usa una combinación más ligera:

  • Flujo de partículas WebGPU: Shader escrito a mano en WGSL, partículas corriendo en GPU, posición del mouse como entrada de campo de fuerza
  • Conexión de constelación Canvas 2D: Cuando la distancia entre partículas es menor que un umbral, se conectan dinámicamente, ejecutado en CPU
  • Alternativa: Navegadores sin WebGPU (algunas versiones de Safari, Firefox antiguo) automáticamente vuelven a Canvas 2D puro

Dos capas superpuestas, con sensación de profundidad pero sin quitar protagonismo al contenido. En móviles, según matchMedia('(pointer: coarse)') se desactiva automáticamente la capa WebGPU para mantener el rendimiento.

// Fragmento WGSL: partículas atraídas por posición del mouse
let dir = normalize(mouse.xy - particula.pos);
let fuerza = dir * 0.02;
particula.vel = particula.vel + fuerza;
particula.pos = particula.pos + particula.vel;

4. Cursores anónimos múltiples: Como Figma

Abres el sitio y ves cursores flotando en la página - se transmiten mediante SSE, completamente anónimos, sin base de datos.

  • Almacenamiento en memoria para distribución de estado
  • Limitación por conexión (x veces / s) para evitar spam
  • Después de salir, se limpian automáticamente después de 30 segundos

El efecto es similar a los cursores múltiples de Figma, pero en un sitio web personal, da una sensación de "alguien está explorando contigo".

5. Base de conocimiento auto-evolutiva (RAG)

/ai/knowledge es un RAG hecho con pgvector:

  • Artículos, proyectos, currículum divididos regularmente + embedding
  • Al responder preguntas relacionadas en Chat, primero hace búsqueda vectorial
  • Después de agregar/modificar contenido, vuelve a ingerir automáticamente

Esta parte en la plantilla es opcional: sin DATABASE_URL degrada a archivos JSON, sin barreras para empezar; para habilitar RAG se inicia Postgres + pgvector.

6. Arena de Modelos: Comparación lado a lado de GPT vs Claude

/ai/arena es una pequeña herramienta: el mismo prompt se da simultáneamente a OpenAI y Anthropic con retorno en flujo, mostrado lado a lado.

  • Comparación en flujo, no "esperar a que ambos terminen para mostrar"
  • Velocidad, contenido y diferencias de estilo son evidentes de inmediato
  • Se puede cambiar a cualquier proveedor / modelo

Muy útil para quienes quieren evaluar "qué modelo usar realmente".

7. Estudio de Flujo: Editor visual de flujos de trabajo

Basado en @xyflow/react (React Flow) hecho como editor de flujo de trabajo con nodos:

  • Arrastrar nodos, conectar
  • Cada nodo puede ser llamada LLM, llamada a herramienta, ramificación condicional
  • En tiempo de ejecución, ejecuta según orden topológico DAG, resultados en flujo

No está en el sitio personal para usarlo realmente - es para mostrar a los visitantes: "No solo llamo APIs, sé cómo orquestar Agentes".

8. Panel de comandos ⌘K: Principal para amantes del teclado

Basado en cmdk, en cualquier lugar del sitio presionando ⌘K / Ctrl+K se activa, tres modos en un panel:

  • Modo Navegar: Ir a páginas por nombre, escribir "agente" y Enter va a /ai/agent
  • Modo IA: Chatear directamente con IA en el panel, sin salir de la página actual
  • Modo Terminal: Simula terminal, soporta help / clear / tema oscuro comandos

Los amantes del teclado pueden navegar todo el sitio sin tocar el ratón.

9. Chat Multimodal: Texto + Imagen

/ai/chat soporta subir imágenes para preguntar, usando multimodal content parts de AI SDK v6.

Sube una captura: "¿Qué se puede optimizar en esta interfaz?" - devuelve directamente diez sugerencias de mejora.

10. ADN de Programación: GitHub en tiempo real en la página principal

No es poner ![](github-stats.vercel.app), sino usar GitHub GraphQL directamente:

  • Mapa de calor de commits, distribución de lenguajes, repositorios recientes
  • Agregación en servidor y caché, animación de gradiente en frontend
  • Lo que ve el visitante son datos en tiempo real, no capturas estáticas

11. Consola OS de Agente: Cada conversación se puede reproducir

/ai/os es un panel de observabilidad:

  • Sesiones: Lista de todas las sesiones de IA
  • Ejecuciones: Traza completa de cada solicitud (prompt, modelo, tokens, tiempo)
  • Llamadas a Herramientas: qué herramientas se invocaron, parámetros, retornos
  • Artifacts: Cada HTML / Python / Markdown generado

Esencialmente, una versión ligera de plataformas de observabilidad como LangSmith / Helicina integrada en el sitio.

12. Terminal y Evolución: Detalles estéticos para programadores

  • /terminal: Interfaz de terminal completa, soporta decenas de comandos, algunos ejecutan APIs reales, otros son huevos de pascua
  • /evolution: Línea de tiempo auto-evolutiva - actualizaciones de blog, commits de GitHub, cambios en el sitio automáticamente resumidos en un flujo de tiempo, IA genera resumenes semanales periódicamente

Estas páginas no tienen mucho tráfico, pero quienes las ven hacen capturas para redes sociales.

Stack tecnológico

Capa Tecnología
Framework Next.js 16 (App Router, RSC, Server Actions, View Transitions)
Tiempo de ejecución React 19, TypeScript 5 (estricto)
Estilos Tailwind CSS 4 (CSS-first, sin archivo config), next-themes
Animación Motion 12 (Framer Motion), Animaciones CSS de Desplazamiento
IA Vercel AI SDK 6, OpenAI, Anthropic, pgvector
Gráficos WebGPU (WGSL) + Canvas 2D alternativa
Flujo de trabajo @xyflow/react
Panel de comandos cmdk (panel global ⌘K)
Base de datos PostgreSQL 16 + pgvector (opcional)
Monorepo pnpm workspaces + Turborepo

Todo el stack más reciente de 2026. RSC + Server Actions de Next.js 16 se usan extensivamente aquí, muchas interacciones no requieren escribir API route adicional.

Estructura de directorios

ai-site-template/
├── apps/
│   ├── web/                  # Aplicación principal Next.js 16
│   │   ├── src/app/          # App Router (páginas, layouts, API)
│   │   ├── src/components/   # Componentes UI
│   │   ├── src/hooks/        # Hooks personalizados
│   │   └── src/lib/          # Herramientas (autenticación, runtime de IA, limitación)
│   └── worker/               # Ejecutor de tareas en segundo plano
├── packages/
│   ├── ai/                   # Runtime de IA: agentes, chat, arena, flujos, artefactos
│   ├── db/                   # Cliente PostgreSQL, repositorio, esquema
│   ├── ui/                   # Sistema de diseño: tokens, primitivas, compuestos
│   ├── content/              # Texto del sitio, multiidioma, proyectos, datos de línea de tiempo
│   ├── observabilidad/       # Seguimiento de ejecuciones LLM, llamadas a herramientas, sesiones
│   └── config/               # Configuración TS compartida
├── ARCHITECTURA.md           # Manual de arquitectura del sistema
└── CUSTOMIZATION.md          # Cómo personalizar (cambiar nombre, tema, recortar funciones)

Todos los datos de negocio (texto, proyectos, habilidades, línea de tiempo) están centralizados en packages/content/, modificar contenido no requiere buscar en componentes UI.

Comenzando rápido

Entorno

  • Node.js 22+
  • pnpm 10+
  • PostgreSQL 16 + pgvector (opcional)

Ejecutar

git clone https://github.com/hyxnj666-creator/ai-site-template.git
cd ai-site-template
pnpm install
cp .env.example apps/web/.env.local
# Editar apps/web/.env.local, al menos llenar OPENAI_API_KEY
pnpm dev

Abrir http://localhost:3000 para ejecutar completamente.

Variables de entorno principales

Variable Requerida Descripción
OPENAI_API_KEY Sí Clave de OpenAI
OPENAI_CHAT_MODEL Sí Modelo principal (como gpt-5.4)
OPENAI_FAST_CHAT_MODEL No Modelo rápido (como gpt-5.4-mini)
ANTHROPIC_API_KEY Requerido para Arena Clave de Claude
DATABASE_URL No Cadena de conexión Postgres (solo para RAG)
GITHUB_ACCOUNT_USERNAME Sí Para mostrar ADN de Programación
ADMIN_BASIC_AUTH_PASSWORD Sí Contraseña para panel de administración

Cómo hacerlo tuyo

Hay un CUSTOMIZATION.md en la plantilla que explica personalización, esencialmente:

  1. Cambiar texto: packages/content/src-site-copy.ts tiene hero, about, footer juntos
  2. Cambiar proyectos/habilidades/línea de tiempo: packages/content/src/projects.ts, skills.ts, timeline.ts
  3. Cambiar tema: Variables CSS en packages/ui/src/tokens/ para colores, fuentes, radio de brillo
  4. Recortar funciones: ¿No necesitas Arena? Elimina la página /ai/arena y el packages/ai/src/arena/ relacionado, otros módulos son independientes

Diseñado con módulos acoplados sueltamente, eliminar Workflow Studio no hace que Chat falle, eliminar RAG no hace que la página principal falle.

Vista general de páginas

Ruta Contenido
/ Página principal - Hero, Capacidades, ADN de Programación, Pulso de Evolución
/about Acerca de + línea de tiempo profesional
/ai/chat Chat multimodal IA (texto + imagen)
/ai/agent Consola de Control de Misiones de Agente
/ai/workflow Editor visual de flujo de trabajo
/ai/knowledge Base de conocimiento RAG
/ai/arena Arena de modelos (GPT vs Claude)
/ai/mcp Orquestación de herramientas MCP
/ai/os Consola OS de Agente
/evolution Línea de tiempo de crecimiento
/lab Laboratorio
/terminal Interacción tipo terminal
/admin Panel de administración (protegido con HMAC Cookie)

Más de una docena de páginas, cada una es "funcional", no marcadores de posición.

Despliegue

Vercel (recomendado)

npx vercel

Un comando, en línea en 5 minutos.

Auto-despliegue (PM2 + Nginx)

Construir localmente y SCP al servidor, iniciar con pm2:

pnpm build
# En el servidor
pm2 start node_modules/next/dist/bin/next --nombre-sitio-web-ia -- start -p 3000

Mi propio conorliu.com se despliega así, pasos detallados en DEPLOY.md del repositorio.

Auto-despliegue incluye un pequeño detalle: configurar proxy global fetch con ProxyAgent de undici, servidores en China pueden llamar a OpenAI / Anthropic de forma estable.

Para quién es

  • Desarrolladores frontend/fullstack: Quieren un sitio personal "impecable", hacer fork directamente
  • Candidatos a trabajos en IA: Demostrar capacidad de ingeniería de IA, un sitio vale diez currículums
  • Desarrolladores independientes: Portafolio + blog + asistente de IA integrados
  • Estudiantes de AI SDK v6 / Next.js 16: Un proyecto funcional completo es más intuitivo que documentación
  • Creadores de contenido técnicos: Tener "propia plataforma de demostración de IA"

Otros detalles fácilmente ignorados

No son secciones de "puntos de venta", pero son detalles que hacen que quienes los usan digan "esto está muy bien hecho":

  • Degradación doble de backend: Sin DATABASE_URL el sitio funciona normalmente - todos los Repositorios implementan versión DB y JSON File, tiempo de ejecución cambia según entorno. Clave para "fork sin barreras"
  • Migración automática de Schema: Todo DDL es CREATE IF NOT EXISTS, primera ejecución crea tablas automáticamente, no necesita scripts migrate
  • Contador anónimo de visitantes en tiempo real: Punto pequeño + número real en pie de página, SSE, sin PII almacenado
  • Panel de administración con seguridad real: Cookie HTTP-only firmada con HMAC-SHA256 + comparación de tiempo constante, no simple password === xxx
  • Proxy global fetch: instrumentation.ts usa ProxyAgent de undici para dispatcher global, ECS en China puede llamar a OpenAI / Anthropic de forma estable. Este problema lo entienden quienes se auto-despliegan en China
  • Proceso Worker en segundo plano: apps/worker/ es proceso PM2 independiente, ejecuta sincronización GitHub, captura blog, generación de resumenes. Proceso principal no bloqueado, fallos de tareas no afectan páginas
  • Animaciones de Desplazamiento + View Transitions: Usa APIs nativas del navegador, no GSAP / Lenis. Ampliación de fuente en Hero, transiciones de deformación de tarjeta en cambio de ruta son CSS
  • IA puede disparar cambios UI: Dices "cambia a oscuro", el tema realmente cambia; dices "navega a about", realmente salta - mediante useAIActions eventos tool-result de IA se conectan a router.push / setTheme frontend
  • Validación Zod de todos los límites I/O: Parámetros de API, inputSchema de herramienta IA, estructura Artifact, todo Zod. Seguridad de tipo desde TS hasta tiempo de ejecución
  • Degradación automática en móvil: matchMedia('(pointer: coarse)') determina, WebGPU desactivado, múltiples cursores cerrados, animación simplificada en móvil para mantener fluidez

Algunas decisiones de diseño

¿Por qué Next.js 16 + React 19, en lugar de versiones más estables 14/18

Porque RSC y Server Actions son realmente útiles en escenarios de IA:

  • Server Action espera directamente stream de IA, sin escribir API route
  • RSC puede almacenar "contenido generado por IA" como parte del árbol de componentes
  • View Transitions API hace transiciones de página en cambio de ruta, esa sensación Awwwards viene de aquí

El代价 es que algunas librerías de terceros aún no han actualizado, a veces necesita modificar peer deps. Vale la pena.

¿Por qué usar WebGPU nativo en lugar de Three.js

Three.js es muy pesado, una escena pesa 400KB+. Aquí solo se necesita un flujo de partículas, Shader escrito a mano en WGSL + WebGPU nativo, menos de 15KB después de gzip. Sin WebGPU automáticamente degrada a Canvas 2D, 0 dependencias en el cliente.

¿Por qué pgvector en lugar de Pinecone / Weaviate

Porque es una extensión de Postgres. Ya necesito Postgres para datos de negocio, instalar una extensión da búsqueda vectorial, sin mantener servicio externo. Además, para volúmenes de datos de sitio personal (miles a decenas de miles de fragmentos), el rendimiento es suficiente.

Licencia de código abierto

MIT.

Haz fork, modifica, usa comercialmente como quieras. El único requisito: no pongas mi nombre dentro para hacerte pasar por ti mismo. 😄

Dirección del proyecto

  • GitHub: hyxnj666-creator/ai-site-template
  • Demo en vivo: conorliu.com
git clone https://github.com/hyxnj666-creator/ai-site-template.git

Si te parece interesante, dale una ⭐ o un like, es mi motivación para seguir iterando.

Etiquetas: Next.js React IA WebGPU Desarrollo Web

Publicado el 6-3 16:44

Etiquetas populares

©2026 Friki Work