{"id":15715602,"url":"https://github.com/sebastian0021/gemini-con-javascript","last_synced_at":"2026-01-29T10:03:18.980Z","repository":{"id":253185696,"uuid":"842742685","full_name":"Sebastian0021/gemini-con-javascript","owner":"Sebastian0021","description":"Repositorio creado para compartir el código y los comandos utilizados durante unas clases de ayuda que brindé a mis compañeros de la diplomatura de desarrollo web fullstack en Coderhouse.","archived":false,"fork":false,"pushed_at":"2024-08-16T23:33:25.000Z","size":39,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-30T07:31:54.559Z","etag":null,"topics":["artificial-intelligence","cloudflare","javascript","vite","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sebastian0021.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-15T01:45:30.000Z","updated_at":"2024-11-19T19:34:21.000Z","dependencies_parsed_at":"2024-10-24T12:57:54.582Z","dependency_job_id":"6d37e33a-783e-45b1-875d-328edb6118ab","html_url":"https://github.com/Sebastian0021/gemini-con-javascript","commit_stats":null,"previous_names":["sebastian0021/gemini-con-javascript"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sebastian0021/gemini-con-javascript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebastian0021%2Fgemini-con-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebastian0021%2Fgemini-con-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebastian0021%2Fgemini-con-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebastian0021%2Fgemini-con-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sebastian0021","download_url":"https://codeload.github.com/Sebastian0021/gemini-con-javascript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebastian0021%2Fgemini-con-javascript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28875446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T09:47:23.353Z","status":"ssl_error","status_checked_at":"2026-01-29T09:47:19.357Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["artificial-intelligence","cloudflare","javascript","vite","web"],"created_at":"2024-10-03T21:42:07.589Z","updated_at":"2026-01-29T10:03:18.954Z","avatar_url":"https://github.com/Sebastian0021.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cp align=\"center\"\u003eGuía para desarrollar y desplegar una página con Gemini API\u003c/p\u003e\n\n\u003e Este repositorio fue creado para compartir el código y los comandos utilizados durante unas clases de ayuda que brindé a mis compañeros de la diplomatura de desarrollo web fullstack en Coderhouse. Puedes encontrar los videos de las clases en [este enlace](https://drive.google.com/drive/folders/1CJpKEzhl_4QOXlp2hm8vxVlfxnnzv3Ba?usp=sharing).\n\n## Descripción\n\nEste repositorio te permitirá construir una página web que interactuará con la API de Gemini para generar contenido dinámico. Podrás hacer preguntas, obtener respuestas y explorar las capacidades de la inteligencia artificial de Gemini directamente desde tu navegador.\n\n## Tecnologías Utilizadas\n\n- Gemini API\n- Vite\n- Cloudflare Workers\n- HTML\n- JavaScript\n\n## Requisitos Previos\n\n- Node.js y npm instalados en tu máquina.\n- Una cuenta de Cloudflare.\n- Una clave API de Gemini.\n\n## Índice\n\n- Métodos\n  - [Con liveServer](#con-liveserver)\n  - [Con Vite](#con-vite)\n  - [Vite + Cloudflare Worker](#vite--cloudflare-worker)\n\n## Con liveServer\n\n\u003e El método de liveServer es el más inseguro y menos recomendable.\n\nPara poder utilizar la api de gemini con liveServer vamos a tener que agregar una etiqueta script con type=\"importmap\" al html para de ahí importar la api de gemini.\n\n```html\n\u003cscript type=\"importmap\"\u003e\n  {\n    \"imports\": {\n      \"@google/generative-ai\": \"https://esm.run/@google/generative-ai\"\n    }\n  }\n\u003c/script\u003e\n```\n\nLuego para poder importar el módulo a nuestro main.js vamos a tener que asociarlo al html con un type=\"module\". Además para luego utilizar imports libremente en nuestro proyecto.\n\n```html\n\u003cscript src=\"main.js\" type=\"module\"\u003e\u003c/script\u003e\n```\n\nYa de resto es importar la api de gemini donde la vayamos a utilizar.\n\n```js\nimport { GoogleGenerativeAI } from \"@google/generative-ai\";\n```\n\nY adaptar el código que nos trajo nuestro prompt del playground de gemini para utilizarlo en nuestro proyecto.\n\n## Con Vite\n\n\u003e El método con Vite es el más recomendado y que se utiliza para desarrollar aplicaciones reales.\n\nPara crear un proyecto en git hay que abrir la terminal en la carpeta en la que vamos a desarrollar nuestra aplicación y poner:\n\n```bash\nnpm create vite@latest\n```\n\nSi se corre el comando por primera ver poner ' y ' para que se instale vite y luego seguir los pasos explicados en [el drive (clase 2)](https://drive.google.com/drive/folders/1CJpKEzhl_4QOXlp2hm8vxVlfxnnzv3Ba?usp=sharing).\n\n\u003e Si no quieren ver la clase se pueden fijar en la [documentación de vite](https://vitejs.dev/guide/) como crear un proyecto vanilla\n\nVite nos va a facilitar mucho el desarrollo porque nos permite correr nuestro proyecto en un puerto local (mucho mejor que liveServer) con:\n\n```bash\nnpm run dev\n```\n\nAdemás nos permite utilizar e instalar libremente librerías con npm. En nuestro caso nos interesa para instalar la api de gemini con:\n\n```bash\nnpm install @google/generative-ai\n```\n\nPara así poder importar libremente la api de google en nuestro proyecto sin necesidad de utilizar la etiqueta html que utilizamos en el ejemplo con liveServer\n\nVite nos permite crear variables de entorno, cosa que nos sirve mucho para resguardar nuestra api key.\n\nPara utilizar la api key tenemos que crear un archivo `.env `en la carpeta raíz de nuestro proyecto y poner ahí nuestra variable. La variable se declara con la palabra `VITE_` al principio seguido del nombre que le queramos dar a nuestra variable, de la siguiente manera:\n\n```js\n//.env\nVITE_GEMINI_API_KEY = your_api_key;\n```\n\n\u003e Notar que no es necesario poner nuestra api entre comillas como hacemos con las strings\n\nLuego para acceder a la api key tendremos que importarla en donde la vayamos a utilizar de la siguiente manera:\n\n```js\n//Ejemplo de uso con la api de gemini\nconst genAI = new GoogleGenerativeAI(import.meta.env.VITE_GEMINI_API_KEY))\n```\n\nY de esta manera, si agregamos el `.env` al `.gitignore` podremos subir libremente nuestro código a github sin miedo que nos bloqueen el código por mostrar nuestra api_key ya que no se muestra directamente en el código. Pero al subirlo a algún dominio habría que configurarlo para que maneje la variable de entorno que es.\n\n## Vite + Cloudflare Worker\n\n\u003e Este es el método más seguro y con el que nos vamos a acercar más a deplegar un proyecto real a producción\n\nCloudflare (en resumen) es una plataforma muy segura que nos permite desarrollar una \"api\" sin servidor que nos va a servir para fácilmente poder hacer llamadas a la api de gemini a travéz de la misma sin tener que poner nuestra apikey en el frontend.\n\nQue no les suene complicado lo de \"desarrollar una api\" ya que al no ser en un servidor no hay que configurar ni saber mucho de backend.\n\nLo que enrealidad terminamos desarrollando es un worker que va a funcionar como una simple función que nos va a responder la respuesta de la llamada a la api de gemini.\n\nCloudflare además nos va a permitir desplegar nuestro proyecto a internet.\n\n\u003e Todos los servicios de cloudflare que vamos a utilizar son gratuitos. Si quieren más sobre [cloudflare](https://www.cloudflare.com/es-es/learning/what-is-cloudflare/) y los [workers](https://www.cloudflare.com/es-la/developer-platform/workers/) pueden precionar en los links para más info\n\n### Worker\n\n\u003e Para entender mejor esta parte se recominda ver el tercer video del [drive](https://drive.google.com/drive/folders/1CJpKEzhl_4QOXlp2hm8vxVlfxnnzv3Ba?usp=sharing)\n\nHay varias formas de crear un worker pero nosotros al necesitar dependencias (como la api de gemini) lo vamos a hacer a través del [CLI (link a documentación oficial de como hacerlo)](https://dash.cloudflare.com/9b633f2b6676437c3455dda4e76abe7c/workers-and-pages/create-with-cli)\n\nPrimero necesitamos crear nuestro worker con:\n\n```bash\nnpm create cloudflare\n```\n\nAl poner ese comando en la terminal tendrán seguir los pasa que se explican en el video del [drive](https://drive.google.com/drive/folders/1CJpKEzhl_4QOXlp2hm8vxVlfxnnzv3Ba?usp=sharing) (lo importante acá es el elegir el ejemplo de `helloworld`)\n\nUna vez creado les va a salir el link de su worker en el que debería salir lo que devuelve la función que está en `src/index.js` que en nuestro caso es `Hello World!`\n\nUna vez creado pueden utilizar el contenido que está en este repositorio para hacer las llamadas a gemini\n\nPara setear la `GEMINI_API_KEY` el comando que van a necesitar este:\n\n```bash\nnpx wrangler secret put GEMINI_API_KEY\n```\n\nY cada que quieran notar los cambios que hicieron en el `index.js` en la página del worker tendrán que poner en la terminal:\n\n```bash\nnpx wrangler deploy\n```\n\n## 👨🏾‍💻 Autor\n\n#### Sebastian Alejandro Peñaloza Fuentes\n\n- [Linkedin](https://www.linkedin.com/in/sebastianpenalozafuentes/)\n- [GitHub](https://github.com/Sebastian0021)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian0021%2Fgemini-con-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastian0021%2Fgemini-con-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian0021%2Fgemini-con-javascript/lists"}