← ClaudeAtlas

openui-forge-elixirlisted

OpenUI generative UI with Elixir Phoenix backend. Chunked SSE streaming via Plug.Conn and Req.
OthmanAdi/openui-forge · ★ 22 · AI & Automation · score 79
Install: claude install-skill OthmanAdi/openui-forge
# OpenUI Forge — Elixir Build generative UI apps with a React frontend + Elixir Phoenix backend. Streams OpenAI API responses directly to the browser as SSE using `Plug.Conn.send_chunked/2` and the Req HTTP client's streaming `:into` collector. ## Activation Triggers - "openui elixir", "openui phoenix", "openui elixir backend" - "generative ui elixir", "elixir streaming ui backend", "phoenix sse openui" ## Prerequisites - Node.js >= 22 (24 LTS recommended) + React >= 18.3.1 (19+ recommended) (frontend) - Elixir >= 1.15 with Erlang/OTP 25+ (Phoenix 1.8 baseline) - Phoenix ~> 1.8 (current stable; 1.8.8 as of June 2026) - `OPENAI_API_KEY` environment variable set ## Quick Start 1. Create the React frontend and install OpenUI deps: ```bash npm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod ``` 2. Generate the system prompt into the Phoenix app's `priv/`: ```bash npx @openuidev/cli generate ./src/lib/library.ts --out backend/priv/system-prompt.txt ``` 3. Create the Phoenix backend (see Full Code below) 4. Run: `mix deps.get && mix phx.server` on `:4000`, frontend on `:3000` ## Full Code ### Backend: `backend/mix.exs` (deps) ```elixir defp deps do [ {:phoenix, "~> 1.8.0"}, {:bandit, "~> 1.0"}, # HTTP server (Phoenix 1.8 default) {:jason, "~> 1.4"}, # JSON encode/decode {:req, "~> 0.6"}, # HTTP client with streaming :into (v0.6.2+) {:cors_plug, "~> 3.0"} # explicit-origin CORS ] end