Guide · Codex

Liquid glass in Codex

Codex knows the SwiftUI glass APIs by name, but on the web, in Flutter and in React Native it falls back to a blur with a white border: glassmorphism. Real liquid glass bends the backdrop at the edge, and each platform gets there differently.

Meniscus is an MCP server with the specs, tested numbers and build recipes for all of them. Add it to Codex, sign in once, and ask for a screen. The free plan covers every recipe.

Updated

Weather app built without Meniscus: San Francisco, 68°, milky frosted forecast cards with uniform white borders over a dusk lake, a frosted tab bar.Claude Code alone · 1 min 52 sWeather app built with Meniscus: Crescent Lake, 68°, clear glass forecast cards over mountains and a lake, a floating tab bar with the selected tab as a lens and search in its own round lens.Claude Code + Meniscus (free) · 9 min 30 s
The same request in fresh Claude Code sessions (2026-10-01), nothing edited. Open either page to scroll it; the home page runs both side by side and says how they were made.

Set up

codex mcp add meniscus --url https://meniscus.site/mcp

The browser opens to sign in straight away; codex mcp login meniscus signs in again later. The CLI, the IDE extension and the ChatGPT desktop app share one config, so this covers all three. The entry it writes:

~/.codex/config.toml
[mcp_servers.meniscus]
url = "https://meniscus.site/mcp"

Or install the Meniscus plugin, which adds the server and the liquid-glass skill:

codex plugin marketplace add meniscus-site/meniscus-mcp
codex plugin add meniscus@meniscus
codex mcp login meniscus

Make it use Meniscus every time

The plugin's skill already points Codex at Meniscus for glass. With the server alone, add one line to the project's AGENTS.md, or to ~/.codex/AGENTS.md for every project:

AGENTS.md
For liquid glass, glass UI, glassmorphism or the iOS 26/27 look, use the meniscus MCP tools: call create_design_brief for the screen first, build from the code it returns, then check the result against the brief's checklist.

What to ask

Name the platform and the parts. Naming the tools makes the agent use them.

A Flutter app
Add a liquid glass bottom navigation bar to this Flutter app that refracts the photo behind it, not just blurs it. Use the meniscus tools.
A new screen
Build a music player screen as one index.html: album art behind liquid glass playback controls and a floating glass tab bar. Use the meniscus tools.
Existing UI
Review the glass in this project against the liquid glass rules and list what reads as glassmorphism, with fixes. Use the meniscus tools.

Good to know

  • One setup covers the Codex CLI, the IDE extension and the ChatGPT desktop app: they share ~/.codex/config.toml.
  • codex exec uses the same servers. Sign in once with codex mcp login meniscus before a non-interactive run.
  • codex mcp list shows whether meniscus is enabled and signed in.

Questions

Plugin or server only?

The plugin is the server plus the liquid-glass skill, which reminds Codex to use the tools when glass comes up. The server alone works the same once you name the tools in your request or in AGENTS.md.

Does Codex need an API key for Meniscus?

No. The sign-in is OAuth: codex mcp login meniscus opens the browser, and Codex keeps the token.

Do I need a paid plan?

No. The free plan gives every spec and every recipe with its code, for the web, SwiftUI, Flutter, React Native and Figma, with 50 tool calls a day. New accounts get Pro for their first 14 days; Pro adds the screen templates, the React kit and the whole reference library.

Does SwiftUI need Meniscus at all?

The APIs are documented; the design is not. Meniscus says which bodies get glass, which material, how far apart, what stays flat content and how to check it, for SwiftUI and every other platform.

Next

The build guides carry the code your agent gets: CSS and web, SwiftUI, Flutter, React Native, Figma. The same server in Claude Code and Cursor.

Setup for VS Code, Claude desktop and 30 more clients