Conocimiento · 09

MCP y contenido dinámico: una web que se actualiza sin desplegar

Model Context Protocol (MCP) es el estándar que permite que clientes de IA accedan a recursos, prompts y herramientas de forma uniforme. Aplicado a este portal, convierte catálogos estáticos (modelos, patrones, roles) en contenido vivo curado desde un servidor.

Concepto

Qué es MCP en una frase

MCP separa contexto de cliente. Un servidor MCP expone resources (documentos o datos), prompts (plantillas reusables) y tools (operaciones invocables). Un cliente MCP — sea Claude, un IDE o una web — los consume con permisos explícitos y sin duplicar integraciones.

Para NoumorDevs, el beneficio es directo: el catálogo de modelos, los roles y los patrones pueden vivir fuera del frontend y actualizarse al ritmo del mercado, sin recompilar ni desplegar la web.

Arquitectura

Cómo se integra en esta web

Las páginas consumen ContentService, que expone datos como ContentSource<T> con metadata (key, updatedAt, origin). Hoy el origin es static: los datos vienen de TypeScript. Mañana, tras conectar un servidor MCP, el origin pasa a mcp sin cambiar los componentes.

El McpContentAdapter es el único punto que habla el protocolo. Se puede intercambiar por una implementación real (@modelcontextprotocol/sdk) sin tocar nada más.

src/app/core/content/mcp-content.adapter.tstypescript

@Injectable({ providedIn: 'root' })
export class McpContentAdapter {
  // Placeholder: en producción se sustituye por un cliente real
  //   @modelcontextprotocol/sdk
  async fetch<T>(key: string): Promise<McpPayload<T> | null> {
    if (!this.endpoint) return null;
    const res = await this.client.readResource({ uri: key });
    return { data: res.contents as T, updatedAt: res.meta.updatedAt };
  }
}

Estático vs dinámico

Qué vive dónde

Contenido estático

Conceptos estables: Spec-Driven Development, arquitectura, patrones clásicos, principios de calidad.

Cambia raramente

Definiciones y principios
Diagramas conceptuales
Patrones arquitectónicos

Contenido dinámico (MCP-ready)

Información que envejece rápido y se beneficia de curación externa.

Se refresca desde MCP

nm://models — catálogo de modelos
nm://roles — definiciones de roles y skills
nm://patterns — patrones de IA emergentes
nm://roadmap — rutas de aprendizaje

Implementación

Cómo quedaría conectado en producción

1. Un servidor MCP (Node/Python) expone los recursos anteriores. Los resource IDs siguen el esquema nm://<dominio>.

2. Un pipeline de ingesta curado (repos Git, APIs de proveedores, fuentes verificadas) mantiene los recursos actualizados con revisión humana.

3. El frontend arranca con snapshot estático y, si hay servidor configurado, refresca vía ContentService.refreshFromMcp(key).

4. Un indicador visual muestra el origen y la fecha de cada dataset, para que el lector sepa si lee snapshot o datos recientes.

Uso desde una páginatypescript

// Dentro de ModelsPage
private readonly content = inject(ContentService);
private readonly source  = this.content.register(
  'nm://models', AI_MODELS, AI_MODELS_UPDATED_AT,
);

protected models = computed(() => this.source.data);

// Al montar, en clientes con MCP configurado:
await this.content.refreshFromMcp<AiModel[]>('nm://models');

Gobernanza

Ventajas operativas del enfoque MCP

Actualización sin deploy

Corregir un modelo obsoleto no requiere build ni release del frontend.

Reutilización

Los mismos recursos los consumen otros clientes (CLI, IDE, agentes).

Auditabilidad

Cada recurso tiene fuente, fecha y responsable de curación.