Merge pull request #16 from devfolioco/mcp-v2-guide-update

chore: Updated mcp guide

Author: Sushants-Git

bun.lock

@@ -1,135 +1,139 @@
 ---
 title: Devfolio MCP
-description: Learn about Devfolio MCP (Model Context Protocol) integration.
 ---
 
-<Callout title="Announcement" type="info">
-Builders, meet the Devfolio MCP Server (Beta).
+import { Tabs, Tab } from "fumadocs-ui/components/tabs";
 
-Pull your profile. Fetch your hackathons. Draft a submission, all from the comfort of your AI client.
-</Callout>
-
-## 🤔 What is MCP?
-
-**MCP** stands for **Model Context Protocol** - a protocol that securely streams relevant personal or app-specific data to AI models, helping them respond with deeper context and awareness.
+Devfolio [MCP](https://nsb.dev/devfolio-mcp-explainer) lets you connect Devfolio to AI tools like [Claude Code](https://code.claude.com/docs/en/overview), [Codex](https://openai.com/codex), and [Cursor](https://www.cursor.com/), so they can help you with your hackathon submissions using context from your local project files.
 
-In this case, it allows you to connect your Devfolio account to any MCP-compatible AI tool (like Cursor, VS Code extensions, or Claude) using a simple JSON configuration. This means the AI can understand things like your Devfolio profile, projects, and hackathon activity **only if you allow it**.
-
-<Callout title="Want to dive deeper?" type="info">
-Check this out → [Devfolio MCP Explainer](https://nsb.dev/devfolio-mcp-explainer)
-</Callout>
+Once connected, your AI tool can quickly understand your codebase, help you write stronger submissions faster, surface relevant tracks to apply for, and make it easier to showcase what you’ve built.
 
 <iframe
   width="100%"
   height="400"
-  src="https://drive.google.com/file/d/1LHIWX9uWOmXrJK_dnY0rLRf8Qa4ya76p/preview"
+  src="https://www.youtube.com/embed/BnyOcD7fIqI"
   title="Devfolio MCP Demo"
   frameBorder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowFullScreen
 />
 
----
+## Quick Start
 
-## 🧠 Unlock Devfolio's MCP AI — Step-by-Step Guide
+1. Open [`Account Settings > MCP`](https://devfolio.co/settings/mcp).
+2. Click `Generate API key`.
+3. Choose the setup format for your AI tool.
+4. Paste the prompt, run the command, or copy the JSON shown.
 
-<Callout title="Beta Access Required" type="warning">
-This feature is currently available for Beta Users Only
+<Callout title="Keep your API key private" type="error">
+Your MCP API key is sensitive, like a password. Anyone with access can act on your behalf. If it is compromised, revoke it and generate a new one right away.
 </Callout>
 
----
+## Where Can I Find Devfolio MCP?
 
-### ✨ Step 1: Enter
+You can find Devfolio MCP in Account Settings, your hackathon dashboard, and the project submission page.
 
-Head to [devfolio.co](https://devfolio.co/) and click on your avatar in the **top-right corner**. From the dropdown, click **Account Settings**.
+Hackathon dashboard and submission-page shortcuts appear only when project submissions are open and your account is eligible to submit.
 
-<img src="/assets/mcp-step1.webp" alt="Account Settings" />
+### 1. From Account Settings
 
----
+Go to your profile menu, open `Account Settings`, and select the `MCP` tab.
 
-### 🧪 Step 2: Join the Beta Club
+<img src="/assets/mcp-setting.webp" alt="Devfolio MCP tab in Account Settings" />
 
-In the **left sidebar**, find the tab labeled **Beta**. Click it, and hit **Join [Devfolio Beta](https://devfolio.co/settings/beta)**.
+Click `Generate API key` to create your MCP API key.
 
-<Callout title="Welcome to the experimental zone" type="info">
-You're now part of the experimental zone. No lab coats required.
-</Callout>
+<img src="/assets/mcp-configure-setting.webp" alt="Devfolio MCP setup options in Account Settings" />
 
-<img src="/assets/mcp-step2.webp" alt="Join Beta" />
+### 2. From Your Hackathon Dashboard
 
----
+For hackathons where submissions are open to you, you may also see an `MCP Integration` card on your hackathon dashboard.
 
-### 🤖 Step 3: Find the "MCP" Gateway
+<img src="/assets/mcp-dashboard.webp" alt="MCP Integration card on a hackathon dashboard" />
 
-Once you've joined the Beta program, a new tab magically appears just below — called **MCP**. Click it: [https://devfolio.co/settings/mcp](https://devfolio.co/settings/mcp)
+<img src="/assets/mcp-configure-model-dashboard.webp" alt="Devfolio MCP setup window opened from the hackathon dashboard" />
 
-<Callout title="What is Devfolio MCP?" type="info">
-Devfolio MCP = Devfolio's Model Context Protocol Server.
-</Callout>
+### 3. From the Project Submission Page
 
-<img src="/assets/mcp-step3.webp" alt="MCP Gateway" />
+When you are submitting a hackathon project, you may see a small floating MCP assistant button in the bottom-left corner of the submission page.
 
----
+<img src="/assets/mcp-project.webp" alt="MCP assistant button on the project submission page" />
 
-### 🔐 Step 4: Configure the MCP
+Clicking this button opens the MCP setup window.
 
-Inside the MCP tab:
+<img src="/assets/mcp-configure-model-project.webp" alt="Devfolio MCP setup window opened from the project submission page" />
 
-- Generate your **API Key**
-- Copy the auto-generated **JSON config**
+## Setup Commands and Configuration
 
-<Callout title="Security Warning" type="error">
-Your MCP API key is sensitive — like a password. Anyone with access can act on your behalf. If compromised, revoke it and generate a new one right away.
-</Callout>
+Devfolio fills in your actual MCP API key in the setup window. The examples below use `YOUR_API_KEY` as a placeholder.
 
----
+<Tabs items={["Prompt", "Claude Code", "Codex", "Cursor", "JSON"]}>
+  <Tab value="Prompt">
+
+Copy this prompt and paste it into a new chat with your AI assistant:
+
+```text
+Please connect to the Devfolio MCP server using the following URL:
+https://mcp.devfolio.co/mcp?apiKey=YOUR_API_KEY
+```
+
+  </Tab>
 
-### 🧩 Step 5: Connect an AI Agent
+  <Tab value="Claude Code">
 
-Take your JSON config and paste it into a compatible MCP AI client like Cursor or any other that supports streamable HTTP MCP servers.
+Copy this command and run it in your terminal:
 
-- **Open Your IDE**
-  - Launch your preferred editor (VS Code, Cursor, etc.).
-  - Make sure the MCP-compatible plugin/extension is installed.
-- **Open the Command Palette**
-  - Press `Cmd + Shift + P` (Mac) or `Ctrl + Shift + P` (Windows/Linux).
-  - Type: `MCP` → select `Add MCP Server` (or equivalent).
-- **Paste Your Config**
-  - Paste the JSON config you copied from Devfolio MCP Tab.
-  - It should look like this:
+```bash
+claude mcp add --transport http devfolio --scope user https://mcp.devfolio.co/mcp \
+  --header "x-api-key: YOUR_API_KEY"
+```
+
+  </Tab>
+
+  <Tab value="Codex">
+
+Copy this command and run it in your terminal:
+
+```bash
+codex mcp add devfolio \
+  --url "https://mcp.devfolio.co/mcp?apiKey=YOUR_API_KEY"
+```
+
+  </Tab>
+
+  <Tab value="Cursor">
+
+Click `Add to Cursor` in the setup window, then approve the Devfolio MCP server installation in Cursor.
+
+  </Tab>
+
+  <Tab value="JSON">
+
+If your MCP client asks for a JSON configuration, copy this setup from Devfolio MCP:
 
 ```json
 {
   "mcpServers": {
     "devfolio": {
-      "url": "https://mcp.devfolio.co/mcp?apiKey=XXXX-XXXX-XXXX-XXXX-XXXX"
+      "url": "https://mcp.devfolio.co/mcp?apiKey=YOUR_API_KEY"
     }
   }
 }
 ```
 
-<Callout title="What's happening?" type="info">
-You're essentially plugging your AI into your Devfolio universe.
-</Callout>
+  </Tab>
+</Tabs>
 
-<img src="/assets/mcp-step5.webp" alt="Cursor IDE configured with Devfolio MCP" />
-<p align="center"><i>Example: Cursor IDE configured with Devfolio MCP</i></p>
+## Example Prompts
 
----
+After connecting Devfolio MCP, try prompts like:
 
-### 💬 Step 6: Talk to Your Devfolio AI!
+- `Submit my project to Devfolio.`
+- `Suggest the best prize tracks for my project.`
+- `Rewrite my tagline to be clearer and more judge-friendly.`
+- `Check whether my submission is missing anything important.`
+- `Summarize the prizes for this hackathon.`
 
-Here are some good sample questions to ask the AI:
-
-- What is my username?
-- Analyze and summarize the prizes for the `hackathonName` hackathon.
-- Which prizes from the hackathon are most relevant to my project?
-- Analyze my project, and create a submission for the `hackathonName` hackathon.
-- Update the tagline of my project `projectName` to be more impactful.
-
-<Callout title="Success!" type="info">
-🎉 Hola! You now have an AI buddy that knows your Devfolio activity.
+<Callout title="Access control" type="info">
+You can manage or revoke MCP access from [`Account Settings > MCP`](https://devfolio.co/settings/mcp).
 </Callout>
-
-<img src="/assets/mcp-step6.webp" alt="AI interaction example" />
-

content/docs/guide/devfolio-mcp.mdx

@@ -69,9 +69,9 @@ Let’s say you're editing a project:
 5. Ready to submit? Hit `CMD + K`, find your hackathon, and go for it!
 
 
-**Might be a good time to fire up the [🔗 MCP](https://nsb.dev/Devfolio_mcp_Guide) for that submission.**
+**Might be a good time to fire up the [🔗 MCP](/docs/guide/devfolio-mcp) for that submission.**
 
 
 ---
 
-Let your keyboard do the work, and ship faster on Devfolio. 🧑‍💻✨
+Let your keyboard do the work, and ship faster on Devfolio. 🧑‍💻✨

content/docs/guide/keyboard-accessibility.mdx

@@ -1,12 +1,13 @@
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import * as TabsComponents from 'fumadocs-ui/components/tabs';
 import type { MDXComponents } from 'mdx/types';
+import { ZoomableImage } from '@/components/zoomable-image';
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
     ...TabsComponents,
+    img: ZoomableImage,
     ...components,
   };
 }
-