31:["$","ol","29",{"className":"list-decimal pl-0 sm:pl-6 space-y-2 my-4","children":["\n ",["$","li","1",{"className":"text-sm sm:text-base lg:text-lg","children":[["$","strong","0",{"className":"font-semibold","children":"Inicializar Proyecto:"}],"\n ",["$","pre","2",{"className":"bg-gray-800 text-white p-4 rounded-md my-4","children":["$","code",null,{"children":"mkdir agente-multimodal-web\ncd agente-multimodal-web\nnpm init -y"}]}],"\n "]}],"\n ",["$","li","3",{"className":"text-sm sm:text-base lg:text-lg","children":[["$","strong","0",{"className":"font-semibold","children":"Instalar Dependencias Clave:"}]," Utilizaremos un conjunto de bibliotecas que simulan las capacidades actuales de IA en el navegador. Para este tutorial, asumiremos la existencia de ",["$","code","2",{"children":"@browser-ai/orchestrator"}]," (un framework de orquestación hipotético pero plausible), ",["$","code","4",{"children":"@web-llm/lite"}]," (para un LLM ligero en navegador) y ",["$","code","6",{"children":"@mediapipe/tasks-web"}]," (para procesamiento multimodal). También necesitaremos un bundler como Webpack o Vite.\n ",["$","pre","8",{"className":"bg-gray-800 text-white p-4 rounded-md my-4","children":["$","code",null,{"children":"npm install @browser-ai/orchestrator @web-llm/lite @mediapipe/tasks-web vite"}]}],"\n "]}],"\n ",["$","li","5",{"className":"text-sm sm:text-base lg:text-lg","children":[["$","strong","0",{"className":"font-semibold","children":"Estructura Básica del Proyecto:"}],"\n Crea los siguientes archivos y carpetas:\n ",["$","pre","2",{"className":"bg-gray-800 text-white p-4 rounded-md my-4","children":["$","code",null,{"children":"agente-multimodal-web/\n├── public/\n│ └── index.html\n├── src/\n│ ├── main.js\n│ └── agents/\n│ ├── ContentRecommenderAgent.js\n│ └── ContextualAssistantAgent.js\n├── package.json\n└── vite.config.js"}]}],"\n "]}],"\n ",["$","li","7",{"className":"text-sm sm:text-base lg:text-lg","children":[["$","strong","0",{"className":"font-semibold","children":["Configurar Vite (",["$","code","1",{"children":"vite.config.js"}],"):"]}],"\n ",["$","pre","2",{"className":"bg-gray-800 text-white p-4 rounded-md my-4","children":["$","code",null,{"children":"import { defineConfig } from 'vite';\n\nexport default defineConfig({\n root: './',\n publicDir: 'public',\n build: {\n outDir: 'dist',\n },\n server: {\n host: '0.0.0.0',\n port: 3000,\n },\n});"}]}],"\n "]}],"\n ",["$","li","9",{"className":"text-sm sm:text-base lg:text-lg","children":[["$","strong","0",{"className":"font-semibold","children":["Crear ",["$","code","1",{"children":"public/index.html"}],":"]}],"\n ",["$","pre","2",{"className":"bg-gray-800 text-white p-4 rounded-md my-4","children":["$","code",null,{"children":"\n\n\n \n \n Agente Multimodal en Navegador\n \n\n\n

Agente Multimodal Proactivo

Permite el acceso a tu cámara y micrófono para una experiencia completa.

\n \n

Esperando interacción...

\n \n\n"}]}],"\n "]}],"\n "]}]