From YAML to production in just 4 steps
diff --git a/app/learn/mcp-quickstart/page.tsx b/app/learn/mcp-quickstart/page.tsx index d8c2316..9ded8f1 100644 --- a/app/learn/mcp-quickstart/page.tsx +++ b/app/learn/mcp-quickstart/page.tsx @@ -2,61 +2,151 @@ import React from 'react'; import { Button } from '@/components/ui/button'; -import Link from 'next/link'; -import { Bot, Sparkles, Zap, CheckCircle, Copy, Check } from 'lucide-react'; +import { + Bot, + Sparkles, + Zap, + CheckCircle, + Copy, + Check, + ArrowRight, + RefreshCw, + UserPlus, +} from 'lucide-react'; import { useState } from 'react'; +type ContentItem = { + title: string; + description: string; + codeText?: string; + code?: string; + steps?: (string | { type: string; value: string })[]; + postSteps?: string[]; +}; + const techTabs = [ { name: 'Cursor', description: 'AI-first code editor' }, { name: 'Claude Code', description: "Anthropic's AI-powered CLI" }, - { name: 'VS Code', description: 'Using Command Pallete' }, + { name: 'VS Code', description: 'Using Command Palette' }, { name: 'Other Tools', description: 'Any MCP-compatible AI IDE or CLI' }, ]; -const techContent = [ +// Content for EXISTING users (migration instructions) +const existingUserContent: ContentItem[] = [ + { + title: 'Cursor - Update Configuration', + description: 'Update your existing Nexlayer MCP configuration:', + steps: [ + 'Navigate to Cursor Settings -> Tools & MCP', + 'Hover over the installed "nexlayer-mcp" MCP server and select the edit icon', + 'Remove the "headers" object from your configuration so that the new configuration reads:', + { + type: 'code', + value: `{ + "mcpServers": { + "nexlayer-mcp": { + "url": "https://mcp.nexlayer.ai/api/mcp" + } + } +}`, + }, + 'Save the file and navigate back to the Tools & MCP settings', + 'Click the "Connect" button to authenticate with the Nexlayer MCP server. If the "Connect" button re-appears, select the text "Needs authentication" under the nexlayer-mcp name and select "Open"', + 'Login with one of the SSO providers. You will be redirected back to Cursor', + 'You are now authenticated and ready to use the Nexlayer MCP!', + ], + }, + { + title: 'Claude Code - Update Configuration', + description: 'Update your existing Nexlayer MCP configuration:', + steps: [ + 'Start a Claude session and prompt Claude with the following: "Remove the authorization header from all nexlayer-mcp MCP server configs in .claude.json file in my home directory"', + 'After completion, close out of your Claude session and start a new one', + 'Enter "/mcp" and select the nexlayer-mcp server', + 'Select "Authenticate" to authenticate with the Nexlayer MCP server. You will be asked to sign in using one of our SSO providers.', + 'After successful authentication you will be asked to return to Claude Code. Please allow 15-20 seconds for Claude to finish authenticating on its end', + 'You are now authenticated and ready to use the Nexlayer MCP!', + ], + }, + { + title: 'VS Code - Update Configuration', + description: 'Update your existing Nexlayer MCP configuration:', + steps: [ + 'Press Ctrl+Shift+P (or Cmd+Shift+P for Mac) to open the Command Palette', + 'Type "MCP" and then select "MCP: List Servers"', + 'Select the nexlayer-mcp server and then select "Show Configuration"', + 'Remove the headers object from the nexlayer-mcp configuration so that the configuration matches the following:', + { + type: 'code', + value: `"nexlayer-mcp": { + "url": "https://mcp.nexlayer.ai/api/mcp", + "type": "http" +}`, + }, + 'Save the file', + 'You should be asked to authenticate with the MCP. If not prompted to do so, click either "Restart" or "Start" above the configuration.', + 'Sign in with any of the SSO providers shown. After successful authentication you will be redirected back to VS Code', + 'You are now authenticated and ready to use the Nexlayer MCP!', + ], + }, + { + title: '', + description: '', + steps: [ + 'Remove the Authorization header from your nexlayer-mcp configuration and save', + 'Follow the given instructions to sign in to the Nexlayer MCP server', + 'Sign in with one of our SSO providers', + 'You are now authenticated and ready to use the Nexlayer MCP!', + ], + }, +]; + +// Content for NEW users +const newUserContent: ContentItem[] = [ { title: 'Cursor Setup', description: 'Create or update your .cursor/mcp.json file:', codeText: 'Cursor — .cursor/mcp.json', code: `{ "mcpServers": { - "nexlayer_mcp": { - "url": "https://mcp.nexlayer.ai/api/mcp", - "headers": { - "Authorization": "Bearer+
Deploy your first app using your MCP supported AI IDE or CLI.
+ + {/* OAuth/SSO Update Notice */} ++ Authentication is now simpler and more secure. Choose your path + below to get started. +
+- After installing MCP, you can go to Cursor, Claude, or other AI - coding tools or CLIs that support MCPs. -
+ {/* Setup Section */} +- You need to generate a token to use the Nexlayer MCP. Go to{' '} - - app.nexlayer.io - {' '} - to create your access token. +
+ {userType === 'existing' + ? 'Follow the instructions below for your AI coding tool to update to OAuth/SSO authentication.' + : 'Choose your AI coding tool below to get started with the Nexlayer MCP.'}
-- {techContent[selectedTab].description} -
- {/* Render steps as a numbered list if present */} - {techContent[selectedTab].steps ? ( -
- {step.value}
-
-
- {techContent[selectedTab].code}
-
+ ))}
- After installing, you can prompt your AI coding tool with this - command: -
++ {currentContent[selectedTab].description} +
+ {/* Render steps as a numbered list if present */} + {currentContent[selectedTab].steps ? ( +
+ {step.value}
+
+
+ {currentContent[selectedTab].code}
+
+ - {deploymentCommand} + {/* Deployment Command Section */} +
+ After{' '} + {userType === 'existing' + ? 'updating your configuration' + : 'installing'} + , you can prompt your AI coding tool with this command:
- -+ {deploymentCommand} +
+ ++
Custom fullstack template with Cloudbeaver included
-- Custom Fullstack is a comprehensive application template that includes a Next.js frontend, - custom backend API, Cloudbeaver for database management, Redis for caching, PostgreSQL for - data storage, and Prometheus for monitoring. Perfect for building enterprise-grade applications - with full observability and database management capabilities. +
+ Custom Fullstack is a comprehensive application template that + includes a Next.js frontend, custom backend API, Cloudbeaver for + database management, Redis for caching, PostgreSQL for data + storage, and Prometheus for monitoring. Perfect for building + enterprise-grade applications with full observability and + database management capabilities.
- -- Use the Nexlayer Playground for a visual deployment experience with AI assistance. -
- ++ Use the Nexlayer Playground for a visual deployment + experience with AI assistance. +
+- Deploy directly using the command line for automated workflows. + +
+ Deploy directly using the command line for automated + workflows.
-
- curl -X POST https://app.nexlayer.io/startUserDeployment \
- -H "Content-Type: text/x-yaml" \
+
+
+ curl -X POST https://app.nexlayer.io/startUserDeployment \
+
+ -H "Content-Type: text/x-yaml" \
--data-binary @custom-fullstack.yaml
@@ -296,22 +326,28 @@ jobs:
- Add this workflow to your repository at .github/workflows/deploy.yml for automatic deployments on push to main.
+
+ Add this workflow to your repository at{' '}
+
+ .github/workflows/deploy.yml
+ {' '}
+ for automatic deployments on push to main.
++@@ -319,28 +355,29 @@ jobs:{githubActionsWorkflow}
- Get your enterprise-grade fullstack application running in minutes with this template. +
+ Get your enterprise-grade fullstack application running in + minutes with this template.
-+
Simple NextJS application with Nginx
-- Hello World NextJS is a simple, production-ready NextJS application that demonstrates basic - deployment patterns. Perfect for getting started with NextJS applications on Nexlayer. +
+ Hello World NextJS is a simple, production-ready NextJS + application that demonstrates basic deployment patterns. Perfect + for getting started with NextJS applications on Nexlayer.
- -- Use the Nexlayer Playground for a visual deployment experience with AI assistance. -
- ++ Use the Nexlayer Playground for a visual deployment + experience with AI assistance. +
+- Deploy directly using the command line for automated workflows. + +
+ Deploy directly using the command line for automated + workflows.
-
- curl -X POST https://app.nexlayer.io/startUserDeployment \
- -H "Content-Type: text/x-yaml" \
+
+ curl -X POST https://app.nexlayer.io/startUserDeployment \
+
+ -H "Content-Type: text/x-yaml" \
--data-binary @hello-world-nextjs.yaml
- Add this workflow to your repository at .github/workflows/deploy.yml for automatic deployments on push to main.
+
+ Add this workflow to your repository at{' '}
+
+ .github/workflows/deploy.yml
+ {' '}
+ for automatic deployments on push to main.
++@@ -257,28 +300,29 @@ jobs:{githubActionsWorkflow}
- Get your NextJS application running in minutes with this template. +
+ Get your NextJS application running in minutes with this + template.
-- Choose your path: AI-powered deployment with MCP or manual YAML configuration +
+ In a few minutes, you'll be set up to deploy production-grade apps from your AI code editor or CLI straight to Nexlayer AI-native Cloud Platform. +
++ Authentication is now simpler and more secure. Choose your path below to get started.