Skip to main content

Clerk Changelog

MCP Server Support for Express

Category
Product
Published

Build an MCP service into your application with Clerk and Express.js in 5 minutes

We're excited to announce server-side support for the Model Context Protocol (MCP) in Express.js applications using Clerk authentication. This enables your users to securely grant AI applications like Claude, Cursor, and others access to their data within your app.

Getting Started

Setting up an MCP server in your Express app is straightforward with Clerk's modern OAuth provider implementation. Here's the entire implementation, within a single file in about 50 lines of code:

import 'dotenv/config'
import { clerkClient, clerkMiddleware } from '@clerk/express'
import {
  mcpAuthClerk,
  protectedResourceHandlerClerk,
  streamableHttpHandler,
  authServerMetadataHandlerClerk,
} from '@clerk/mcp-tools/express'
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import cors from 'cors'
import express from 'express'

const app = express()
app.use(cors({ exposedHeaders: ['WWW-Authenticate'] }))
app.use(clerkMiddleware())
app.use(express.json())

const server = new McpServer({
  name: 'test-server',
  version: '0.0.1',
})

server.tool(
  'get_clerk_user_data',
  'Gets data about the Clerk user that authorized this request',
  {},
  async (_, { authInfo }) => {
    const userId = authInfo!.extra!.userId! as string
    const userData = await clerkClient.users.getUser(userId)

    return {
      content: [{ type: 'text', text: JSON.stringify(userData) }],
    }
  },
)

app.post('/mcp', mcpAuthClerk, streamableHttpHandler(server))

app.get(
  '/.well-known/oauth-protected-resource/mcp',
  protectedResourceHandlerClerk({ scopes_supported: ['email', 'profile'] }),
)

app.get('/.well-known/oauth-authorization-server', authServerMetadataHandlerClerk)

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

A full reference implementation is available and open source on GitHub if you'd like to test it out.

Note

OAuth tokens are machine tokens. Machine token usage is free during our public beta period but will be subject to pricing once generally available. Pricing is expected to be competitive and below market averages.

Connecting AI Tools

Once your MCP server is running, connecting it to AI tools is straightforward. For example, with Cursor, you can add this configuration:

{
  "mcpServers": {
    "clerk-mcp-example": {
      "url": "http://localhost:3000/mcp"
    }
  }
}

That's it — no stdio tools, command execution, or additional software installation required. Just provide the URL and authentication is handled automatically through the MCP protocol.

For a complete guide on testing your MCP server with various AI clients, check out our MCP client integration guide.

What's Next

Clerk's OAuth provider offers support for the MCP protocol with any framework, but MCP is still a new standard, it's changing quickly, and support and implementation can vary across different clients and frameworks, which often makes implementation tricky.

For this reason, we are creating end-to-end working examples and helpful utilities for each framework that we plan to steadily release over time. We recently released an MCP implementation for Next.js, and we will continue to roll out examples and guides for other frameworks in the coming months.

We're excited to see what new AI-powered experiences you'll build with MCP and Clerk. If you have feedback or questions, we'd love to hear from you!

Contributor
Jeff Escalante

Share this article

New simple theme for easier customization

Category
Product
Published

A minimal theme with stripped-down styling that provides a clean foundation for custom designs.

You can now opt into a simpler theme for customizing Clerk components. This theme is a stripped down version of the default Clerk theme that removes advanced styling techniques, making it easier to apply your own custom styles without complex overrides.

To use the simple theme, set theme to simple:

<ClerkProvider
  appearance={{
    theme: 'simple',
  }}
/>

To learn more about themes and how to customize Clerk components, check out our theme documentation.

Contributor
Alex Carpenter

Share this article

Immediately terminate subscriptions and revoke feature access with the new End button in the Dashboard

We've added a new End button to subscription management in the Clerk Dashboard, giving you the ability to immediately end subscriptions and revoke user access to features.

Previously, you could only Cancel subscriptions, which would stop recurring charges but allow users to retain access until the end of their current billing cycle. The new End button goes further by immediately terminating the subscription and revoking access to all associated features.

This is particularly useful when processing refunds - you can immediately remove access to prevent further usage after issuing a refund.

You can find the End button alongside the existing Cancel button in the subscription details page of any user or organization in the Clerk Dashboard. The Cancel button remains available for standard subscription cancellations where you want to honor the user's paid period.

At the moment, ending a subscription is only available in the Dashboard but we'll be supporting this via the Backend API in the future.

Contributors
Iago Dahlem
Maurício Antunes

Share this article

Workspace level settings in the Dashboard

Category
Dashboard
Published

A new place to manage your workspace level settings

Workspace level settings like your Settings, Billing, and Team Members have a new location in the Clerk Dashboard. Rather than managing them from the "Manage" button under the organization switcher and inside of a modal, you can find these settings whenever you navigate outside of the context of a single application.

Stay tuned for even more improvements to these sections over the coming weeks.

Contributors
Vaggelis Yfantis
Stefanos Anagnostou
Nikos Papageorgiou

Share this article

Button components for Clerk Billing

Category
Billing
Published

Three new billing buttons for implementing checkout, plan details, and subscription management in your applications.

Previously, you could only access these experiences through <UserProfile />, <OrganizationProfile /> and <PricingTable /> components, but now you can use these new buttons to access them in a more flexible way.

<CheckoutButton>

The <CheckoutButton> component provides a simple way to initiate checkout flows in your application. It handles the entire checkout process either for users or organizations.

import { CheckoutButton } from '@clerk/nextjs/experimental'

export default function CheckoutPage() {
  return (
    <CheckoutButton planId="cplan_xxxx">
      <Button>Checkout</Button>
    </CheckoutButton>
  )
}

<PlanDetailsButton>

The <PlanDetailsButton> component allows users to view detailed information about a specific plan, including pricing, features, and other plan-specific details.

import { PlanDetailsButton } from '@clerk/nextjs/experimental'

export default function AccountPage() {
  return (
    <PlanDetailsButton planId="cplan_xxxx">
      <Button>Plan Details</Button>
    </PlanDetailsButton>
  )
}

<SubscriptionDetailsButton>

The <SubscriptionDetailsButton> component allows users to view and manage their subscription details, whether for their personal account or organization.

import { SubscriptionDetailsButton } from '@clerk/nextjs/experimental'

export default function BillingPage() {
  return (
    <SubscriptionDetailsButton>
      <Button>Subscription Details</Button>
    </SubscriptionDetailsButton>
  )
}

For more detailed information about these components, check out our documentation:

Note

These components are currently exported as experimental while we harden the API.

Contributor
Pantelis Eleftheriadis

Share this article

shadcn/ui theme compatibility

Category
Product
Published

Introducing a new Clerk theme based on shadcn/ui that styles Clerk's components according to your shadcn/ui theme.

Clerk components now support a dedicated shadcn/ui theme that automatically matches your application's existing shadcn/ui theme configuration. Built on the new CSS variables support, this theme ensures Clerk's authentication UI feels native to your shadcn/ui-based applications.

Installation

To install the shadcn theme, run the following command to install the @clerk/themes package:

terminal
npm install @clerk/themes
terminal
yarn add @clerk/themes
terminal
pnpm add @clerk/themes
terminal
bun add @clerk/themes

Then pass the shadcn theme to the ClerkProvider component as the baseTheme property:

app/layout.tsx
import { shadcn } from '@clerk/themes'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <ClerkProvider
      appearance={{
        baseTheme: shadcn,
      }}
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

For more information on Clerk themes, see the themes documentation.

Contributor
Alex Carpenter

Share this article