From aa6841bcfb580ea16dbd1be8fbe51d646f07058e Mon Sep 17 00:00:00 2001
From: Rody Davis <rody.davis.jr@gmail.com>
Date: Fri, 13 Dec 2024 16:33:51 -0800
Subject: [PATCH 1/2] Add IDX support

---
 .idx/dev.nix | 39 +++++++++++++++++++++++++++++++++++++++
 README.md    | 15 +++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 .idx/dev.nix

diff --git a/.idx/dev.nix b/.idx/dev.nix
new file mode 100644
index 000000000..3615ab864
--- /dev/null
+++ b/.idx/dev.nix
@@ -0,0 +1,39 @@
+# 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 = {};
+  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" "--" "--port" "$PORT" "--hostname" "0.0.0.0"];
+          manager = "web";
+        };
+      };
+    };
+  };
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 9b73e4d9a..3d12e7d65 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,20 @@
 # Multimodal Live API - Web console
 
+<a href="https://idx.google.com/import?url=https%3A%2F%2Fgithub.com%2Fgoogle-gemini%2Fmultimodal-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:

From 33aec7c8c8b0f6cbf57511dbf4f6e9d8e093cd69 Mon Sep 17 00:00:00 2001
From: Rody Davis <rody.davis.jr@gmail.com>
Date: Fri, 13 Dec 2024 16:44:42 -0800
Subject: [PATCH 2/2] add IDX template files

---
 .idx/dev.nix      |  9 +++++++--
 README.md         |  2 +-
 idx-template.json |  7 +++++++
 idx-template.nix  | 14 ++++++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 idx-template.json
 create mode 100644 idx-template.nix

diff --git a/.idx/dev.nix b/.idx/dev.nix
index 3615ab864..31ea3fb15 100644
--- a/.idx/dev.nix
+++ b/.idx/dev.nix
@@ -8,7 +8,9 @@
     pkgs.nodejs_20
   ];
   # Sets environment variables in the workspace
-  env = {};
+  env = {
+    REACT_APP_GEMINI_API_KEY = "";
+  };
   idx = {
     # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
     extensions = [
@@ -30,8 +32,11 @@
       enable = true;
       previews = {
         web = {
-          command = ["npm" "run" "start" "--" "--port" "$PORT" "--hostname" "0.0.0.0"];
+          command = ["npm" "run" "start"];
           manager = "web";
+          env = {
+            PORT = "$PORT";
+          };
         };
       };
     };
diff --git a/README.md b/README.md
index 3d12e7d65..88732eec4 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Multimodal Live API - Web console
 
-<a href="https://idx.google.com/import?url=https%3A%2F%2Fgithub.com%2Fgoogle-gemini%2Fmultimodal-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)"
diff --git a/idx-template.json b/idx-template.json
new file mode 100644
index 000000000..976b42707
--- /dev/null
+++ b/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"
+}
diff --git a/idx-template.nix b/idx-template.nix
new file mode 100644
index 000000000..8d1dccb72
--- /dev/null
+++ b/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"
+  '';
+}
\ No newline at end of file