Archivo de la etiqueta: MCP

Cómo conectar Google Stitch con Google Antigravity: Aplicaciones atractivas sin esfuerzo

Posted on por
Responder

Si hay algo que me ha costado siempre en el desarrollo de aplicaciones, es el diseño de interfaces. Soy de los que pueden pasar horas peleándose con CSS para que un botón quede centrado, y al final sigue sin convencerme. Seguro que a más de uno os suena.

Pero últimamente Google ha estado soltando herramientas experimentales que, combinadas, pueden cambiar completamente cómo trabajamos. Hoy os traigo la combinación de Google Stitch + Google Antigravity: una dupla que te permite generar aplicaciones funcionales y visualmente atractivas en cuestión de minutos, no días.

¿Qué son estas herramientas?

Google Stitch: diseño por «vibe designing»

Google Stitch es el laboratorio de Google para generación de interfaces. Pero no es un simple generador de imágenes: describes lo que quieres construir y Stitch te propone diseños completos, con múltiples pantallas, flujos de navegación y componentes visuales listos para usar.

Lo mejor es que no te quedas con una imagen estática. Puedes interactuar con el diseño, pedir cambios, anotar modificaciones y, cuando estés satisfecho, descargar el código en HTML/CSS o React/Tailwind.

Actualmente está en beta gratuita (sin límites, de momento), así que es momento de aprovechar.

Google Antigravity: tu compañero de código con IA

Google Antigravity es el IDE de Google con agentes de IA integrados. Piensa en VS Code, pero donde la IA no solo autocompleta: planifica, codifica, depura e itera sobre proyectos complejos con mínima supervisión.

Durante la preview gratuita tienes acceso a Gemini Pro, Deep Think y Flash sin esos molestos límites de API que nos tienen acostumbrados otros servicios.

¿Por qué conectarlas?

Separadas son útiles. Juntas, son otro nivel:

  • Stitch se encarga del diseño visual
  • Antigravity se encarga de la lógica, base de datos, autenticación y despliegue

El truco está en añadir Stitch como servidor MCP (Model Context Protocol) dentro de Antigravity. Así, el agente puede consultar diseños de Stitch directamente e integrarlos en el código que genera.

Paso a paso: la integración

Paso 1: Instalar el servidor MCP de Stitch en Antigravity

En la ventana de agente de Antigravity (la derecha), hacemos clic en los tres puntos y seleccionamos MCP Servers.

Buscamos «stitch» en la lista y lo instalamos. Es un proceso de un clic.

Paso 2: Obtener la API key de Stitch

Necesitamos una clave para que Antigravity pueda hablar con Stitch:

  1. Vamos a stitch.withgoogle.com
  2. En la esquina superior derecha, hacemos clic en nuestro perfil
  3. Seleccionamos «API Keys» y generamos una nueva
  4. Copiamos la clave (empieza por algo como sk-...)

Paso 3: Configurar la API key en Antigravity

Volvemos a Antigravity, a la configuración del MCP Server de Stitch, y pegamos la API key en el campo correspondiente.

Y listo. La integración está completa.

Creando nuestra primera aplicación

Veamos un ejemplo real. Quiero construir un gestor de hábitos con modo oscuro y diseño minimalista.

1. Generamos el diseño en Stitch

Abrimos Stitch y escribimos:

«Aplicación minimalista para llevar un registro de hábitos con modo oscuro, gráficos de progreso semanales y botones para marcar la asistencia diaria. Estética limpia y moderna con toques en color morado».

En menos de un minuto, Stitch genera:

  • Pantalla principal con lista de hábitos
  • Gráfico de progreso semanal
  • Modal para añadir nuevos hábitos
  • Diseño responsive

Podemos iterar hasta que nos guste el resultado final.

2. Pasamos a Antigravity

Ahora viene la magia. En Antigravity, abrimos el chat con el agente y escribimos algo como:

«Crea una aplicación de gestión de hábitos usando el diseño que obtengas del servidor Stitch MCP. La app debe incluir:
– Autenticación con Clerk
– Base de datos con Convex
– Las funcionalidades que propone el diseño de Stitch
– Despliegue en Vercel»

El agente consultará Stitch, obtendrá el diseño, y empezará a construir la aplicación completa.

3. Iteración automática

Aquí es donde brilla Antigravity: no solo genera código, sino que:

  • Abre el navegador para probar la app
  • Detecta errores y los corrige
  • Verifica que la autenticación funcione
  • Comprueba que la base de datos se conecte correctamente

En mi caso, construí una app funcional en 23 minutos. Y no es un prototipo: tiene auth real, base de datos persistente y está lista para producción.

Trucos y consideraciones

Lo que funciona de maravilla

  • Diseños complejos: Stitch maneja bien múltiples pantallas y estados
  • Componentes modernos: Tailwind CSS, React, layouts responsive
  • Iteración rápida: cambiar el diseño en Stitch y pedir a Antigravity que actualice el código funciona sorprendentemente bien

Lo que aún falla

  • Detalles muy específicos: a veces hay que ajustar manualmente márgenes o colores exactos
  • Integraciones complejas: si necesitas APIs de terceros poco comunes, puede requerir intervención
  • Sesiones largas: después de muchos mensajes, el contexto se pierde un poco

Consejos prácticos

  1. Sé específico en Stitch: cuanto más detalle des en el prompt, mejor será el diseño base
  2. Itera en el diseño primero: mejor gastar 5 minutos ajustando en Stitch que 30 cambiando código
  3. Verifica pasos intermedios: pide a Antigravity que te muestre el diseño integrado antes de añadir complejidad

El futuro del desarrollo

Esta combinación de herramientas me hace reflexionar sobre hacia dónde vamos. No creo que vayan a reemplazar a los desarrolladores, pero sí que cambian el tipo de trabajo que hacemos:

  • Menos tiempo peleándose con CSS
  • Menos tiempo configurando boilers
  • Más tiempo pensando en la lógica de negocio y la experiencia de usuario

Es como pasar de ser albañil a ser arquitecto. Sigues construyendo, pero a otro nivel de abstracción.

¿Habéis probado ya esta combinación? ¿Qué experiencias tenéis con herramientas de IA para desarrollo? Me encantaría leer vuestros comentarios.

Recursos útiles:
Google Stitch
Google Antigravity
Documentación MCP

Conectar claude code con MCPs

Posted on por
1

Como ya contamos en una entrada anterior La IA más barata para generar código, podemos utilizar claude code con otras IAs además de las de Anthropic, y esto es muy bueno porque nos da muchas herramientas de agente inteligente como la nada despreciable posibilidad de conectar con servidores MCP.

Para este ejemplo vamos a utilizar outline, que, para el que no lo conozca, es un excelente editor de documentos al estilo notion y que yo uso, junto con mi equipo, para dejar la documentación de los proyectos y ahora vamos a ver cómo podemos integrar esta documentación con nuestra IA favorita para programar.

Lo primero que tenemos que hacer es conseguir una clave de API en outline. Eso se consigue en la ruta /settings/api-and-apps donde pediremos crear una nueva clave api

Una vez creada más vale que os la copieis rápido porque no vais a poder volver a recuperarla después.

Una vez que tenemos instalado claude code y sus prerequisitos (que podéis ver en la entrada anterior) tendremos en nuestra raíz de usuario un archivo llamado .claude.json que tiene, entre otras cosas, las definiciones de los mcp.

El fragmento que tenemos que añadir es:

       "mcpServers": {
        "outline": {
          "type": "stdio",
          "command": "docker",
          "args": [
            "run",
            "-i",
            "--rm",
            "--init",
            "-e",
            "DOCKER_CONTAINER=true",
            "-e",
            "OUTLINE_API_KEY",
            "-e",
            "OUTLINE_API_URL",
            "biblioeteca/mcp-outline"
          ],
          "env": {
            "OUTLINE_API_KEY": "ol_api_.....",
            "OUTLINE_API_URL": "https://<servidor>/api"
          }
        },

Yo lo he añadido bajo la línea «mcpContextUris»: [] dentro de uno de los proyectos donde lo quiero usar. Evidentemente para usar este mcp necesitas tener docker instalado (doy por hecho que si estás aquí eres de los míos y lo usas diariamente).

Una vez que has grabado el archivo y arrancas claude en el directorio del proyecto en cuestión le puedes preguntar por la lista de mcps:

$ claude mcp list
Checking MCP server health...

outline: docker run -i --rm --init -e DOCKER_CONTAINER=true -e OUTLINE_API_KEY -e OUTLINE_API_URL biblioeteca/mcp-outline - ? Connected

Y ya puedes hacer que la magia surja…

Y darle que si a todos los permisos que pida

Y ya podrías pedirle que te lea documentos como requisitos para programar o que, como en este caso, que nos documente el api que acabamos de construir en el proyecto

¿puedes crear un documento llamado API DocuFactu en esa colección con la documentación sobre el API (solo la parte verifactu) que incluya ejemplos de uso usando una APIKEY?

Y este es el resultado… (solo parte)

Como todo lo que hace la IA luego alguien que sepa tiene que retocarlo y corregirlo (aquí también se puede inventar cosas), pero el caso es que ya tenemos mucho trabajo adelantado.

Hay miles de mcp con los que podemos interactuar por ahí… Solo tienes que buscarlo o, sino, construir el tuyo propio que, igual, lo hacemos aquí cuando tengamos un rato.

Escribiendo código con una sola mano

Posted on por
Responder

Hace unos días he sufrido un desafortunado accidente que ha terminado con el 5º metatarso de mi mano izqierda fracturado. Eso significa que voy a estar de 3 a 8 semanas sin poder usar mi mano izquierda para nada.

El caso es que nunca pensé que echaría de menos tanto a mi mano izquierda pero, en serio, ahora me siento como menos capaz de hacer las mismas cosas que hacía antes, aunque no interviniese para nada la mano izquierda. Yo siempre he dicho que programar es un oficio de cabeza, no de teclas… Pero no veas cómo ayuda poder escribir rápido lo que estás pensando.

La mano izquierda es solo una herramienta, pero una que nos permite hacer mejor y más rápido lo que ya sabemos hacer… Casi como la IA.

Yo estoy suscrito a github copilot casi desde el principio (antes de que lo abriesen al público ya había hecho mis pruebas), como copiloto que te completa las líneas o que escribe por tí las aburridas funciones que le describes, o incluso que adivina lo siguiente que quieres hacer en el archivo en base a lo que ya has escrito antes, era fantástco, una herramienta de la que no te podías fiar 100% pero que te ahorraba muchas horas de búsquedas y pruebas. Pero es que el otro día probé el modo agente (usando claude sonnet 4) y la cabeza casi me estalla…

Había probado antes firebase studio de google, que intenta hacer un desarrollo completo de aplicación de manera visual y en base a instrucciones que le vas dando a la IA y, realmente, me gustó mucho el concepto, la pena es que solo sirve en ese modo para hacer aplicaciones React y yo necesitaba algo más flexible.. Y lo encontré en el modo agente de github copilot

Modo agente de copilot

Puedes usarlo en cualquier proyecto que ya tengas en visual studio code o puedes empezar uno de cero y con unas pocas instrucciones puedes crear el tipo de proyecto que quieras, tanto de front como de back, en el lenguaje que quieras y con el framework que quieras… Y no, no es vibe coding como tal, es una herramienta más que te sirve para ir dando forma y corrigiendo el proyecto en un entorno controlado por ti.

Y lo más flipante es que te explica lo que va a hacer y las ventajas que te da… Y escribe documentación para acompañar… Y además en tu idioma. Solo por eso ya es una herramienta muy valiosa. Pero, lo que es más, te ayuda a comprender que cuanto más claros y detallados están los requisitos más fácil es que lo que obtengas se parezca a lo que querías (igual a nuestros clientes hay que ponerles a hacer vibe coding para que empiecen a aprender a pedirnos las cosas).

Otra cosa muy interesante es poder seguir el razonamiento para arreglar problemas de una manera natural (en azul lo que le digo yo)

La imagen corresponde a un proyecto todavía en marcha, sin embargo puedo poneros como ejemplo un programa que ha desarrollado 100% github copilot (con mi dirección y correcciones). Tenéis todo el código en el repositorio: https://github.com/yoprogramo/imaphp

Ultimamente me he dedicado mucho a hospedar mis propios servidores, aprovechando que estaba probando proxmox. Uno de los servicios qu quería probar era el de servidor de correo e instalé Stalwart, un sistema muy completo y que, a lo mejor, os explico un día como instalar. Tiene multitud de servicios, no solo el de SMTP, sino IMAP, POP, CalDAV, Antispam, etc… Pero algo que no tiene es un cliente webmail. Me puse a buscar a ver si encontraba alguno que no tuviese dependencias y no me gustó ninguno, así que dije.. ¿Qué carajo? Vamos a escribir uno.

Y me puse manos a la obra, decidí que quería que fuese lo más ligero posible y que pudiese ejecutarse en cualquier sitio (docker incluido) y comencé el proyecto de cero usando el modo agente del copilot.

Para poder probarlo de la manera rápida, montad este docker-compose.yml:

services:
  imap-client:
    image: yoprogramo/imaphp:1.0.0
    ports:
      - "8888:80"
    environment:
      - PHP_DISPLAY_ERRORS=Off
      - PHP_ERROR_REPORTING=E_ERROR
    volumes:
      - ./data:/var/www/html/data
    restart: always

Crea un directorio data y dale los permisos para que todo el mundo pueda escribir y lánza el compose:

docker compose up -d

Ahora simplemente accede a http://localhost:8888 (puedes cambiar el puerto en el compose) y verás que se te invita a dar de alta un servidor

Y luego ya podrás entrar con tu usuario imap

Y, finalmente, acceder a tu correo:

Y con esto un pequeño ejemplo del tipo de cosas que se pueden pedir a las IAs de programación actualmente… Pero esto corre que se las pela, lo bueno es que siempre necesitaras a un humano de verdad que entienda lo que está haciendo y cómo arreglarlo.