Antigravity × Elixir/Phoenix LiveView Guide — Build Real-Time Web Apps Faster with AI

Setup and context — Why Elixir/Phoenix and Antigravity Work So Well Together

Among the many languages gaining traction in 2026, Elixir stands out for its exceptional approach to concurrency, fault tolerance, and scalability. Built on the Erlang VM, it's a natural fit for applications that require persistent connections — think chat apps, live dashboards, collaborative editors, and real-time analytics. Phoenix LiveView, the flagship feature of the Phoenix web framework, takes this further by combining WebSockets with server-side rendering, letting you build rich real-time UIs with minimal JavaScript.

Antigravity, meanwhile, is an AI-first IDE where intelligent code completion is woven into every part of the development workflow. Even for developers who are new to Elixir's distinctive syntax — pattern matching, the |> pipe operator, immutable data structures — Antigravity's AI understands the context of your code and suggests accurate completions, dramatically flattening the learning curve.

What Makes This Combination Powerful

There are a few specific reasons this pairing works especially well in practice.

First, Elixir's syntax is expressive but unfamiliar to developers coming from Ruby, Python, or JavaScript. Pattern matching across function clauses, recursion-heavy list processing, and process-based concurrency all have steep initial learning curves. Antigravity's AI narrows that gap considerably — you can describe what you want in natural language ("extract the user ID from this tuple if it matches {:ok, user}") and get back syntactically correct Elixir.

Second, Phoenix LiveView applications tend to be stateful on the server side. The LiveView process holds socket state, and managing that state across events can be tricky at first. Antigravity understands this pattern and correctly suggests assign/3 calls, event handlers, and PubSub integrations without needing to be explicitly taught the framework's conventions.

Third, because Elixir is a compiled language with strict pattern matching, typos and structural mistakes surface early as compile errors rather than runtime bugs. Antigravity's inline error highlighting and quick-fix suggestions make iterating on these errors much faster than working in a plain text editor.

Prerequisites and Environment Setup

What You'll Need

• Elixir 1.16+ (OTP 26)
• Phoenix 1.7+
• PostgreSQL 15+ (via Ecto)
• Node.js 20+ (for asset bundling)
• Antigravity latest version (1.20+ recommended)

Installing Elixir and Phoenix

On macOS, asdf is the recommended version manager:

# Install Erlang and Elixir via asdf
asdf plugin add erlang
asdf plugin add elixir
asdf install erlang 26.2
asdf install elixir 1.16.2-otp-26
asdf global erlang 26.2
asdf global elixir 1.16.2-otp-26
 
# Install Phoenix
mix local.hex --force
mix archive.install hex phx_new --force
 
# Verify
elixir --version
# Erlang/OTP 26 [erts-14.2.2] ...
# Elixir 1.16.2 (compiled with Erlang/OTP 26)

Enable Elixir Support in Antigravity

Open Antigravity, press Cmd+Shift+P (macOS) to open the command palette, search for Extensions: Install Extensions, and install ElixirLS. Once installed, the language server activates, integrating Elixir's type information with Antigravity's AI completions.

// .antigravity/settings.json
{
  "elixirLS.fetchDeps": true,
  "elixirLS.dialyzerEnabled": true,
  "antigravity.ai.contextFiles": ["lib/", "test/", "config/"]
}

Setting contextFiles to your project's core directories gives Antigravity's AI a full picture of your codebase, leading to more accurate and context-aware suggestions.

Creating a Phoenix Project and Configuring Antigravity

Scaffold a New Phoenix App

# Create a new Phoenix project with LiveView enabled
mix phx.new realtime_demo --live
cd realtime_demo
 
# Install dependencies
mix deps.get
cd assets && npm install && cd ..
 
# Create the database
mix ecto.create

Open the Project in Antigravity

antigravity .

Once Antigravity indexes the project, it recognizes Phoenix's directory conventions automatically. You can open the inline chat (Cmd+I) and type something like "add a LiveView for a real-time counter" — Antigravity will generate a well-structured module that follows Phoenix conventions.

Step-by-Step Tutorial: Building a Real-Time Counter

Step 1: Create the LiveView Module

Open Antigravity's inline chat (Cmd+I) and enter:

Create a real-time counter LiveView. Users can increment and decrement
the count, and all connected clients should see updates instantly via PubSub.

Antigravity will generate something close to this (adjust as needed):

# lib/realtime_demo_web/live/counter_live.ex
defmodule RealtimeDemoWeb.CounterLive do
  use RealtimeDemoWeb, :live_view
 
  @topic "counter"
 
  @impl true
  def mount(_params, _session, socket) do
    if connected?(socket) do
      # Subscribe to the shared counter topic
      Phoenix.PubSub.subscribe(RealtimeDemo.PubSub, @topic)
    end
 
    {:ok, assign(socket, :count, 0)}
  end
 
  @impl true
  def handle_event("increment", _params, socket) do
    new_count = socket.assigns.count + 1
    # Broadcast the new count to all connected clients
    Phoenix.PubSub.broadcast(RealtimeDemo.PubSub, @topic, {:count_updated, new_count})
    {:noreply, assign(socket, :count, new_count)}
  end
 
  @impl true
  def handle_event("decrement", _params, socket) do
    new_count = max(socket.assigns.count - 1, 0)
    Phoenix.PubSub.broadcast(RealtimeDemo.PubSub, @topic, {:count_updated, new_count})
    {:noreply, assign(socket, :count, new_count)}
  end
 
  @impl true
  def handle_info({:count_updated, new_count}, socket) do
    {:noreply, assign(socket, :count, new_count)}
  end
 
  @impl true
  def render(assigns) do
    ~H"""
    <div class="flex flex-col items-center gap-6 p-12">
      <h1 class="text-3xl font-bold">Real-Time Counter</h1>
      <p class="text-6xl font-mono tabular-nums"><%= @count %></p>
      <div class="flex gap-4">
        <button phx-click="decrement"
          class="px-6 py-3 bg-red-500 text-white rounded-lg text-xl hover:bg-red-600">
          −
        </button>
        <button phx-click="increment"
          class="px-6 py-3 bg-green-500 text-white rounded-lg text-xl hover:bg-green-600">
          ＋
        </button>
      </div>
      <p class="text-sm text-gray-500">
        Changes are synced instantly across all connected users.
      </p>
    </div>
    """
  end
end

Expected behavior: Open multiple browser tabs, click the buttons in any tab, and watch all tabs update in real time.

Step 2: Add the Route

# lib/realtime_demo_web/router.ex
scope "/", RealtimeDemoWeb do
  pipe_through :browser
 
  live "/", CounterLive, :index
end

Step 3: Start the Server

mix phx.server
# [info] Running RealtimeDemoWeb.Endpoint with cowboy 2.11.0 at 0.0.0.0:4000 (http)

Visit http://localhost:4000 in two browser windows side by side. Clicking the increment button in one window should immediately update the count in the other — no polling, no manual refresh, no client-side JavaScript state management required.

For containerizing your Elixir development environment, check out Antigravity × Docker — AI-Assisted Development in Container Environments, which covers how to run Elixir and PostgreSQL together reliably across machines.

Common Errors and How to Fix Them

Error 1: (Mix) The database for RealtimeDemo.Repo couldn't be created

PostgreSQL isn't running or the connection credentials are incorrect.

# Check PostgreSQL status
pg_ctl status -D /usr/local/var/postgresql@15
 
# Start if stopped
brew services start postgresql@15
 
# Verify credentials in config/dev.exs
# username: "postgres", password: "postgres", hostname: "localhost"

Error 2: (UndefinedFunctionError) function Phoenix.PubSub.subscribe/2 is undefined

The :phoenix_pubsub dependency may be missing in older Phoenix setups. Add it explicitly:

# mix.exs
defp deps do
  [
    {:phoenix, "~> 1.7"},
    {:phoenix_pubsub, "~> 2.1"},
    # ...
  ]
end

Then run mix deps.get to fetch it.

Error 3: Antigravity Doesn't Recognize .ex/.heex Files

Update file associations in your Antigravity settings:

// .antigravity/settings.json
{
  "files.associations": {
    "*.ex": "elixir",
    "*.exs": "elixir",
    "*.heex": "html-eex"
  }
}

Going Further: Connecting LiveView Events to External Automations

Once you have real-time events flowing through your Phoenix app, you can connect them to external services using workflow tools. For example, you might want to send a Slack notification when a counter hits a threshold, or log events to a data warehouse. Antigravity × n8n: Connecting AI Agents with Automated Workflows is a great companion guide for building those kinds of automation pipelines without writing boilerplate integration code.

You can also explore the Antigravity MCP Store for Elixir-related MCP servers — such as Hex.pm package search and mix task runners — that plug directly into your development environment.

Summary

Combining Antigravity with Elixir and Phoenix LiveView opens a compelling path to building real-time, resilient web applications. Antigravity's AI guidance lowers the barrier to Elixir's functional paradigm, while LiveView's server-driven model lets you build reactive UIs without the complexity of a separate JavaScript framework.

• Elixir/Phoenix LiveView is purpose-built for real-time, high-availability applications
• Antigravity's AI completions handle Elixir's unique syntax with confidence
• PubSub-powered multi-client sync is achievable in just a few dozen lines of code
• Pairing Docker and the MCP Store makes your development environment reproducible and extensible

Give it a try — open Antigravity, scaffold a Phoenix project, and see how quickly a real-time feature comes together when your IDE is working alongside you.