Add IDX support

.idx/dev.nix

@@ -0,0 +1,44 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{pkgs}: {
+  # Which nixpkgs channel to use.
+  channel = "stable-24.05"; # or "unstable"
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.nodejs_20
+  ];
+  # Sets environment variables in the workspace
+  env = {
+    REACT_APP_GEMINI_API_KEY = "";
+  };
+  idx = {
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      # "vscodevim.vim"
+    ];
+    workspace = {
+      # Runs when a workspace is first created with this `dev.nix` file
+      onCreate = {
+        npm-install = "npm ci --no-audit --prefer-offline --no-progress --timing";
+        # Open editors for the following files by default, if they exist:
+        default.openFiles = [
+          "src/App.tsx"
+        ];
+      };
+      # To run something each time the workspace is (re)started, use the `onStart` hook
+    };
+    # Enable previews and customize configuration
+    previews = {
+      enable = true;
+      previews = {
+        web = {
+          command = ["npm" "run" "start"];
+          manager = "web";
+          env = {
+            PORT = "$PORT";
+          };
+        };
+      };
+    };
+  };
+}

README.md

@@ -1,5 +1,20 @@
 # Multimodal Live API - Web console
 
+<a href="https://idx.google.com/new?template=https://github.com/google-gemini/multimodal-live-api-web-console">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://cdn.idx.dev/btn/try_light_32.svg">
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://cdn.idx.dev/btn/try_dark_32.svg">
+    <img
+      height="32"
+      alt="Try in IDX"
+      src="https://cdn.idx.dev/btn/try_purple_32.svg">
+  </picture>
+</a>
+
 This repository contains a react-based starter app for using the [Multimodal Live API](https://ai.google.dev/gemini-api) over a websocket. It provides modules for streaming audio playback, recording user media such as from a microphone, webcam or screen capture as well as a unified log view to aid in development of your application.
 
 We have provided several example applications on other branches of this repository:

idx-template.json

@@ -0,0 +1,7 @@
+{
+  "name": "Multimodal Live API - Web console",
+  "description": "React-based starter app for using the Multimodal Live API over a websocket",
+  "categories": ["AI & ML"],
+  "icon": "https://www.gstatic.com/monospace/231128/logo_gemini_512.png",
+  "publisher": "Google LLC"
+}

idx-template.nix

@@ -0,0 +1,14 @@
+{ pkgs, ... }: {
+  packages = [];
+  bootstrap = ''
+    mkdir "$out"
+    cp -rf ${./.}/* "$out"
+    mkdir "$out/.idx"
+    cp -rf ${./.}/.idx "$out"
+    cp -rf ${./.}/.gcloudignore "$out/.gcloudignore"
+    cp -rf ${./.}/.env "$out/.env"
+    rm "$out/idx-template.nix"
+    rm "$out/idx-template.json"
+    chmod -R u+w "$out"
+  '';
+}