# Liquid glass in Codex: plugin, MCP server and AGENTS.md

Source: https://meniscus.site/docs/codex · Updated 2026-10-02

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.

Same request, with and without Meniscus: [Claude Code alone](https://meniscus.site/proof/without) (1 min 52 s) · [Claude Code + Meniscus (free)](https://meniscus.site/proof/with) (9 min 30 s). How they were made: https://meniscus.site/#proof

## 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.

Every other client: https://meniscus.site/docs