Server-Side MCP in Next.js – building AI-aware apps

Published on: 30 Jul 2025 | 64 views | ~2 min. read

In 2025, conversational AI goes beyond Q&A. Thanks to the Model Context Protocol (MCP), apps can expose user data securely to AI agents. With server-side support in Next.js and Clerk authentication, MCP becomes scalable and developer-friendly. Let’s dive in.

1. What is MCP and why does it matter?

MCP is an open protocol that allows secure, consent-based access to private user data — emails, code, documents — enabling intelligent workflows and personalized AI interactions.

2. MCP integration in Next.js

Using @vercel/mcp-adapter and @clerk/mcp-tools, you can build a server-side handler with minimal setup:

import { createMcpHandler, experimental_withMcpAuth as withMcpAuth } from '@vercel/mcp-adapter';
import { verifyClerkToken } from '@clerk/mcp-tools/next';

const handler = createMcpHandler(server => {
  server.tool('get-user-data', 'Returns user data', {}, async (_, { authInfo }) => {
    const userId = authInfo!.extra!.userId!;
    const userData = await clerk.users.getUser(userId);
    return { content: [{ type: 'text', text: JSON.stringify(userData) }] };
  });
});

export const GET = withMcpAuth(handler, async (_, token) => {
  const clerkAuth = await auth({ acceptsToken: 'oauth_token' });
  return verifyClerkToken(clerkAuth, token);
}, {
  required: true,
  resourceMetadataPath: '/.well-known/oauth-protected-resource/mcp',
});

3. Key benefits

• OAuth-based secure authentication
• AI tool exposure from backend
• Fine-grained data control
• No need for separate MCP server

4. Use cases

Connected to Claude or Cursor, tools can fetch user data and personalize responses. Ideal for smart dashboards, IDE copilots, or business-specific AI agents.

5. Conclusion

Server-side MCP in Next.js unlocks a new wave of AI-native apps that respect user privacy and scale well. With Clerk and Vercel, implementation becomes simple even for small teams — and yes, the code is production-ready.