{"id":32056637,"url":"https://github.com/google/xrblocks","last_synced_at":"2026-05-14T00:01:50.409Z","repository":{"id":317240431,"uuid":"1064350961","full_name":"google/xrblocks","owner":"google","description":"XR Blocks is a lightweight WebXR + AI library for rapidly prototyping advanced AI + XR experiences.","archived":false,"fork":false,"pushed_at":"2026-05-07T22:33:00.000Z","size":20014,"stargazers_count":391,"open_issues_count":7,"forks_count":75,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-05-07T23:39:53.890Z","etag":null,"topics":["androidxr","gemini","gestures","litert","tensorflow","webai","webxr","xrblocks"],"latest_commit_sha":null,"homepage":"https://xrblocks.github.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-25T22:57:47.000Z","updated_at":"2026-05-07T22:31:36.000Z","dependencies_parsed_at":"2025-10-14T23:01:16.704Z","dependency_job_id":"1f4e1d45-2341-4596-a96b-0fb6c285e381","html_url":"https://github.com/google/xrblocks","commit_stats":null,"previous_names":["google/xrblocks"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/google/xrblocks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fxrblocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fxrblocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fxrblocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fxrblocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google","download_url":"https://codeload.github.com/google/xrblocks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Fxrblocks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33004768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"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":["androidxr","gemini","gestures","litert","tensorflow","webai","webxr","xrblocks"],"created_at":"2025-10-18T14:07:55.686Z","updated_at":"2026-05-14T00:01:50.403Z","avatar_url":"https://github.com/google.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# XR Blocks\n\n[![NPM Package](https://img.shields.io/npm/v/xrblocks)](https://www.npmjs.com/package/xrblocks)\n[![jsDelivr npm hits](\u003chttps://img.shields.io/jsdelivr/npm/hw/xrblocks?label=jsdelivr%20(npm)\u003e)](https://www.jsdelivr.com/package/npm/xrblocks)\n[![jsDelivr GitHub hits](\u003chttps://img.shields.io/jsdelivr/gh/hw/google/xrblocks?label=jsdelivr%20(GitHub)\u003e)](https://www.jsdelivr.com/package/gh/google/xrblocks)\n[![arXiv](https://img.shields.io/badge/arXiv-2509.25504-b31b1b.svg)](https://arxiv.org/abs/2509.25504)\n[![arXiv](https://img.shields.io/badge/arXiv-2603.24591-b31b1b.svg)](https://arxiv.org/abs/2603.24591)\n\n#### JavaScript library for rapid AI + XR prototyping\n\n[Site](https://xrblocks.github.io/) \u0026mdash;\n[Manual](https://xrblocks.github.io/docs/) \u0026mdash;\n[Templates](https://xrblocks.github.io/docs/templates/Basic/) \u0026mdash;\n[Demos](https://xrblocks.github.io/docs/samples/) \u0026mdash;\n[Gem](https://xrblocks.github.io/gem) \u0026mdash;\n[YouTube](https://www.youtube.com/watch?v=75QJHTsAoB8) \u0026mdash;\n[arXiv](https://arxiv.org/abs/2509.25504) \u0026mdash;\n[Blog](https://research.google/blog/vibe-coding-xr-accelerating-ai-xr-prototyping-with-xr-blocks-and-gemini)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://xrblocks.github.io/docs/samples/Ballpit/\" target=\"_blank\"\u003e\u003cimg width=\"32.3%\" src=\"https://cdn.jsdelivr.net/gh/google/xrblocks@main/assets/ballpit-demo.webp\" alt=\"Ballpit\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://xrblocks.github.io/docs/samples/XR-Emoji/\" target=\"_blank\"\u003e\u003cimg width=\"32.3%\" src=\"https://cdn.jsdelivr.net/gh/google/xrblocks@main/assets/xremoji-demo.webp\" alt=\"XR Emoji\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://xrblocks.github.io/docs/samples/Gemini-Icebreakers/\" target=\"_blank\"\u003e\u003cimg width=\"32.3%\" src=\"https://cdn.jsdelivr.net/gh/google/xrblocks@main/assets/gemini-icebreakers-demo.webp\" alt=\"Gemini Icebreakers\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n### Description\n\n**XR Blocks** is a lightweight, cross-platform library for rapidly prototyping\nadvanced XR and AI experiences. Built upon [three.js](https://threejs.org), it\ntargets Chrome v136+ with WebXR support on Android XR (e.g.,\n[Galaxy XR](https://www.samsung.com/us/xr/galaxy-xr/galaxy-xr/)) and also\nincludes a powerful desktop simulator for development. The framework emphasizes\na user-centric, developer-friendly SDK designed to simplify the creation of\nimmersive applications with features like:\n\n- **Hand Tracking \u0026 Gestures:** Access advanced hand tracking, custom gestures\n  with TensorFlow Lite / PyTorch models, and interaction events.\n- **Gesture Recognition:** Opt into pinch, open-palm, fist, thumbs-up, point,\n  and spread detection with `options.enableGestures()`, tune providers or\n  thresholds, and subscribe to `gesturestart`/`gestureupdate`/`gestureend`\n  events from the shared subsystem.\n- **World Understanding:** Present samples with depth sensing, geometry-aware\n  physics, and object recognition with Gemini in both XR and desktop\n  simulator.\n- **AI Integration:** Seamlessly connect to Gemini for multimodal\n  understanding and live conversational experiences.\n- **Cross-Platform:** Write once and deploy to both XR devices and desktop\n  Chrome browsers.\n\nWe welcome all contributors to foster an AI + XR community! Read our\n[blog post](https://research.google/blog/xr-blocks-accelerating-ai-xr-innovation/)\nand [white paper](https://arxiv.org/abs/2509.25504) for a visionary roadmap.\n\n### Usage\n\nXR Blocks can be imported directly into a webpage using an importmap. This code\ncreates a basic XR scene containing a cylinder. When you view the scene, you can\npinch your fingers (in XR) or click (in the desktop simulator) to change the\ncylinder's color. Check out\n[this live demo](https://xrblocks.github.io/docs/templates/Basic/) with simple\ncode below:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eBasic Example | XR Blocks\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\n    /\u003e\n    \u003clink\n      type=\"text/css\"\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/gh/google/xrblocks@main/samples/main.css\"\n    /\u003e\n    \u003cscript type=\"importmap\"\u003e\n      {\n        \"imports\": {\n          \"three\": \"https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js\",\n          \"three/addons/\": \"https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/\",\n          \"xrblocks\": \"https://cdn.jsdelivr.net/gh/google/xrblocks@build/xrblocks.js\",\n          \"xrblocks/addons/\": \"https://cdn.jsdelivr.net/gh/google/xrblocks@build/addons/\"\n        }\n      }\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript type=\"module\"\u003e\n      import * as THREE from 'three';\n      import * as xb from 'xrblocks';\n\n      /**\n       * A basic example of XRBlocks to render a cylinder and pinch to change its color.\n       */\n      class MainScript extends xb.Script {\n        init() {\n          // Add a simple light to the scene.\n          this.add(new THREE.HemisphereLight(0xffffff, 0x666666, 3));\n\n          // Create the 3D object.\n          const geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.4, 32);\n          const material = new THREE.MeshPhongMaterial({\n            color: 0xffffff,\n            transparent: true,\n            opacity: 0.8,\n          });\n          this.player = new THREE.Mesh(geometry, material);\n\n          // Position the object in front of the user.\n          this.player.position.set(\n            0,\n            xb.user.height - 0.5,\n            -xb.user.objectDistance\n          );\n          this.add(this.player);\n        }\n\n        /**\n         * Changes the color of the mesh on a pinch or click.\n         */\n        onSelectEnd(event) {\n          this.player.material.color.set(Math.random() * 0xffffff);\n        }\n      }\n\n      // When the page content is loaded, add our script and initialize XR Blocks.\n      document.addEventListener('DOMContentLoaded', function () {\n        xb.add(new MainScript());\n        xb.init(new xb.Options());\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Gem\n\nFor rapid prototyping, please refer to this\n[blog](https://research.google/blog/vibe-coding-xr-accelerating-ai-xr-prototyping-with-xr-blocks-and-gemini)\nand try out [XR Blocks Gem](https://xrblocks.github.io/gem) on Android XR or\ndesktop using Chrome.\n\nA video demonstration of XR Blocks Gem can be found\n[here](https://www.youtube.com/watch?v=nknCzIxHHzw).\n\n### Development Guide\n\n#### Setup\n\n```bash\n# Clone the repository.\ngit clone --depth=1 git@github.com:google/xrblocks.git\ncd xrblocks\n\n# Install dependencies and build the SDK.\nnpm ci\n```\n\nAfter setup, either serve the samples and demos or develop locally, as described\nbelow.\n\n#### Serve samples and demos\n\nServe the repository to view samples and demos through `http://localhost:8080/`:\n\n```bash\n# Serve the repository on http://localhost:8080\nnpm run serve\n```\n\n#### Develop locally\n\nFor active SDK development, run watch mode and local serving together:\n\n```bash\n# Build the SDK in watch mode and serve the repository on http://localhost:8080\nnpm run dev\n```\n\n#### Linting and formatting\n\nXR Blocks uses ESLint for linting and Prettier for formatting. Run the following\ncommands to check your code before submitting a pull request:\n\n```bash\nnpm run lint # ESLint check\nnpm run format # Prettier format\n```\n\nIf you are using VS Code, install the\n[ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\nand the\n[Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode),\nthen set Prettier as your default formatter.\n\n#### Notice\n\nThis is not an officially supported Google product, but will be actively\nmaintained by the XR Labs team and external collaborators. This project is not\neligible for the\n[Google Open Source Software Vulnerability Rewards Program](https://bughunters.google.com/open-source-security).\n\n### User Data \u0026 Permissions\n\nWhen using specific features in this SDK (e.g., WebXR, hand tracking, camera),\nusers will be prompted with permission requests and the application may not\nfunction as expected with denied permissions.\n\nXR Blocks is an open source software development kit that does not handle data\nby itself; however, the use of other APIs may collect user data and require user\npermissions:\n\nWhen using [WebXR](https://immersive-web.github.io/) and\n[LiteRT](https://ai.google.dev/edge/litert) APIs (e.g., depth sensing, gesture\nrecognition), all data is stored and processed locally with on-device models.\n\nWhen using AI features (e.g.,\n[Gemini Live](https://gemini.google/overview/gemini-live), Gemini Flash), the\ndata will be sent to Gemini servers and please follow\n[Gemini's Privacy \u0026 Terms](https://ai.google.dev/gemini-api/terms).\n\n### Keep Your API Key Secure\n\nThis SDK does not require any API keys for non-AI samples. In specific AI use\ncases, this SDK provides an interface to use cloud-hosted Gemini services with\nXR experiences, requiring an API key from\n[AI Studio](https://aistudio.google.com/app/apikey). Please follow\n[this doc](https://ai.google.dev/gemini-api/docs/api-key#security) for best\npractices to keep your API key secure.\n\nTreat your Gemini API key like a password. If compromised, others can use your\nproject's quota, incur charges (if billing is enabled), and access your private\ndata, such as files.\n\n#### Critical Security Rules\n\nNever commit API keys to source control. Do not check your API key into version\ncontrol systems like Git.\n\nNever expose API keys on the client-side. Do not use your API key directly in\nweb or mobile apps in production. Keys in client-side code (including our\nJavaScript/TypeScript libraries and REST calls) can be extracted.\n\n### Uninstallation\n\nTo remove XR Blocks from your code, simply remove the lines from your `\u003cscript\ntype=\"importmap\"\u003e` tag in HTML, or `import * from xrblocks` in JavaScript, or\nuse `npm uninstall xrblocks` from your project directory.\n\n### References\n\nIf you find XR Blocks inspiring or useful in your research, please reference it\nas:\n\n```bibtex\n@misc{Li2025XR,\n  title={{XR Blocks: Accelerating Human-centered AI + XR Innovation}},\n  author={Li, David and Numan, Nels and Qian, Xun and Chen, Yanhe and Zhou, Zhongyi and Alekseev, Evgenii and Lee, Geonsun and Cooper, Alex and Xia, Min and Chung, Scott and Nelson, Jeremy and Yuan, Xiuxiu and Dias, Jolica and Bettridge, Tim and Hersh, Benjamin and Huynh, Michelle and Piascik, Konrad and Cabello, Ricardo and Kim, David and Du, Ruofei},\n  year={2025},\n  eprint={2509.25504},\n  archivePrefix={arXiv},\n  primaryClass={cs.HC},\n  url={https://arxiv.org/abs/2509.25504},\n}\n```\n\n```bibtex\n@misc{Du2026Vibe,\n  title={Vibe Coding XR: Accelerating AI + XR Prototyping with XR Blocks and Gemini},\n  author={Ruofei Du and Benjamin Hersh and David Li and Nels Numan and Xun Qian and Yanhe Chen and Zhongyi Zhou and Xingyue Chen and Jiahao Ren and Robert Timothy Bettridge and Steve Toh and David Kim},\n  year={2026},\n  eprint={2603.24591},\n  archivePrefix={arXiv},\n  primaryClass={cs.HC},\n  url={https://arxiv.org/abs/2603.24591},\n}\n```\n\n### Terms of Service\n\n- Please follow\n  [Google's Privacy \u0026 Terms](https://policies.google.com/privacy?hl=en-US)\n  when using this SDK.\n\n- When using AI features in this SDK, please follow\n  [Gemini's Privacy \u0026 Terms](https://ai.google.dev/gemini-api/terms).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Fxrblocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle%2Fxrblocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Fxrblocks/lists"}