DEV Community

Cover image for Building a Para MCP Server + Next.js Wallet Demo (with Kiro + MCP)
kirodotdev profile image uratmangun
uratmangun Subscriber for kirodotdev

Posted on

Building a Para MCP Server + Next.js Wallet Demo (with Kiro + MCP)

#kiro

para-mcp-server in one sentence

para-mcp-server is a Para MCP server plus a Next.js demo UI that lets AI tools and humans share the same Para-powered auth and wallet flows.

It’s a small lab for experimenting with:

  • MCP tools that talk to Para
  • Next.js UI that shows what the same flows look like in the browser
  • AI-first workflows (Kiro, ChatGPT, etc.) that can trigger those flows from inside your editor or chat.

What this project gives you

From the typescript/community/mcp-tools/para-mcp-server folder you get:

  • A Para MCP server
    • Managed by xmcp via xmcp.config.ts
    • Exposes Para operations to any MCP-capable client (ChatGPT, Kiro, etc.)
  • A Next.js demo app
    • Runs on http://localhost:3012
    • Shows end-to-end auth and wallet flows backed by Para
  • Configurable Web3 infra
    • Para API key and environment
    • WalletConnect project ID
    • Optional Coinbase Developer Platform (CDP) integration for paymaster / gas sponsorship
    • Optional Base Sepolia RPC URL

You can treat it as both:

  • A reference implementation of Para + MCP + Next.js
  • A playground for your own tools and flows.

Local setup

From the workspace root (where pnpm-workspace.yaml lives):

pnpm install
Enter fullscreen mode Exit fullscreen mode

Then from typescript/community/mcp-tools/para-mcp-server:

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Open .env and fill in the values documented in .env.example, especially:

  • Para SDK
    • PARA_API_KEY
    • NEXT_PUBLIC_PARA_API_KEY
    • NEXT_PUBLIC_PARA_ENVIRONMENT (e.g. BETA or PROD)
  • WalletConnect
    • NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
  • Coinbase Developer Platform (optional)
    • CDP_API_KEY_ID
    • CDP_API_KEY_SECRET
    • NEXT_PUBLIC_PAYMASTER_URL (for sponsored gas, if you use it)
  • Optional RPC URLs
    • NEXT_PUBLIC_BASE_SEPOLIA_RPC_URL
  • Optional Postgres (for pregenerated wallets)
    • DATABASE_URL=postgresql://username:password@host:port/databaseThen run development mode: 
pnpm dev
Enter fullscreen mode Exit fullscreen mode

This will start:

  • xmcp dev – the Para MCP HTTP server
  • next dev -p 3012 – the Next.js UI at http://localhost:3012

At that point you can connect your MCP-enabled client (Kiro, ChatGPT, etc.) to the running MCP server and also browse the UI directly.

Auth and wallet flows (Next.js side)

On the UI side, the heart of the demo is a reusable ParaAuthComponent that encapsulates all Para auth logic. It’s designed to be dropped into different pages and flows instead of wiring each page manually.

Some highlights:

  • Email + OTP + passkeys
    • Existing users can log in via hosted login links opened in a new tab or popup.
    • New users can verify via a 6-digit code sent to email.
    • Passkeys / password / PIN flows are supported through Para.
  • Wallet-aware UI
    • After auth completes, the component pulls all wallets associated with the user.
    • A dropdown lets you pick whichever wallet you want to use.
    • The component can optionally render wallet details (address, id, userId, type, isPregen, etc.).
  • Pregenerated wallet flows
    • The repo also includes pages for claiming pregenerated wallets.
    • These can be backed by Postgres via the DATABASE_URL configuration if you enable that feature.
  • Browser- and AI-friendly auth redirects
    • For ChatGPT / MCP environments, the code tries to use window.openai.openExternal when available so auth links open correctly inside native clients.
    • It can also fall back to posting messages to a parent window (postMessage) or simply using window.location.assign with clear status messages like:
    • "Authentication opened in a new tab. Don't close this page; finish auth there and return here."

The end result is that the same auth + wallet flow can be driven by:

  • A user clicking buttons in the Next.js UI
  • An AI tool calling MCP tools that eventually surface these URLs and flows

Why MCP matters here

The MCP layer is what lets this project plug Para directly into AI tooling.

Instead of hard-coding a single frontend or CLI, you expose Para capabilities (auth, wallets, etc.) as MCP tools. Any MCP-aware client can then:

  • Ask for a Para wallet
  • Trigger a login or verification
  • Interact with the Next.js UI and underlying Para SDK indirectly

This creates a neat loop:

  1. You run pnpm dev to bring up the MCP server + Next.js app.
  2. You connect an MCP client (like Kiro or ChatGPT) to the Para MCP server.
  3. The AI tool calls MCP tools to orchestrate Para auth/wallet actions.
  4. Humans can still see and debug everything via the Next.js UI in the browser.

How we use Kiro in this repo

Kiro is the AI development environment for this project, and it’s wired directly into multiple MCP servers via .kiro/settings/mcp.json.

That single JSON file tells Kiro which MCP servers are available when you’re working in this repo. In this project it looks roughly like this:

  • blockscout
    • Configured with "url": "https://mcp.blockscout.com/mcp"
    • Used for blockchain querying (token addresses, balances, transfers, etc.).
  • chrome-devtools
    • Configured to run via:
    • "command": "npx"
    • "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ]
    • Lets the AI talk to a running Chrome instance through the DevTools protocol.
    • That’s exactly how this article draft was typed into the DEV.to editor: Kiro called the chrome-devtools MCP server, which then filled in the title and content fields on https://dev.to/new.
  • coinbase-cdp (currently disabled)
    • Points at https://docs.cdp.coinbase.com/mcp.
    • Intended for interacting with Coinbase Developer Platform from AI tooling.
  • context7
    • Configured with "command": "npx" and "args": [ "-y", "@upstash/context7-mcp@latest" ].
    • Used to fetch up-to-date documentation for libraries (e.g., shadcn, Next.js packages, etc.).
  • next-devtools
    • Configured with "command": "npx" and "args": [ "-y", "next-devtools-mcp@latest" ].
    • Helps the AI search and read official Next.js docs and, when applicable, talk to a running Next.js dev server.
  • para-docs
    • Configured with "url": "http://docs.getpara.com/mcp".
    • Allows the AI to search Para’s documentation directly from within Kiro.
  • sequential-thinking (disabled)
    • Uses the @modelcontextprotocol/server-sequential-thinking package.
    • Intended for more structured, multi-step reasoning on complex tasks.
  • tiger (disabled)
    • Configured with "command": "tiger" and "args": [ "mcp", "start" ].
    • Aimed at querying Postgres databases via MCP.

Because .kiro/settings/mcp.json lives alongside the code, anyone opening this repo in Kiro gets the same MCP setup automatically. The assistant knows:

  • How to talk to Para docs (para-docs)
  • How to introspect and control the browser (chrome-devtools)
  • How to pull in Blockscout, Context7, and Next.js-specific knowledge

…all without you manually wiring each tool in your editor.

In other words, Kiro + MCP turns this repo into an AI-first development environment:

  • The code defines your server and UI.
  • .kiro/settings/mcp.json defines your tool graph.
  • Kiro uses both to help you build, debug, and even publish things like this DEV.to article end-to-end.

Demo

https://github.com/uratmangun/arbitrum-vibekit/tree/para-integration/typescript/community/mcp-tools/para-mcp-server

https://para-mcp-server.vercel.app/

Top comments (0)