Create Phoenix LiveView WebMCP example app

AGENTS.md

@@ -30,6 +30,14 @@ Welcome! This document helps you navigate the WebMCP Examples repository efficie
 - **Key file**: `rails/app/javascript/controllers/bookmarks_webmcp_controller.ts` - Stimulus controller with WebMCP tools
 - **API used**: `navigator.modelContext.registerTool()` in Stimulus
 
+#### Phoenix LiveView (Elixir)
+- **[phoenix-liveview/README.md](./phoenix-liveview/README.md)** - Counter + items with server-side state
+- **Location**: `/phoenix-liveview`
+- **Key files**:
+  - `lib/webmcp_demo_web/live/counter_live.ex` - LiveView with state management
+  - `assets/js/app.js` - WebMCP hook registration
+- **API used**: `navigator.modelContext.registerTool()` via LiveView hooks
+
 ### Legacy Examples (Deprecated - DO NOT USE)
 - **[relegated/README.md](./relegated/README.md)** - Old examples using deprecated MCP SDK
 - **Warning**: These use the legacy `@modelcontextprotocol/sdk` API
@@ -46,13 +54,17 @@ Welcome! This document helps you navigate the WebMCP Examples repository efficie
 
 ```bash
 # Navigate to the example
-cd vanilla  # or react, rails
+cd vanilla  # or react, rails, phoenix-liveview
 
 # Install dependencies
-pnpm install
+pnpm install  # For JS examples
+# OR
+mix setup     # For Phoenix example
 
 # Start development server
-pnpm dev
+pnpm dev      # For JS examples
+# OR
+mix phx.server  # For Phoenix example
 ```
 
 ### Adding a New Example
@@ -164,6 +176,12 @@ example-name/
 - Controller: `rails/app/javascript/controllers/bookmarks_webmcp_controller.ts`
 - Config: `rails/vite.config.ts`
 
+**Phoenix LiveView Example:**
+- Entry: `phoenix-liveview/lib/webmcp_demo/application.ex`
+- LiveView: `phoenix-liveview/lib/webmcp_demo_web/live/counter_live.ex`
+- WebMCP Hook: `phoenix-liveview/assets/js/app.js`
+- Config: `phoenix-liveview/config/config.exs`
+
 ## WebMCP Package Documentation
 
 - **[@mcp-b/global](https://docs.mcp-b.ai/packages/global)** - Core WebMCP polyfill for vanilla JS
@@ -190,7 +208,8 @@ example-name/
 ## Prerequisites
 
 - **Node.js**: 18 or higher (see `.nvmrc`)
-- **pnpm**: Package manager
+- **pnpm**: Package manager (for JS examples)
+- **Elixir**: 1.14+ (for Phoenix example)
 - **MCP-B Extension**: Chrome extension for testing WebMCP tools
 - **Browser**: Chrome or Chromium-based browser
 

README.md

@@ -36,7 +36,7 @@ git clone https://github.com/WebMCP-org/examples.git
 cd examples
 
 # Choose an example
-cd vanilla  # or react, rails
+cd vanilla  # or react, rails, phoenix-liveview
 
 # Install and run
 pnpm install
@@ -107,6 +107,24 @@ A bookmarks management application demonstrating Rails 7+ integration with Stimu
 
 ---
 
+### Phoenix LiveView Example
+
+**Location:** `/phoenix-liveview`
+
+A counter and item management app demonstrating WebMCP integration with Phoenix LiveView and server-side state.
+
+**Features:**
+- Uses `navigator.modelContext.registerTool()` via LiveView hooks
+- Server-side state management with real-time sync
+- Bidirectional communication: AI -> JavaScript -> LiveView -> Server
+- 6 AI-callable tools (counter operations + item CRUD + state query)
+
+**Tech:** Elixir, Phoenix 1.7, LiveView 1.0, `@mcp-b/global`
+
+[→ Documentation](./phoenix-liveview/README.md)
+
+---
+
 ### Legacy Examples (Deprecated)
 
 **Location:** `/relegated`
@@ -223,7 +241,7 @@ WebMCP enables AI assistants to interact with websites through APIs instead of s
 
 ```bash
 # Development (per example)
-cd vanilla  # or react, rails
+cd vanilla  # or react, rails, phoenix-liveview
 pnpm dev                    # Run development server
 pnpm build                  # Build for production
 pnpm preview                # Preview production build
@@ -243,15 +261,17 @@ pnpm preview                # Preview production build
 - [Vanilla Example](./vanilla/README.md) - Vanilla JavaScript implementation
 - [React Example](./react/README.md) - React with hooks implementation
 - [Rails Example](./rails/README.md) - Rails with Stimulus controllers
+- [Phoenix LiveView Example](./phoenix-liveview/README.md) - Elixir/Phoenix implementation
 - [Legacy Examples](./relegated/README.md) - Deprecated implementations
 
 ## Tech Stack
 
-- **Package Manager:** pnpm
-- **Build Tool:** Vite 6
-- **Language:** TypeScript 5.6
+- **Package Manager:** pnpm (JS), Mix (Elixir)
+- **Build Tool:** Vite 6, esbuild
+- **Languages:** TypeScript 5.6, Elixir 1.14+
 - **WebMCP Core:** @mcp-b/global
 - **React Integration:** @mcp-b/react-webmcp
+- **Phoenix Integration:** LiveView hooks + @mcp-b/global
 - **Validation:** JSON Schema, Zod
 
 ## Contributing

phoenix-liveview/.formatter.exs

@@ -0,0 +1,5 @@
+[
+  import_deps: [:phoenix],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}"]
+]

phoenix-liveview/.gitignore

@@ -0,0 +1,27 @@
+# Elixir/Phoenix
+/_build/
+/deps/
+/.fetch
+erl_crash.dump
+*.ez
+*.beam
+/config/*.secret.exs
+.elixir_ls/
+
+# Assets
+/assets/node_modules/
+/priv/static/assets/
+
+# Generated
+/priv/static/cache_manifest.json
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db

phoenix-liveview/.nvmrc

@@ -0,0 +1 @@
+18