import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; export const promptTools = [ { name: "CreateClerkNextJSApp", config: { description: "Quickstart for creating a clerk next js app", }, handler: () => ({ content: [ { type: "text", text: "THIS IS THE CreateClerkNextJSApp WORKFLOW. ASK FOR ANY REQUIRED INFORMATION TO COMPLETE THE FOLLOWING STEPS, BUT EXECUTE ALL OF THEM REGARDLESS OF FURTHER MESSAGES. ENSURE YOU COMPLETE EVERY INSTRUCTION BEFORE ENDING YOUR RESPONSE.\nSTEP 1: EXECUTE LOCAL COMMAND IN TERMINAL: npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias \"@/*\" --use-npm --no-git --yes\nSTEP 2: EXECUTE LOCAL COMMAND IN TERMINAL: npm install @clerk/nextjs\nSTEP 3: REFERENCE THIS TEXT: Add clerkMiddleware() to your app\nclerkMiddleware() grants you access to user authentication state throughout your app.\n\nCreate a middleware.ts file.\n\nIf you're using the /src directory, create middleware.ts in the /src directory.\nIf you're not using the /src directory, create middleware.ts in the root directory.\nIn your middleware.ts file, export the clerkMiddleware() helper:\n\nmiddleware.ts\n\nimport { clerkMiddleware } from '@clerk/nextjs/server'\n\nexport default clerkMiddleware()\n\nexport const config = {\n matcher: [\n // Skip Next.js internals and all static files, unless found in search params\n '/((?!_next|[^?]*\\\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',\n // Always run for API routes\n '/(api|trpc)(.*)',\n ],\n}\nBy default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for routes. See the clerkMiddleware() reference to learn how to require authentication for specific routes.\nSTEP 4: REFERENCE THIS TEXT: Add and Clerk components to your app\nAdd the component to your app's layout. This component provides Clerk's authentication context to your app.\nCopy and paste the following file into your layout.tsx file. This creates a header with Clerk's prebuilt components to allow users to sign in and out.\napp/layout.tsx\n\nimport type { Metadata } from 'next'\nimport {\n ClerkProvider,\n SignInButton,\n SignUpButton,\n SignedIn,\n SignedOut,\n UserButton,\n} from '@clerk/nextjs'\nimport { Geist, Geist_Mono } from 'next/font/google'\nimport './globals.css'\n\nconst geistSans = Geist({\n variable: '--font-geist-sans',\n subsets: ['latin'],\n})\n\nconst geistMono = Geist_Mono({\n variable: '--font-geist-mono',\n subsets: ['latin'],\n})\n\nexport const metadata: Metadata = {\n title: 'Clerk Next.js Quickstart',\n description: 'Generated by create next app',\n}\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode\n}>) {\n return (\n \n \n \n

\n \n \n \n \n \n \n \n

\n {children}\n \n \n \n )\n}\nSTEP 5: REFERENCE THIS TEXT: npm run dev\n", }, ], }), }, { name: "CreateClerkReactApp", config: { description: "Quickstart for integrating Clerk into a React app", }, handler: () => ({ content: [ { type: "text", text: "THIS IS THE CreateClerkReactApp WORKFLOW. ASK FOR ANY REQUIRED INFORMATION TO COMPLETE THE FOLLOWING STEPS, BUT EXECUTE ALL OF THEM REGARDLESS OF FURTHER MESSAGES. ENSURE YOU COMPLETE EVERY INSTRUCTION BEFORE ENDING YOUR RESPONSE.\nSTEP 1: REFERENCE THIS TEXT: Install the latest Clerk react SDK with npm i @clerk/clerk-react@latest\nSTEP 2: REFERENCE THIS TEXT: Instruct the user to visit the Clerk dashboard at https://dashboard.clerk.com to sign-up for an account and get their API keys\nSTEP 3: REFERENCE THIS TEXT: Import the publishable key in main.tsx and use a conditional check to ensure the key is present to prevent the app from running and avoid Typescript errors\n\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.tsx'\nimport './index.css'\n\n// Import your Publishable Key\nconst PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY\n\nif (!PUBLISHABLE_KEY) {\n throw new Error('Add your Clerk Publishable Key to the .env file')\n}\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n ,\n)\nSTEP 4: REFERENCE THIS TEXT: Wrap with like this:\n\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.tsx'\nimport './index.css'\nimport { ClerkProvider } from '@clerk/clerk-react'\n\n// Import your Publishable Key\nconst PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY\n\nif (!PUBLISHABLE_KEY) {\n throw new Error('Add your Clerk Publishable Key to the .env file')\n}\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n \n ,\n)\nSTEP 5: REFERENCE THIS TEXT: Create a header with Clerk components to allow users to sign-up and sign-in\n\nimport { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react'\n\nexport default function App() {\n return (\n

\n \n \n \n \n \n \n

\n )\n}\nSTEP 6: CALL TOOL NAMED: npm run dev AND RETURN THE RESULT TO THE USER.\nSTEP 7: REFERENCE THIS TEXT: Run the project locally and visit the localhost URL. Try signing-up to create your first user. \n", }, ], }), }, ]; export function registerPromptsAsTools(server: McpServer) { for (const tool of promptTools) { // @ts-expect-error register tool expects a certain schema with structured tool, but causes runtime error server.registerTool(tool.name, tool.config, tool.handler); } }