Liquid Composer

Name: Liquid Composer
Author: frontedu

by fronteduversion 2.1.0i★ –iRuns in the cloud

Registry nameio.github.frontedu/liquid-composer

Install

Overview

Description from the maker (original English)

Check Liquid Glass app icon recipes and open them in the browser editor.

PopNx MCP’s three pillars

These three are never merged into one score: opinions, measurements and popularity are different things.

User voiceiNo reviews yetReviews open together with accounts in a later step
Our basic checksi3 of 3 passedChecked from public information; code not scanned yet
UsageiNot measured yet★ –

What you can do with it

We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.

Connection: Runs in the cloud
Transport: Streamable HTTP
Category: Web & browsers

Install

Pick the AI app you use, then copy the settings.

Before you install

Basic checks: 3 of 3 passed
Runs on the maker’s server: what you ask it goes through their server.
Can do 3 things (tools) liquid_schema, liquid_validate, liquid_open
The registry lists no key to fill in.

You need

Runs in the cloudNothing to install; it connects over the internet

Which app do you use?

ClaudeClaude CodeCursorVS CodeChatGPT

Pick your app above. We remember it, so next time the button says “Install in …”.

Works in Claude on the web, desktop and mobile:

Open Settings → Connectors
Press Add custom connector
Paste the address below and press Add
If it asks you to sign in, sign in with the maker

https://liquid-composer.vercel.app/mcp

Run this in your terminal

claude mcp add --transport http liquid-composer https://liquid-composer.vercel.app/mcp

Open in Cursor

Or copy the settings yourself

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "liquid-composer": {
      "url": "https://liquid-composer.vercel.app/mcp"
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

Open in VS Code

Or copy the settings yourself

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "liquid-composer": {
      "type": "http",
      "url": "https://liquid-composer.vercel.app/mcp"
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

ChatGPT connects only to servers on the internet:

Open ChatGPT on the web → Settings → Connectors (Apps)
Press Create or Add (some plans need Developer mode under Advanced first)
Paste the address below, give it a name and save
If it asks you to sign in, sign in with the maker

https://liquid-composer.vercel.app/mcp

Menu names can differ slightly by plan and over time.

Your choice stays on this device in a cookie; no account needed.

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

What it can do

Tool names and descriptions exactly as the server reported them on Nov 6, 2026. The maker wrote them, not us; we show them as plain text.

liquid_schema
JSON Schema of recipes and layer patches, and the guide.
liquid_validate
Check a recipe without opening it; returns ok or the list of issues with their paths.
liquid_open
Turn a recipe into a link that opens the icon in Liquid Composer. The link carries the recipe in its URL fragment, so opening it does not send the recipe to a server. Images must be inline SVG markup or data: URLs.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 7, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account frontedu, which owns the repo
… Not checked yet
Still maintained
We have not read this repo from GitHub yet
… Not checked yet
Has a licence
We have not read this repo from GitHub yet
✓ Pass
Endpoint responds
Responded in 134 ms (HTTP 200)
– Not applicable
Sign-in with OAuth
No sign-in needed
✓ Pass
No hidden instructions in tool descriptions
Read 3 tool descriptions and found no hidden instructions to the AI

Compared with others in Web & browsersi

More stars than 0% of the other 879 servers in this category
Published to the registry more recently than 87% of the other 879 servers in this category
Basic checks equal to or better than 100% of the other 879 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is Liquid Composer safe?

It passed 3 of 3 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

The registry does not list a required key, though some servers ask you to sign in on first use.

Does it run on my computer or in the cloud?

It runs in the maker’s cloud. Connect over the internet with nothing to install, but what you send passes through the maker’s servers.

Is it still maintained?

The GitHub repo last changed –, and the latest version (2.1.0) reached the registry 5 days ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT in developer mode.

What can I use instead?

In the same category: Browser Use, Chrome DevTools MCP, MCP Server Browser

Alternatives

Servers in the same category from other makers, sorted by stars.

Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

Browser Use

by browser-use

Lets AI do web tasks for you, such as filling forms, searching and extracting data, in the maker’s cloud browsers or on your computer.

Computer or cloud★ 120,087MITUpdated 17 days ago

Install

Chrome DevTools MCP

by ChromeDevTools

Lets AI use Chrome’s developer tools to inspect pages, find what makes them slow and spot errors. Made by the Chrome DevTools team.

Runs on your computer★ 54,821Apache-2.0Updated 15 days ago

Install

MCP Server Browser

by bytedance

MCP server for browser use access

Runs on your computer★ 39,550Apache-2.0Updated 14 months ago

Install

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

Liquid Composer

Design Liquid Glass app icons in the browser.

liquid-composer.vercel.app

Liquid Composer is a web recreation of Apple's Icon Composer that reproduces the Liquid Glass icon material of iOS 27 and Icon Composer 2. Drop in your artwork, stack it in layers, and the engine renders the glass in real time: light from above, highlights and dark edges that define each shape, refraction between layers, background blur, translucency and layer shadows, composited inside the iOS squircle.

Rendering runs on a WebGL2 pipeline. A distance field of each layer's silhouette drives refraction and edge lighting; when Blur is on, two separable Gaussian passes blur everything beneath the layer, and the glass composite shader works in gamma-encoded sRGB, like Icon Composer. Without WebGL2 the app falls back to Canvas 2D: layers keep their shadow, translucency and edge lighting, but lose refraction and blur.

What's new for iOS 27

Light comes straight from above. The toolbar light-angle control remains as a preview tool and is not saved with the document
Highlights along the top and bottom edges, and dark edges that define the shape
Specular placement: Off, Automatic, Inside or Outside. Automatic picks Inside on bright icon backgrounds and Outside on dark ones and in the Clear appearances
Refraction with Strength and Height; a negative Strength bends the image the other way (inverse refraction)

Highlights, refraction, translucency, blur and shadows follow the formulas and values of Icon Composer 27. The Advanced panel scales the highlights and adds dispersion and frostiness on top.

Features

Layer-based editing with one level of groups, drag-and-drop reordering, inline rename, duplicate and undo/redo
SVG, PNG and JPEG import at the artwork's natural size on the 1024 pt canvas, as in Icon Composer; an SVG smaller than 256 pt is scaled up to the grid's outer circle, and artwork larger than the icon is scaled down to fit it. SVGs are re-rasterized at render resolution so edges stay crisp
Glass controls per layer, or applied to all layers at once: Specular placement, Refraction (Strength, Height), Blur, Translucency and Shadow
Advanced panel with Lens (Dispersion), Highlights (Light intensity, Top, Bottom, Edge definition) and Surface (Frostiness), with a reset
Per-layer opacity, blend mode, and solid or two-stop gradient fill
Default, Dark, Clear Light and Clear Dark appearances. The Tinted variants of iOS 27 are not implemented
Glass-on-glass compositing: each glass layer refracts the background and every layer painted beneath it
Background editor driven by hue, tint and brightness, or custom gradient stops
Apple icon grid overlay in light or dark lines, center snap guides, alpha-aware layer picking on canvas
Export as PNG at 4096, 2048, 1024, 512 or 256 px, or JPEG at 1024; sizes up to 1024 are supersampled. PNG · No Chiclet leaves out the background plate. Copy a 1024 PNG to the clipboard, or download all appearances as a ZIP with Default/, Dark/, ClearLight/ and ClearDark/ folders, each holding PNGs from 4096 to 256 px
Icon Composer documents: Export .icon and Open .icon in the export menu, as a zipped .icon package that opens in Icon Composer and Xcode. A document with refraction on or specular set to Inside or Outside needs Xcode 27, as Icon Composer 2 writes it; otherwise it also opens in Xcode 26
Work is autosaved in your browser (localStorage and IndexedDB). See the privacy policy
Installable as an app from Chrome or Edge on Windows, Linux and macOS (Install in the address bar), with its own window, and it opens offline after the first visit

Shortcuts

On a Mac, use ⌘ in place of Ctrl.

Ctrl+Z undo, Ctrl+Shift+Z or Ctrl+Y redo
Ctrl+D duplicate, Delete remove, F2 rename the focused layer
Ctrl+C / Ctrl+X / Ctrl+V copy, cut and paste layers (or paste an image)
Arrow keys move the selected layer by 1 pt, 10 pt with Shift; Ctrl+↑ selects its group
Ctrl+] / Ctrl+[ bring forward or send backward; Ctrl+Alt+Shift+F / Ctrl+Alt+Shift+B bring to front or send to back
Ctrl+Alt+C / Ctrl+Alt+V copy and paste style: glass, fill, opacity and blend mode
Ctrl+Alt+G toggle the icon grid

Getting started

Requires Node 22.12+.

npm install

npm run dev # http://localhost:5173 npm run build # production build in dist/

Use with AI agents

Agents drive the same app and engine as the editor. An icon is a JSON recipe: background, layers top to bottom, glass settings and outputs. Applying a recipe replaces the document, and renders come from the WebGL2 engine in headless Chrome.

npx liquid-composer apply icon.json --out out/       # PNG, all-appearances zip or .icon, as the recipe asks

npx liquid-composer render icon.json --size 512 --mode dark npx liquid-composer import App.icon --render 512 npx liquid-composer validate icon.json npx liquid-composer schema

Each command prints one JSON object with the written files, the document state and any warnings. Rendering uses your installed Google Chrome through playwright-core, on SwiftShader by default; pass --gpu to use the GPU. In a checkout, run npm run build once and use npm run -s agent -- in place of npx liquid-composer.

MCP server, local. npx -y liquid-composer mcp provides liquid_apply, liquid_update, liquid_render, liquid_export, liquid_import_icon, liquid_state and liquid_schema, and returns previews as images. With Claude Code: claude mcp add liquid-composer -- npx -y liquid-composer mcp
MCP server, remote. https://liquid-composer.vercel.app/mcp checks recipes and returns a link that opens the icon in your browser. The link carries the recipe in its URL fragment, so opening it does not send the recipe to the server; the MCP call itself keeps nothing. This server does not render. In Claude, add it under Customize → Connectors → Add custom connector, with no sign-in
Skill. npx skills add frontedu/liquid-composer teaches agents the recipe format and the workflow
In the browser. Every build exposes window.liquidComposer (apply, update, render, export, state, schema). Add ?agent to the URL to turn off autosave, analytics and the offline cache

How it works

The editor is Vite, React 19, Tailwind and Nanostores. The engine lives in src/engine/:

IconRenderer.ts orchestrates compositing. It rasterizes each layer, draws its shadow, resolves the specular placement and hands each glass layer everything already painted below it
LiquidGlass.ts is the WebGL2 renderer: a jump-flood distance field of the layer's silhouette, ping-pong framebuffers for the blur (RGBA16F when supported, skipped when Blur is off), then the glass composite pass
shaders/ holds the GLSL ES 3.00 sources. The composite pass computes refraction, dispersion, translucency and the edge highlights and dark edges
glassContract.ts holds the material constants: highlight table, refraction and blur limits, layer shadow
IconDocument.ts reads and writes Icon Composer .icon documents

The agent API lives in src/agent/, the CLI and local MCP server in scripts/agent/, and the remote MCP endpoint in api/mcp.ts.

Liquid Composer

Overview

PopNx MCP’s three pillars

What you can do with it

Install

Before you install

What it can do

Basic checksi

Maker matches the repo

Still maintained

Has a licence

Endpoint responds

Sign-in with OAuth

No hidden instructions in tool descriptions

Compared with others in Web & browsersi

Common questions

Alternatives

Browser Use

Chrome DevTools MCP

MCP Server Browser

README from the maker

What's new for iOS 27

Features

Shortcuts

Getting started

Use with AI agents

How it works