Creation Path

Transformando una Single Page Application mockeada en una plataforma real de desarrollo asistido por IA.

Plan de Implementación Técnica - Abril 2026

Resumen Ejecutivo

Estado Actual

  • SPA completamente del lado del cliente (React 18 + CDN + Babel standalone).
  • Lógica de scaffolding, agente de código, skills de editor y despliegue son simulaciones (mocks).
  • No existe backend, servidor MCP real ni llamadas a IA reales.

Estado Objetivo

  • Plataforma real de scaffolding y edición de proyectos asistida por IA.
  • Backend Node.js/Express, Servidor MCP real, Agente Hermes y Claude Code API.
  • Frontend con Vite + React + TypeScript, con comunicación en tiempo real.

Cronograma General

  • Duración Total: ~10 semanas (1 desarrollador).
  • Con equipo (2-3 devs): ~5-6 semanas (por paralelización).
  • Fase más crítica: Fase 1 – Backend (prerrequisito).
  • Mayor complejidad: Fase 2 – MCP Server (14 tools, schemas, integración AI).
  • Mayor riesgo hardware: Fase 3 – Hermes (requiere mínimo 16 GB RAM).

Fases Clave de Implementación

Fase 1: Backend + Template Repository

Implementación del servidor Node.js/Express con Apollo GraphQL, conectividad MySQL (Sequelize) y un repositorio Git de plantillas de proyecto reales.

  • Monorepo pnpm, Node.js 20, Express 5, Apollo Server.
  • MySQL 8 externo, Sequelize ORM.
  • Endpoints REST y GraphQL para scaffolding y gestión de proyectos.

Fase 2: MCP Skills Server

Desarrollo de un servidor Model Context Protocol (MCP) real que expone 14 herramientas (skills) de generación de código asistidas por IA.

  • SDK oficial @modelcontextprotocol/sdk.
  • Tools con schemas Zod validados.
  • Integración con Anthropic API (Claude Haiku/Sonnet).

Fase 3: Agente Hermes

Integración de Nous-Hermes 3 (vía Ollama) como el motor de razonamiento principal del agente de IA, ofreciendo respuestas locales y de bajo costo.

  • Modelo Nous-Hermes 3 (8B) local en Ollama.
  • Ventana de contexto de 128K tokens.
  • Streaming de respuestas y formato JSON nativo.

Fase 4: Claude Code API

Habilitación de la ejecución real de ediciones y creación de archivos en el directorio de trabajo del usuario mediante el SDK de Claude Code CLI.

  • Agente CLI @anthropic-ai/claude-code.
  • Ediciones quirúrgicas, comprensión de codebase.
  • Stream de eventos y diffs en tiempo real vía WebSocket.

Stack Tecnológico Objetivo

Frontend

Vite + React 18 + TypeScript

Sistema de build real, type safety, gestión de módulos.

Backend API

Node.js 20 + Express 5 + Apollo Server

Capa API única y tipada (GraphQL) con endpoints REST complementarios.

Base de Datos

MySQL 8 (externo) + Sequelize 6 ORM

ORM maduro, desacoplado del backend, escalable.

Servidor MCP

@modelcontextprotocol/sdk 1.x

SDK oficial para tools con schemas Zod validados.

Agente IA

Nous-Hermes 3 (8B) vía Ollama

Modelo local, sin latencia ni costo por token, 128K context.

Ejecución de Código

Claude Code CLI SDK

Edición real de archivos, comprensión de codebase, loops agenticos.

Templates

Git bare repository (local)

Versionado, fácil clonado, diff nativo.

Comunicación RT

WebSocket puro

Diffs en vivo del agente sin overhead.

Hitos del Cronograma

Fin Semana 2

Fase 1 completa: Backend + GraphQL + MySQL funcionando, scaffolding real, editor mostrando archivos reales.

Fin Semana 4

MCP básico funcional: Al menos 5+ skills reales aplicables desde el editor.

Fin Semana 6

MCP completo: Las 14 skills implementadas y testeadas con proyectos reales.

Fin Semana 7

Hermes integrado: Agente responde con Hermes, streaming en chat, acciones ejecutadas.

Fin Semana 8

Claude Code integrado: Ediciones reales de archivos desde el agente, diffs en vivo.

Fin Semana 10

MVP production-ready: Sistema completo, testeado, documentado, listo para uso real.

Contacta al Equipo del Proyecto