diff --git a/examples/phoenix/image_classification.exs b/examples/phoenix/image_classification.exs
index d77f0c7c..f0374f42 100644
--- a/examples/phoenix/image_classification.exs
+++ b/examples/phoenix/image_classification.exs
@@ -1,17 +1,5 @@
-Application.put_env(:sample, PhoenixDemo.Endpoint,
-  http: [ip: {127, 0, 0, 1}, port: 8080],
-  server: true,
-  live_view: [signing_salt: "bumblebee"],
-  secret_key_base: String.duplicate("b", 64),
-  pubsub_server: PhoenixDemo.PubSub
-)
-
 Mix.install([
-  {:plug_cowboy, "~> 2.6"},
-  {:jason, "~> 1.4"},
-  {:phoenix, "1.7.10"},
-  {:phoenix_live_view, "0.20.1"},
-  # Bumblebee and friends
+  {:phoenix_playground, "~> 0.1.7"},
   {:bumblebee, "~> 0.6.0"},
   {:nx, "~> 0.9.0"},
   {:exla, "~> 0.9.0"}
@@ -19,201 +7,178 @@ Mix.install([
 
 Application.put_env(:nx, :default_backend, EXLA.Backend)
 
-defmodule PhoenixDemo.Layouts do
-  use Phoenix.Component
+defmodule DemoLive do
+  use Phoenix.LiveView
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok,
+     socket
+     |> assign(label: nil)
+     |> allow_upload(:image, accept: :any, progress: &handle_progress/3, auto_upload: true)}
+  end
 
-  def render("live.html", assigns) do
+  @impl true
+  def render(assigns) do
     ~H"""
-    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.10/priv/static/phoenix.min.js">
-    </script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.20.1/priv/static/phoenix_live_view.min.js"
-    >
+    <script src="https://cdn.tailwindcss.com">
     </script>
-    <script>
-      const DROP_CLASSES = ["bg-blue-100", "border-blue-300"];
-
-      const ImageInput = {
-        mounted() {
-          this.props = {
-            height: parseInt(this.el.dataset.height),
-            width: parseInt(this.el.dataset.width),
-          };
-
-          this.inputEl = this.el.querySelector(`[data-el-input]`);
-          this.previewEl = this.el.querySelector(`[data-el-preview]`);
-
-          // File selection
-
-          this.el.addEventListener("click", (event) => {
-            this.inputEl.click();
-          });
-
-          this.inputEl.addEventListener("change", (event) => {
-            const [file] = event.target.files;
-            file && this.loadFile(file);
-          });
-
-          // Drag and drop
-
-          this.el.addEventListener("dragover", (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "copy";
-          });
-
-          this.el.addEventListener("drop", (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            const [file] = event.dataTransfer.files;
-            file && this.loadFile(file);
-          });
-
-          this.el.addEventListener("dragenter", (event) => {
-            this.el.classList.add(...DROP_CLASSES);
-          });
-
-          this.el.addEventListener("dragleave", (event) => {
-            if (!this.el.contains(event.relatedTarget)) {
-              this.el.classList.remove(...DROP_CLASSES);
-            }
-          });
 
-          this.el.addEventListener("drop", (event) => {
-            this.el.classList.remove(...DROP_CLASSES);
-          });
-        },
+    <div class="h-screen w-screen flex items-center justify-center antialiased">
+      <div class="flex flex-col items-center w-1/2">
+        <form class="m-0 flex flex-col items-center space-y-2" phx-change="noop" phx-submit="noop">
+          <.image_input id="image" upload={@uploads.image} height={224} width={224} />
+        </form>
+        <div class="mt-6 flex space-x-1.5 items-center text-gray-600 text-lg">
+          <span>Label:</span>
+          <.async_result :let={label} :if={@label} assign={@label}>
+            <:loading>
+              <.spinner />
+            </:loading>
+            <:failed :let={_reason}>
+              <span>Oops, something went wrong!</span>
+            </:failed>
+            <span class="text-gray-900 font-medium"><%= label %></span>
+          </.async_result>
+        </div>
+      </div>
 
-        loadFile(file) {
-          const reader = new FileReader();
+      <script>
+        const DROP_CLASSES = ["bg-blue-100", "border-blue-300"];
 
-          reader.onload = (readerEvent) => {
-            const imgEl = document.createElement("img");
+        window.hooks.ImageInput = {
+          mounted() {
+            this.props = {
+              height: parseInt(this.el.dataset.height),
+              width: parseInt(this.el.dataset.width),
+            };
 
-            imgEl.addEventListener("load", (loadEvent) => {
-              this.setPreview(imgEl);
+            this.inputEl = this.el.querySelector(`[data-el-input]`);
+            this.previewEl = this.el.querySelector(`[data-el-preview]`);
 
-              const canvas = this.toCanvas(imgEl);
-              const blob = this.canvasToBlob(canvas);
-              this.upload("image", [blob]);
+            // File selection
+
+            this.el.addEventListener("click", (event) => {
+              this.inputEl.click();
             });
 
-            imgEl.src = readerEvent.target.result;
-          };
+            this.inputEl.addEventListener("change", (event) => {
+              const [file] = event.target.files;
+              file && this.loadFile(file);
+            });
 
-          reader.readAsDataURL(file);
-        },
+            // Drag and drop
 
-        setPreview(imgEl) {
-          // Keep the original image size intact
-          const previewImgEl = imgEl.cloneNode();
-          previewImgEl.style.maxHeight = "100%";
-          this.previewEl.replaceChildren(previewImgEl);
-        },
+            this.el.addEventListener("dragover", (event) => {
+              event.stopPropagation();
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+            });
 
-        toCanvas(imgEl) {
-          // We resize the image, such that it fits in the configured
-          // height x width, but keeping the aspect ratio. We could
-          // also easily crop, pad or squash the image, if desired
+            this.el.addEventListener("drop", (event) => {
+              event.stopPropagation();
+              event.preventDefault();
+              const [file] = event.dataTransfer.files;
+              file && this.loadFile(file);
+            });
 
-          const { width, height } = imgEl;
-          const { width: boundWidth, height: boundHeight } = this.props;
+            this.el.addEventListener("dragenter", (event) => {
+              this.el.classList.add(...DROP_CLASSES);
+            });
 
-          const canvas = document.createElement("canvas");
-          const ctx = canvas.getContext("2d");
+            this.el.addEventListener("dragleave", (event) => {
+              if (!this.el.contains(event.relatedTarget)) {
+                this.el.classList.remove(...DROP_CLASSES);
+              }
+            });
 
-          const widthScale = boundWidth / width;
-          const heightScale = boundHeight / height;
-          const scale = Math.min(widthScale, heightScale);
+            this.el.addEventListener("drop", (event) => {
+              this.el.classList.remove(...DROP_CLASSES);
+            });
+          },
 
-          const scaledWidth = Math.round(width * scale);
-          const scaledHeight = Math.round(height * scale);
+          loadFile(file) {
+            const reader = new FileReader();
 
-          canvas.width = scaledWidth;
-          canvas.height = scaledHeight;
+            reader.onload = (readerEvent) => {
+              const imgEl = document.createElement("img");
 
-          ctx.drawImage(imgEl, 0, 0, width, height, 0, 0, scaledWidth, scaledHeight);
+              imgEl.addEventListener("load", (loadEvent) => {
+                this.setPreview(imgEl);
 
-          return canvas;
-        },
+                const canvas = this.toCanvas(imgEl);
+                const blob = this.canvasToBlob(canvas);
+                this.upload("image", [blob]);
+              });
 
-        canvasToBlob(canvas) {
-          const imageData = canvas
-            .getContext("2d")
-            .getImageData(0, 0, canvas.width, canvas.height);
+              imgEl.src = readerEvent.target.result;
+            };
 
-          const buffer = this.imageDataToRGBBuffer(imageData);
+            reader.readAsDataURL(file);
+          },
 
-          const meta = new ArrayBuffer(8);
-          const view = new DataView(meta);
-          view.setUint32(0, canvas.height, false);
-          view.setUint32(4, canvas.width, false);
+          setPreview(imgEl) {
+            // Keep the original image size intact
+            const previewImgEl = imgEl.cloneNode();
+            previewImgEl.style.maxHeight = "100%";
+            this.previewEl.replaceChildren(previewImgEl);
+          },
 
-          return new Blob([meta, buffer], { type: "application/octet-stream" });
-        },
+          toCanvas(imgEl) {
+            // We resize the image, such that it fits in the configured
+            // height x width, but keeping the aspect ratio. We could
+            // also easily crop, pad or squash the image, if desired
 
-        imageDataToRGBBuffer(imageData) {
-          const pixelCount = imageData.width * imageData.height;
-          const bytes = new Uint8ClampedArray(pixelCount * 3);
+            const { width, height } = imgEl;
+            const { width: boundWidth, height: boundHeight } = this.props;
 
-          for (let i = 0; i < pixelCount; i++) {
-            bytes[i * 3] = imageData.data[i * 4];
-            bytes[i * 3 + 1] = imageData.data[i * 4 + 1];
-            bytes[i * 3 + 2] = imageData.data[i * 4 + 2];
-          }
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
 
-          return bytes.buffer;
-        },
-      };
+            const widthScale = boundWidth / width;
+            const heightScale = boundHeight / height;
+            const scale = Math.min(widthScale, heightScale);
 
-      const hooks = { ImageInput };
+            const scaledWidth = Math.round(width * scale);
+            const scaledHeight = Math.round(height * scale);
 
-      const liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket, { hooks });
-      liveSocket.connect();
-    </script>
-    <script src="https://cdn.tailwindcss.com">
-    </script>
-    <%= @inner_content %>
-    """
-  end
-end
+            canvas.width = scaledWidth;
+            canvas.height = scaledHeight;
 
-defmodule PhoenixDemo.ErrorView do
-  def render(_, _), do: "error"
-end
+            ctx.drawImage(imgEl, 0, 0, width, height, 0, 0, scaledWidth, scaledHeight);
 
-defmodule PhoenixDemo.SampleLive do
-  use Phoenix.LiveView, layout: {PhoenixDemo.Layouts, :live}
+            return canvas;
+          },
 
-  @impl true
-  def mount(_params, _session, socket) do
-    {:ok,
-     socket
-     |> assign(label: nil)
-     |> allow_upload(:image, accept: :any, progress: &handle_progress/3, auto_upload: true)}
-  end
+          canvasToBlob(canvas) {
+            const imageData = canvas
+              .getContext("2d")
+              .getImageData(0, 0, canvas.width, canvas.height);
 
-  @impl true
-  def render(assigns) do
-    ~H"""
-    <div class="h-screen w-screen flex items-center justify-center antialiased">
-      <div class="flex flex-col items-center w-1/2">
-        <form class="m-0 flex flex-col items-center space-y-2" phx-change="noop" phx-submit="noop">
-          <.image_input id="image" upload={@uploads.image} height={224} width={224} />
-        </form>
-        <div class="mt-6 flex space-x-1.5 items-center text-gray-600 text-lg">
-          <span>Label:</span>
-          <.async_result :let={label} assign={@label} :if={@label}>
-            <:loading>
-              <.spinner />
-            </:loading>
-            <:failed :let={_reason}>
-              <span>Oops, something went wrong!</span>
-            </:failed>
-            <span class="text-gray-900 font-medium"><%= label %></span>
-          </.async_result>
-        </div>
-      </div>
+            const buffer = this.imageDataToRGBBuffer(imageData);
+
+            const meta = new ArrayBuffer(8);
+            const view = new DataView(meta);
+            view.setUint32(0, canvas.height, false);
+            view.setUint32(4, canvas.width, false);
+
+            return new Blob([meta, buffer], { type: "application/octet-stream" });
+          },
+
+          imageDataToRGBBuffer(imageData) {
+            const pixelCount = imageData.width * imageData.height;
+            const bytes = new Uint8ClampedArray(pixelCount * 3);
+
+            for (let i = 0; i < pixelCount; i++) {
+              bytes[i * 3] = imageData.data[i * 4];
+              bytes[i * 3 + 1] = imageData.data[i * 4 + 1];
+              bytes[i * 3 + 2] = imageData.data[i * 4 + 2];
+            }
+
+            return bytes.buffer;
+          },
+        };
+      </script>
     </div>
     """
   end
@@ -276,7 +241,7 @@ defmodule PhoenixDemo.SampleLive do
       # Discard previous label so we show the loading state once more
       |> assign(:label, nil)
       |> assign_async(:label, fn ->
-        output = Nx.Serving.batched_run(PhoenixDemo.Serving, image)
+        output = Nx.Serving.batched_run(Demo.Serving, image)
         %{predictions: [%{label: label}]} = output
         {:ok, %{label: label}}
       end)
@@ -299,29 +264,6 @@ defmodule PhoenixDemo.SampleLive do
   end
 end
 
-defmodule PhoenixDemo.Router do
-  use Phoenix.Router
-
-  import Phoenix.LiveView.Router
-
-  pipeline :browser do
-    plug(:accepts, ["html"])
-  end
-
-  scope "/", PhoenixDemo do
-    pipe_through(:browser)
-
-    live("/", SampleLive, :index)
-  end
-end
-
-defmodule PhoenixDemo.Endpoint do
-  use Phoenix.Endpoint, otp_app: :sample
-
-  socket("/live", Phoenix.LiveView.Socket)
-  plug(PhoenixDemo.Router)
-end
-
 # Application startup
 
 {:ok, model_info} = Bumblebee.load_model({:hf, "microsoft/resnet-50"})
@@ -331,17 +273,12 @@ serving =
   Bumblebee.Vision.image_classification(model_info, featurizer,
     top_k: 1,
     compile: [batch_size: 4],
-    defn_options: [compiler: EXLA]
+    defn_options: [
+      compiler: EXLA,
+      cache: Path.join(System.tmp_dir!(), "bumblebee_examples/image_classification")
+    ]
   )
 
-{:ok, _} =
-  Supervisor.start_link(
-    [
-      {Phoenix.PubSub, name: PhoenixDemo.PubSub},
-      {Nx.Serving, serving: serving, name: PhoenixDemo.Serving, batch_timeout: 100},
-      PhoenixDemo.Endpoint
-    ],
-    strategy: :one_for_one
-  )
+Nx.Serving.start_link(serving: serving, name: Demo.Serving, batch_timeout: 100)
 
-Process.sleep(:infinity)
+PhoenixPlayground.start(live: DemoLive, port: 8080)
diff --git a/examples/phoenix/speech_to_text.exs b/examples/phoenix/speech_to_text.exs
index 7db93fee..f51bdb30 100644
--- a/examples/phoenix/speech_to_text.exs
+++ b/examples/phoenix/speech_to_text.exs
@@ -1,17 +1,5 @@
-Application.put_env(:sample, PhoenixDemo.Endpoint,
-  http: [ip: {127, 0, 0, 1}, port: 8080],
-  server: true,
-  live_view: [signing_salt: "bumblebee"],
-  secret_key_base: String.duplicate("b", 64),
-  pubsub_server: PhoenixDemo.PubSub
-)
-
 Mix.install([
-  {:plug_cowboy, "~> 2.6"},
-  {:jason, "~> 1.4"},
-  {:phoenix, "1.7.10"},
-  {:phoenix_live_view, "0.20.1"},
-  # Bumblebee and friends
+  {:phoenix_playground, "~> 0.1.7"},
   {:bumblebee, "~> 0.6.0"},
   {:nx, "~> 0.9.0"},
   {:exla, "~> 0.9.0"}
@@ -19,21 +7,62 @@ Mix.install([
 
 Application.put_env(:nx, :default_backend, EXLA.Backend)
 
-defmodule PhoenixDemo.Layouts do
-  use Phoenix.Component
+defmodule DemoLive do
+  use Phoenix.LiveView
 
-  def render("live.html", assigns) do
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok,
+     socket
+     |> assign(transcription: nil)
+     |> allow_upload(:audio, accept: :any, progress: &handle_progress/3, auto_upload: true)}
+  end
+
+  @impl true
+  def render(assigns) do
     ~H"""
-    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.10/priv/static/phoenix.min.js">
-    </script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.20.1/priv/static/phoenix_live_view.min.js"
-    >
+    <script src="https://cdn.tailwindcss.com">
     </script>
+
+    <div class="h-screen w-screen flex items-center justify-center antialiased">
+      <div class="flex flex-col items-center w-1/2">
+        <div class="mb-6 text-gray-600 text-lg">
+          <h1>Press and hold</h1>
+        </div>
+
+        <button
+          type="button"
+          id="microphone"
+          phx-hook="Microphone"
+          data-endianness={System.endianness()}
+          class="p-5 text-white bg-blue-700 rounded-full text-sm hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 active:bg-red-400 group"
+        >
+          <.microphone_icon class="w-8 h-8 group-active:animate-pulse" />
+        </button>
+
+        <form phx-change="noop" phx-submit="noop" class="hidden">
+          <.live_file_input upload={@uploads.audio} />
+        </form>
+
+        <div class="mt-6 flex space-x-1.5 items-center text-gray-600 text-lg">
+          <div>Transcription:</div>
+          <.async_result :let={transcription} :if={@transcription} assign={@transcription}>
+            <:loading>
+              <.spinner />
+            </:loading>
+            <:failed :let={_reason}>
+              <span>Oops, something went wrong!</span>
+            </:failed>
+            <span class="text-gray-900 font-medium"><%= transcription %></span>
+          </.async_result>
+        </div>
+      </div>
+    </div>
+
     <script>
       const SAMPLING_RATE = 16_000;
 
-      const Microphone = {
+      window.hooks.Microphone = {
         mounted() {
           this.mediaRecorder = null;
 
@@ -153,71 +182,7 @@ defmodule PhoenixDemo.Layouts do
           }
         },
       };
-
-      const hooks = { Microphone };
-
-      const liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket, { hooks });
-      liveSocket.connect();
     </script>
-    <script src="https://cdn.tailwindcss.com">
-    </script>
-    <%= @inner_content %>
-    """
-  end
-end
-
-defmodule PhoenixDemo.ErrorView do
-  def render(_, _), do: "error"
-end
-
-defmodule PhoenixDemo.SampleLive do
-  use Phoenix.LiveView, layout: {PhoenixDemo.Layouts, :live}
-
-  @impl true
-  def mount(_params, _session, socket) do
-    {:ok,
-     socket
-     |> assign(transcription: nil)
-     |> allow_upload(:audio, accept: :any, progress: &handle_progress/3, auto_upload: true)}
-  end
-
-  @impl true
-  def render(assigns) do
-    ~H"""
-    <div class="h-screen w-screen flex items-center justify-center antialiased">
-      <div class="flex flex-col items-center w-1/2">
-        <div class="mb-6 text-gray-600 text-lg">
-          <h1>Press and hold</h1>
-        </div>
-
-        <button
-          type="button"
-          id="microphone"
-          phx-hook="Microphone"
-          data-endianness={System.endianness()}
-          class="p-5 text-white bg-blue-700 rounded-full text-sm hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 active:bg-red-400 group"
-        >
-          <.microphone_icon class="w-8 h-8 group-active:animate-pulse" />
-        </button>
-
-        <form phx-change="noop" phx-submit="noop" class="hidden">
-          <.live_file_input upload={@uploads.audio} />
-        </form>
-
-        <div class="mt-6 flex space-x-1.5 items-center text-gray-600 text-lg">
-          <div>Transcription:</div>
-          <.async_result :let={transcription} assign={@transcription} :if={@transcription}>
-            <:loading>
-              <.spinner />
-            </:loading>
-            <:failed :let={_reason}>
-              <span>Oops, something went wrong!</span>
-            </:failed>
-            <span class="text-gray-900 font-medium"><%= transcription %></span>
-          </.async_result>
-        </div>
-      </div>
-    </div>
     """
   end
 
@@ -274,7 +239,7 @@ defmodule PhoenixDemo.SampleLive do
       # Discard previous transcription so we show the loading state once more
       |> assign(:transcription, nil)
       |> assign_async(:transcription, fn ->
-        output = Nx.Serving.batched_run(PhoenixDemo.Serving, audio)
+        output = Nx.Serving.batched_run(Demo.Serving, audio)
         transcription = output.chunks |> Enum.map_join(& &1.text) |> String.trim()
         {:ok, %{transcription: transcription}}
       end)
@@ -293,29 +258,6 @@ defmodule PhoenixDemo.SampleLive do
   end
 end
 
-defmodule PhoenixDemo.Router do
-  use Phoenix.Router
-
-  import Phoenix.LiveView.Router
-
-  pipeline :browser do
-    plug(:accepts, ["html"])
-  end
-
-  scope "/", PhoenixDemo do
-    pipe_through(:browser)
-
-    live("/", SampleLive, :index)
-  end
-end
-
-defmodule PhoenixDemo.Endpoint do
-  use Phoenix.Endpoint, otp_app: :sample
-
-  socket("/live", Phoenix.LiveView.Socket)
-  plug(PhoenixDemo.Router)
-end
-
 # Application startup
 
 {:ok, model_info} = Bumblebee.load_model({:hf, "openai/whisper-tiny"})
@@ -326,17 +268,12 @@ end
 serving =
   Bumblebee.Audio.speech_to_text_whisper(model_info, featurizer, tokenizer, generation_config,
     compile: [batch_size: 4],
-    defn_options: [compiler: EXLA]
+    defn_options: [
+      compiler: EXLA,
+      cache: Path.join(System.tmp_dir!(), "bumblebee_examples/speech_to_text")
+    ]
   )
 
-{:ok, _} =
-  Supervisor.start_link(
-    [
-      {Phoenix.PubSub, name: PhoenixDemo.PubSub},
-      {Nx.Serving, serving: serving, name: PhoenixDemo.Serving, batch_timeout: 100},
-      PhoenixDemo.Endpoint
-    ],
-    strategy: :one_for_one
-  )
+Nx.Serving.start_link(serving: serving, name: Demo.Serving, batch_timeout: 100)
 
-Process.sleep(:infinity)
+PhoenixPlayground.start(live: DemoLive, port: 8080)
diff --git a/examples/phoenix/text_classification.exs b/examples/phoenix/text_classification.exs
index 63436959..77b2d135 100644
--- a/examples/phoenix/text_classification.exs
+++ b/examples/phoenix/text_classification.exs
@@ -1,16 +1,5 @@
-Application.put_env(:sample, PhoenixDemo.Endpoint,
-  http: [ip: {127, 0, 0, 1}, port: 8080],
-  server: true,
-  live_view: [signing_salt: "bumblebee"],
-  secret_key_base: String.duplicate("b", 64)
-)
-
 Mix.install([
-  {:plug_cowboy, "~> 2.6"},
-  {:jason, "~> 1.4"},
-  {:phoenix, "1.7.10"},
-  {:phoenix_live_view, "0.20.1"},
-  # Bumblebee and friends
+  {:phoenix_playground, "~> 0.1.7"},
   {:bumblebee, "~> 0.6.0"},
   {:nx, "~> 0.9.0"},
   {:exla, "~> 0.9.0"}
@@ -18,34 +7,8 @@ Mix.install([
 
 Application.put_env(:nx, :default_backend, EXLA.Backend)
 
-defmodule PhoenixDemo.Layouts do
-  use Phoenix.Component
-
-  def render("live.html", assigns) do
-    ~H"""
-    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.10/priv/static/phoenix.min.js">
-    </script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.20.1/priv/static/phoenix_live_view.min.js"
-    >
-    </script>
-    <script>
-      const liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket);
-      liveSocket.connect();
-    </script>
-    <script src="https://cdn.tailwindcss.com">
-    </script>
-    <%= @inner_content %>
-    """
-  end
-end
-
-defmodule PhoenixDemo.ErrorView do
-  def render(_, _), do: "error"
-end
-
-defmodule PhoenixDemo.SampleLive do
-  use Phoenix.LiveView, layout: {PhoenixDemo.Layouts, :live}
+defmodule DemoLive do
+  use Phoenix.LiveView
 
   @impl true
   def mount(_params, _session, socket) do
@@ -55,6 +18,9 @@ defmodule PhoenixDemo.SampleLive do
   @impl true
   def render(assigns) do
     ~H"""
+    <script src="https://cdn.tailwindcss.com">
+    </script>
+
     <div class="h-screen w-screen flex items-center justify-center antialiased">
       <div class="flex flex-col h-1/2 w-1/2">
         <form phx-submit="predict" class="m-0 flex space-x-2">
@@ -74,7 +40,7 @@ defmodule PhoenixDemo.SampleLive do
         </form>
         <div class="mt-2 flex space-x-1.5 items-center text-gray-600 text-lg">
           <span>Emotion:</span>
-          <.async_result :let={label} assign={@label} :if={@label}>
+          <.async_result :let={label} :if={@label} assign={@label}>
             <:loading>
               <.spinner />
             </:loading>
@@ -117,7 +83,7 @@ defmodule PhoenixDemo.SampleLive do
       # Discard previous label so we show the loading state once more
       |> assign(:label, nil)
       |> assign_async(:label, fn ->
-        output = Nx.Serving.batched_run(PhoenixDemo.Serving, text)
+        output = Nx.Serving.batched_run(Demo.Serving, text)
         %{predictions: [%{label: label}]} = output
         {:ok, %{label: label}}
       end)
@@ -126,29 +92,6 @@ defmodule PhoenixDemo.SampleLive do
   end
 end
 
-defmodule PhoenixDemo.Router do
-  use Phoenix.Router
-
-  import Phoenix.LiveView.Router
-
-  pipeline :browser do
-    plug(:accepts, ["html"])
-  end
-
-  scope "/", PhoenixDemo do
-    pipe_through(:browser)
-
-    live("/", SampleLive, :index)
-  end
-end
-
-defmodule PhoenixDemo.Endpoint do
-  use Phoenix.Endpoint, otp_app: :sample
-
-  socket("/live", Phoenix.LiveView.Socket)
-  plug(PhoenixDemo.Router)
-end
-
 # Application startup
 
 {:ok, model_info} = Bumblebee.load_model({:hf, "finiteautomata/bertweet-base-emotion-analysis"})
@@ -158,16 +101,12 @@ serving =
   Bumblebee.Text.text_classification(model_info, tokenizer,
     top_k: 1,
     compile: [batch_size: 4, sequence_length: 100],
-    defn_options: [compiler: EXLA]
+    defn_options: [
+      compiler: EXLA,
+      cache: Path.join(System.tmp_dir!(), "bumblebee_examples/text_classification")
+    ]
   )
 
-{:ok, _} =
-  Supervisor.start_link(
-    [
-      {Nx.Serving, serving: serving, name: PhoenixDemo.Serving, batch_timeout: 100},
-      PhoenixDemo.Endpoint
-    ],
-    strategy: :one_for_one
-  )
+Nx.Serving.start_link(serving: serving, name: Demo.Serving, batch_timeout: 100)
 
-Process.sleep(:infinity)
+PhoenixPlayground.start(live: DemoLive, port: 8080)