Stop Opening Your Apps. Let Claude Use Them Instead
Build a Custom Claude Connector for Your Own App (Remote MCP Server + OAuth, Full Tutorial) 🎁 Get the resources from this video + my free AI builder course: https://skool.com/leonvanzyl 🚀 Go deeper inside Agentic Labs: AI coding courses, live Q&A, weekly challenges, and direct access to me: https://skool.com/agentic-labs Build a custom Claude Connector that lets Claude securely interact with your own app using a remote MCP server and OAuth. In this video, I show you how to build and deploy a real Next.js application, expose its functionality to Claude through MCP tools, add OAuth authentication with Better Auth, deploy the app and MCP server to Vercel with Neon Postgres, and connect everything to Claude so it can create, update, assign, and manage data inside your application without you opening the UI. If you're building AI agents, agentic applications, Claude Code workflows, custom MCP servers, or want to connect your own software to Claude, this walkthrough covers the complete process from app development and deployment to authentication, MCP tools, and Claude custom connectors. =========================== Resources Mentioned 🧩 start-an-app skill (my skills repo): https://github.com/leonvanzyl/skills Install with: npx skills add leonvanzyl/skills 🎭 Playwright MCP server: https://github.com/microsoft/playwright-mcp 🔐 Better Auth skills: https://better-auth.com/docs/ai-resources/skills 🛠️ MCP Builder skill (Anthropic): https://github.com/anthropics/skills/tree/main/skills/mcp-builder 📄 Better Auth OAuth Provider plugin (the current source of truth): https://better-auth.com/docs/plugins/oauth-provider 📘 Claude custom connectors with remote MCP: https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp ▲ Vercel (free hosting): https://vercel.com 🐘 Neon serverless Postgres: https://neon.com =========================== Tools I Use / Support the Channel 🚀 Speech to Text (Wisprflow): https://wisprflow.ai/r?LEON114 =========================== Subscribe / Connect Subscribe for practical AI building, agentic coding, automation, and real app builds: https://www.youtube.com/@leonvanzyl?sub_confirmation=1 X: https://x.com/leonvz TikTok: https://www.tiktok.com/@leonvanzylofficial Business & sponsorship enquiries: leon@cognaitiv.ai =========================== Question What app of yours would you connect to Claude first? ⏱️ Chapters 0:00 Custom Claude Connectors and why you'd build one 1:27 Setting up your coding agent and dev environment 1:43 Installing the start-an-app skill 2:45 Planning a Kanban app with organizations, teams and roles 4:27 SQLite vs Postgres: picking a database you can deploy 5:15 Storing the plan inside your project folder 5:39 Expanding it into an implementation plan and feature files 7:30 Playwright MCP so the agent can test its own work 8:31 AGENTS.md and CLAUDE.md rules for reusable test data 10:50 Running the goal command to build every feature in one session 11:41 Walking through the finished Kanban app 12:17 Deploying to production: pushing the project to GitHub 13:30 Deploying to Vercel and setting environment variables 14:12 Adding a Neon serverless Postgres database 15:38 Troubleshooting a broken production sign-up with Vercel logs 16:14 The fix: running database migrations in the build command 17:21 Exposing your app to AI agents with a remote MCP server 17:42 Installing the Better Auth and MCP Builder skills 18:22 How remote MCP servers and tools actually work 19:35 OAuth explained: letting Claude act on your behalf 21:58 The one prompt that builds your MCP server with OAuth 23:25 Deploying and pinging the MCP server 24:04 Adding your custom connector to Claude 25:19 Claude creating, assigning and moving cards for you 27:06 Final result and next steps =========================== About This Video In this video, I show you how to build a custom Claude Connector for your own application using Claude Code, a remote MCP server, Better Auth OAuth, Next.js, Vercel and Neon Postgres. This tutorial is for developers, AI builders, and serious no-code/low-code builders who want practical workflows for building real apps, AI agents, automations, and coding systems. On this channel, I share practical AI engineering and agentic coding workflows using tools like Claude Code, OpenCode, Codex, Cursor, local AI models, and modern AI development workflows. #agenticcoding #claudecode #aicoding
