Aprende cómo conectar el editor nativo de IA de Zed con el Web MCP de Bright Data para habilitar acceso web en tiempo real, extracción limpia de datos y flujos de trabajo de IA con conciencia web directamente dentro de tu entorno de desarrollo.
En este tutorial, aprenderás:
- Qué es Zed y cómo funciona su modelo de edición agéntica nativa de IA dentro de un editor de código moderno.
- Por qué extender Zed con capacidades de interacción web en tiempo real y extracción de datos es esencial para el desarrollo asistido por IA con precisión.
- Cómo conectar Zed al Web MCP de Bright Data para habilitar un agente de IA con conciencia web que pueda obtener y usar datos web públicos en vivo directamente dentro del editor.
¡Comencemos!
¿Qué es Zed?
Zed es un editor de código moderno y de alto rendimiento diseñado para velocidad, colaboración y desarrollo asistido por IA. Está construido desde cero con un enfoque en la capacidad de respuesta y la baja latencia, con el objetivo de hacer que la programación se sienta inmediata y fluida incluso en bases de código grandes.
Zed está escrito completamente en Rust y está diseñado para utilizar eficientemente múltiples núcleos de CPU y aceleración GPU. Esta elección de diseño permite a Zed ofrecer tiempos de inicio rápidos, interacciones de interfaz fluidas y latencia mínima de escritura, que son aspectos fundamentales de su experiencia para el desarrollador.
Zed está disponible en macOS, Linux y Windows, ofreciendo una experiencia nativa consistente en todas las plataformas.
De forma predeterminada, Zed incluye una amplia gama de funciones esenciales para desarrolladores, entre ellas:
- Soporte nativo de Git para staging, commits, pull, push y visualización de diferencias.
- Soporte de depuración basado en el Debug Adapter Protocol (DAP).
- Soporte del Language Server Protocol (LSP) para múltiples lenguajes de programación.
- Edición multibúfer para componer y editar contenido de diferentes archivos en una sola vista.
- Funciones de colaboración integradas como edición compartida, chat y uso compartido de pantalla.
- Edición modal estilo Vim para desarrolladores que prefieren un flujo de trabajo modal.
Por qué potenciar Zed con Bright Data Web MCP
Sin importar qué modelo de IA uses dentro de Zed, opera con una limitación clave: los LLMs no tienen acceso en vivo a la web. Sus respuestas se basan en datos de entrenamiento que representan una instantánea en el tiempo, que puede quedar desactualizada rápidamente.
Esta limitación se hace evidente al trabajar con documentación, herramientas o frameworks en evolución. Un asistente de IA dentro de un editor no puede verificar información actual, navegar por sitios web ni extraer contenido real por sí solo.
Ahora, imagina extender el agente de IA de Zed con la capacidad de:
- Leer páginas de documentación en vivo
- Obtener guías y referencias actualizadas
- Navegar y extraer contenido de sitios web reales
Estas capacidades se desbloquean al conectar Zed a Bright Data Web MCP. El Web MCP de Bright Data expone más de 60 herramientas listas para IA, impulsadas por la infraestructura de IA de Bright Data, habilitando interacción web en tiempo real y recuperación de datos para agentes de IA.
Las dos herramientas más utilizadas, también disponibles en el nivel gratuito, son:
| Herramienta | Descripción |
|---|---|
scrape_as_markdown |
Extrae contenido de una página web y devuelve Markdown limpio, gestionando la protección contra bots y los CAPTCHA. |
search_engine |
Recupera resultados de búsqueda de Google, Bing o Yandex en formato JSON o Markdown. |
Más allá de las herramientas principales, Web MCP incluye muchas opciones avanzadas para la interacción con el navegador y la extracción de datos estructurados. El nivel gratuito proporciona acceso a herramientas básicas, mientras que habilitar el modo Pro desbloquea el conjunto completo para casos de uso más avanzados.
Al conectar Bright Data Web MCP a Zed, el agente de IA puede trabajar con contenido web en vivo en lugar de conocimiento estático, lo que resulta en una asistencia más precisa y confiable directamente dentro del editor.
Cómo integrar Bright Data Web MCP con Zed
En esta sección, aprenderás a:
- Configurar Bright Data Web MCP como servidor MCP dentro de Zed
- Autenticar el servidor MCP usando un token de API de Bright Data
- Habilitar el agente de IA de Zed para acceder a contenido web en vivo a través de MCP
- Verificar que la integración funcione correctamente
¡Sigue los pasos a continuación para comenzar!
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
- Un sistema operativo compatible (macOS, Linux o Windows)
- Zed instalado y en funcionamiento
- Node.js instalado (se recomienda la última versión LTS)
- Una cuenta de Bright Data con un token de API
No necesitas configurar Bright Data de antemano. La configuración necesaria se cubrirá paso a paso en las siguientes secciones.
Aunque no es obligatorio, tener cierta comprensión previa puede ser útil, como:
- Una idea básica de cómo funciona el Model Context Protocol (MCP)
- Familiaridad general con Bright Data Web MCP y sus herramientas disponibles
Paso #1: Instalar e iniciar Zed
Descarga Zed desde el sitio web oficial e instálalo para tu sistema operativo (macOS, Linux o Windows).
Una vez instalado, abre Zed desde el menú de aplicaciones y asegúrate de que el editor se inicie sin errores.
Deberías ver la interfaz principal del editor y poder abrir el panel de Configuración. Si Zed se inicia correctamente, estás listo para continuar con el siguiente paso.
Paso 2: Habilitar IA y edición agéntica en Zed
Abre Configuración en Zed y navega a la sección de Proveedores LLM.
Inicia sesión en Zed AI o configura cualquier proveedor compatible como Anthropic, Google AI o Amazon Bedrock para habilitar las funciones impulsadas por IA.
Una vez que un proveedor esté activo, regresa al editor y abre el panel de IA o chat para confirmar que se aceptan los prompts y se generan respuestas. Si la IA responde dentro del editor, la edición agéntica está habilitada correctamente.
Paso #3: Configurar Bright Data Web MCP localmente
Para habilitar el acceso web en tiempo real para el agente de IA de Zed, necesitas configurar Bright Data Web MCP en tu máquina local. Este servidor MCP actúa como puente entre el agente de IA y los datos web en vivo.
Comienza creando una cuenta de Bright Data desde el panel de Bright Data. Si ya tienes una cuenta, simplemente inicia sesión.
Para una configuración rápida, abre la página “MCP” en tu cuenta y sigue las instrucciones:
De lo contrario, sigue los pasos a continuación:
Desde el panel de Bright Data, genera un token de API y guárdalo de forma segura. Este token es utilizado por el servidor Web MCP para autenticar solicitudes y acceder a las herramientas web de Bright Data.
Para este tutorial, el token de API es la única credencial que necesitas.
Bright Data Web MCP se ejecuta como un servidor local usando Node.js. Instálalo globalmente ejecutando el siguiente comando en tu terminal:
npm install -g @brightdata/mcpEsto instala el paquete Web MCP al que Zed se conectará más adelante.
Inicia el servidor Web MCP ejecutando:
API_TOKEN="YOUR_BRIGHT_DATA_API_TOKEN" npx -y @brightdata/mcpReemplaza YOUR_BRIGHT_DATA_API_TOKEN con tu token de API real.
Si el servidor se inicia correctamente, deberías ver mensajes de registro indicando que el servidor MCP está en ejecución y listo para aceptar solicitudes.
En su primera ejecución, el servidor Bright Data Web MCP crea automáticamente dos zonas requeridas en tu cuenta de Bright Data: una para Web Unlocker y otra para la API del Navegador. Estas zonas son utilizadas internamente por Web MCP para dar soporte a sus herramientas disponibles.
Puedes verificar su creación visitando la sección de Proxies e Infraestructura de Scraping del panel de Bright Data. Si tu token de API no tiene acceso de administrador, es posible que las zonas deban crearse manualmente y referenciarse mediante variables de entorno.
De forma predeterminada, Web MCP expone solo las herramientas search_engine y scrape_as_markdown, disponibles en el nivel gratuito. Habilitar el modo Pro desbloquea el conjunto completo de herramientas, incluida la automatización avanzada del navegador, y puede generar cargos adicionales.
Para acceder a capacidades avanzadas como la automatización del navegador y la extracción de datos estructurados, habilita el modo Pro configurando PRO_MODE=true antes de iniciar el servidor Web MCP.
API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcpUna vez que confirmes que el servidor funciona correctamente, detenlo por ahora. Zed se configurará para iniciar y conectarse al servidor Web MCP automáticamente en el siguiente paso.
Paso #4: Configurar Bright Data Web MCP en Zed
Abre Configuración en Zed y navega a la sección de Servidores del Model Context Protocol (MCP). Haz clic en Agregar servidor para registrar un nuevo servidor MCP local.
Cuando se te solicite, define el servidor MCP de Bright Data configurando el comando para ejecutar el paquete Web MCP (npx @brightdata/mcp) y agrega la variable de entorno requerida para la autenticación (API_TOKEN). Guarda la configuración para que el servidor MCP esté disponible para el agente de IA de Zed.
Una vez agregado, Bright Data aparecerá en la lista de servidores MCP, indicando que Zed está listo para conectarse al Web MCP durante los flujos de trabajo asistidos por IA.
Con el servidor MCP habilitado, el agente de IA de Zed ya está listo para usar las herramientas web de Bright Data durante los flujos de trabajo asistidos por IA dentro del editor.
Paso #6: Ejecutar una tarea del mundo real en Zed
En este paso, usarás el agente de IA de Zed junto con Bright Data Web MCP para obtener contenido web en vivo, almacenarlo localmente y generar un pequeño script basado en datos reales.
Abre el panel de IA o chat de Zed (el mismo que usaste para probar las respuestas de IA anteriormente)
- Aquí es donde escribirás tu prompt
- Ahora estás hablando con el agente de IA de Zed, no escribiendo código.
Copia y pega exactamente este prompt en Zed:
Fetch the live documentation page at
https://nodejs.org/en/docs
Use Bright Data MCP to extract the main documentation content and convert it into clean Markdown. Save the extracted content as docs.md. Then generate a short summary of the documentation and save it as summary.md. Finally, create a simple Node.js script called readDocs.js that loads docs.md and prints the first few lines.Después de enviar el prompt, observa lo que sucede:
- El agente de IA explica o planifica los pasos que tomará
- Identifica que se requiere acceso web
- Selecciona una herramienta de Bright Data MCP (normalmente scrape_as_markdown)
- Zed puede pedirte que apruebes la ejecución de la herramienta
Una vez completada la tarea, verifica que los archivos generados estén presentes en el directorio de tu proyecto. Abre los archivos Markdown para confirmar que contienen contenido extraído de la página de documentación en vivo.
Ejecutar el script generado debería imprimir datos del contenido extraído, verificando que el flujo de trabajo se ejecutó correctamente.
Conclusión
En este tutorial, aprendiste cómo integrar Zed con Bright Data Web MCP para habilitar la interacción web en tiempo real dentro de un editor nativo de IA. Al combinar el modelo de edición agéntica de Zed con las herramientas web de Bright Data, creaste un flujo de trabajo donde la IA puede obtener contenido en vivo, almacenarlo localmente y generar código y archivos utilizables basados en datos reales.
El Web MCP de Bright Data abre la puerta a la creación de flujos de trabajo de desarrollo asistido por IA más confiables y conscientes del contexto, proporcionando acceso a datos web estructurados y actualizados. Este enfoque ayuda a reducir la dependencia del conocimiento estático y mejora la precisión de los resultados generados por IA.
Para explorar casos de uso agénticos más avanzados, echa un vistazo a la infraestructura más amplia de Bright Data y sus soluciones de datos web listas para IA.
Puedes comenzar con una cuenta gratuita de Bright Data y experimentar más con Web MCP para impulsar tus propios flujos de trabajo de desarrollo basados en IA.
