# MCP

Learn how to use the shadcn MCP (Model Context Protocol) server with ogimagecn.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



[MCP](https://modelcontextprotocol.io/) is an open protocol that standardizes how applications provide context to LLMs. The shadcn CLI can register an MCP server so your editor can discover registry components—including **ogimagecn** Open Graph image components.

## Configure MCP [#configure-mcp]

Run:

```bash
npx dlx shadcn@latest mcp init
```

Choose your MCP client when prompted, then enable the MCP server in that client to finish setup.

## Usage [#usage]

With MCP enabled, you can ask your IDE to work with ogimagecn Open Graph image components. Example prompts:

* Generate a **Blog** OG image with author, category, and title.
* Create a **Stat** card for social sharing with a large number and label.
* Build a **Product** OG image with image, title, and price.
* Design a **Quote** card with attribution and styling.
* Lay out a **Grid** of multiple OG components for a gallery preview.

Install components from this registry with `npx shadcn@latest add` and the JSON URL from each docs page, then use them in your Next.js `ImageResponse` endpoint as shown in each component's documentation.