Skip to content

Create Phoenix LiveView WebMCP example app#8

Merged
MiguelsPizza merged 3 commits intomainfrom
claude/phoenix-liveview-webmcp-01CTznLzuCr8snUWq8qcnXPQ
Dec 6, 2025
Merged

Create Phoenix LiveView WebMCP example app#8
MiguelsPizza merged 3 commits intomainfrom
claude/phoenix-liveview-webmcp-01CTznLzuCr8snUWq8qcnXPQ

Conversation

@MiguelsPizza
Copy link
Contributor

Introduces the first Phoenix LiveView example demonstrating WebMCP integration with server-side state management using Elixir.

Features:

  • Counter with increment/decrement/set operations
  • Item list management (add/remove/clear)
  • Real-time state synchronization via LiveView
  • 6 AI-callable tools via WebMCP hooks
  • Bidirectional communication: AI -> JS -> LiveView -> Server

Tech: Elixir, Phoenix 1.7, LiveView 1.0, @mcp-b/global

Also updates README.md and AGENTS.md to include the new example.

Description

Type of Change

  • New example
  • Bug fix in existing example
  • Documentation update
  • Refactoring (no functional changes)
  • Performance improvement
  • Dependency update

Related Issues

Fixes #
Related to #

Changes Made

  • Change 1
  • Change 2
  • Change 3

New Example Details

  • Example name:
  • Framework: [e.g., vanilla TypeScript, React, Vue]
  • WebMCP concepts demonstrated:
  • Tools registered:
  • Dependencies added:

Testing

Commands Run

cd [example-directory]
pnpm install     # ✓ Installed successfully
pnpm typecheck   # ✓ Passed
pnpm lint        # ✓ Passed
pnpm build       # ✓ Passed
pnpm dev         # ✓ Runs without errors

Manual Testing with MCP-B Extension

  • Extension detects the page
  • All registered tools appear in extension
  • Each tool executes successfully
  • UI updates correctly after tool execution
  • Error cases handled gracefully
  • Tested in Chrome/Edge
  • Tested on mobile (if applicable)

Screenshot/Demo

Checklist

  • My code follows the style guidelines in CONTRIBUTING.md
  • I have used the modern WebMCP API (@mcp-b/global or @mcp-b/react-webmcp)
  • I have NOT used deprecated APIs from /relegated
  • I have performed a self-review of my own code
  • I have added JSDoc comments to all exported functions/components
  • I have created/updated README.md for the example
  • My changes generate no TypeScript errors
  • I have tested with the MCP-B Chrome Extension
  • All tools register and execute successfully
  • Example runs without console errors

Documentation

  • README.md includes clear description of what the example demonstrates
  • README.md has installation and usage instructions
  • README.md explains WebMCP concepts used
  • Code has explanatory comments for WebMCP-specific code
  • Dependencies are documented in package.json

Additional Notes


For AI Agents: Please verify all items in the checklist before submitting. Run all commands listed in the Testing section.

@MiguelsPizza
Copy link
Contributor Author

@copilot

Copilot AI mentioned this pull request Dec 6, 2025
28 tasks
Copy link

Copilot AI commented Dec 6, 2025

@MiguelsPizza I've opened a new pull request, #9, to work on those changes. Once the pull request is ready, I'll request review from you.

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Introduces the first Phoenix LiveView example demonstrating WebMCP
integration with server-side state management using Elixir.

Features:
- Counter with increment/decrement/set operations
- Item list management (add/remove/clear)
- Real-time state synchronization via LiveView
- 6 AI-callable tools via WebMCP hooks
- Bidirectional communication: AI -> JS -> LiveView -> Server

Tech: Elixir, Phoenix 1.7, LiveView 1.0, @mcp-b/global

Also updates README.md and AGENTS.md to include the new example.
- Simplify app.js: remove verbose logging, use cleaner destructuring
- Make docs framework-agnostic (not specific to MCP-B extension)
- Tighten code comments to be concise and informative
- Update template text to reference tools generically
@MiguelsPizza MiguelsPizza force-pushed the claude/phoenix-liveview-webmcp-01CTznLzuCr8snUWq8qcnXPQ branch from 1a53323 to a67bbf1 Compare December 6, 2025 22:57
LiveView encodes tuples as arrays, so {:ok, state} becomes ["ok", {...}]
in JavaScript. The JS callback expected reply.ok which was always undefined.

Fixed by returning the state map directly from LiveView and checking for
reply.count in JS to validate the response shape.
@MiguelsPizza MiguelsPizza merged commit f31e8ce into main Dec 6, 2025
6 checks passed
@MiguelsPizza MiguelsPizza deleted the claude/phoenix-liveview-webmcp-01CTznLzuCr8snUWq8qcnXPQ branch December 6, 2025 23:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants