Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)

Gemini CLI and Antigravity Preline MCP Setup

Connect Preline UI MCP to Gemini CLI or Google Antigravity, then build with real Preline components, blocks, documentation, and framework guidance.

Setup overview

The hosted Preline UI MCP server is ready to use from Gemini CLI and Google Antigravity. It uses Streamable HTTP and requires an API key, sent as a bearer token.

MCP endpoint
https://mpc.preline.co
Transport
Streamable HTTP
Authentication
Authorization: Bearer TOKEN_KEY

Once connected, either agent can discover Preline catalog items, fetch the matching source, and place HTML, CSS, scripts, and init code in the right files. For broader MCP prompting guidance, see the Preline UI MCP Server guide.

For the most up-to-date instructions for adding MCP servers, see the official Gemini CLI setup guide and the official Google Antigravity MCP guide.

Setup

Choose the Google agent surface you use. Each setup path connects to the hosted Preline MCP server.

  1. Add the Preline MCP server

    Add Preline as a Streamable HTTP server from your project root. Gemini CLI stores it in the project-level .gemini/settings.json by default:

    Terminal 
                          
                        gemini mcp add --transport http --header "Authorization: Bearer TOKEN_KEY" preline https://mpc.preline.co

    Replace TOKEN_KEY with your Preline API key. The CLI calls the option --transport http, and its documentation defines that value as Streamable HTTP. Add --scope user to save the server globally in ~/.gemini/settings.json instead.

    You can also configure the server directly in either settings.json file. For Streamable HTTP, Gemini CLI uses httpUrl, not url or serverUrl:

    .gemini/settings.json 
                          
                        {
                          "mcpServers": {
                            "preline": {
                              "httpUrl": "https://mpc.preline.co",
                              "headers": {
                                "Authorization": "Bearer TOKEN_KEY"
                              }
                            }
                          }
                        }

    Keep the token private: the configuration above contains a credential. Do not commit it to version control; use the global file or exclude the project file if it contains the real token.

  2. Inspect the saved server

    Confirm that Gemini CLI saved the Preline configuration:

    Terminal 
                          
                        gemini mcp list

  3. Verify the tools in your session

    In an interactive Gemini CLI session, run /mcp list to see connection details, discovered tools, resources, and prompts.

    Terminal 
                          
                        /mcp list

    You should see preline listed and its tools available.

Install Preline Agent Skills

MCP gives Gemini CLI and Antigravity access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so the agent is more likely to follow the right discovery, placement, theming, and validation habits.

Install the Preline skills from your project root:

Terminal 
                      
                        npx skills add htmlstreamofficial/preline

Choose the shared project path .agents/skills/ when prompted. Both Gemini CLI and Antigravity discover workspace skills there. Gemini CLI also supports .gemini/skills/, while Antigravity's preferred workspace path is .agents/skills/ (with legacy .agent/skills/ support).

Their global locations are different: Gemini CLI reads ~/.gemini/skills/ or ~/.agents/skills/, while Antigravity IDE uses ~/.gemini/config/skills/. Every skill is a folder containing SKILL.md. Gemini CLI can list discovered skills with gemini skills list --all or /skills list; use /skills in Antigravity. For the full Preline setup workflow, see How to set up Agent Skills.

Build with Preline

Prompt Gemini in plain language. Name Preline, describe the component or block you want, and mention the file or framework context when it matters.

Prompt 
                      
                        Using Preline, add a pricing comparison section to app/pricing.html.
                        Use the default theme and keep the existing page header.
Prompt 
                      
                        Use Preline MCP to add a modal with a form.
                        Wire the required scripts into the existing layout.
                        Keep my current Tailwind setup.
Prompt 
                      
                        Show me the Preline dropdown JavaScript API.
                        Then update this dropdown to close after item selection.

Troubleshooting

Gemini CLI does not list the Preline server.

Run gemini mcp list. If you edited the configuration manually, confirm preline is under mcpServers in project .gemini/settings.json or global ~/.gemini/settings.json, and that the remote endpoint uses httpUrl.

Antigravity does not connect to the server.

Open MCP Servers from the agent panel and inspect the server status or logs. In mcp_config.json, use serverUrl; Gemini CLI's httpUrl field is not the Antigravity schema.

The server responds with "Missing API key".

The request reached the server without a valid Authorization: Bearer TOKEN_KEY header. Confirm the header is inside the preline server entry and replace TOKEN_KEY with your actual Preline API key.

The agent writes generic Tailwind CSS instead of using Preline.

Make the instruction explicit: say Use Preline MCP or Using Preline, then name the component, block, theme, and target file.

© 2026 Preline Labs.