​
Prerequisites

  • Node.js
  • npm or pnpm as a package manager
  • A project with Next.js (or your framework of choice) already initialized
  • Tailwind CSS configured (if you plan to use Shadcn-style components)
The MCP server provides a bridge between your development environment and our component registry, enabling seamless integration of Chipi components into your projects.

​
Setup the Chipi MCP Serve

1

Configure MCP in Cursor

Click the button below to install the Chipi MCP server in your Cursor Install MCP Server
2

Inside your project, Create a components.json file using this command

npx shadcn@latest init
3

Add chipi to your registries section in components.json

 "registries": {
 "@chipi": "https://chipi-v0-shadcn.vercel.app/r/{name}.json"
}
4

After installation, you can ask

Once the Chipi MCP server is installed, Cursor acts as your assistant for working with Chipi. You can now:
  • 🔍 Discover what’s in the registry — “What components are available in Chipi?”
  • 📥 Install components into your project — “Add the PayCryptoButton to my project.”
  • 🛠️ Get usage examples — “Show me how to use Chipi’s base provider with Next.js.”
  • 📚 Read documentation — “What props does PayCryptoButton accept?”
  • 🧪 Debug your setup — “Check if my Chipi Pay config is correct.”
This means you don’t have to memorize commands or file paths — just ask Cursor, and it will fetch, install, and explain Chipi components directly in your project.

​
Troubleshooting

  • Registry not loading: Check your internet connection and registry URL.
  • Components not found: Ensure the MCP server is running.
  • Styling issues: Make sure Tailwind CSS is properly configured.
For more information about MCP Servers in Cursor, see the Cursor MCP documentation.