docs: Add Context7 MCP Server Tutorial (#2640)

Co-authored-by: Rizel Scarlett <rizel@squareup.com>

documentation/docs/tutorials/context7-mcp.mdx

@@ -0,0 +1,170 @@
+---
+title: Context7 Extension
+
+escription: Add Context7 MCP Server as a Goose Extension
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
+
+
+<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" />
+
+
+This tutorial covers how to add the [Context7 MCP Server](https://github.com/upstash/context7) as a Goose extension to pull up-to-date, version-specific code and docs so Goose can vibe code with real context, not hallucinated or outdated answers.
+
+:::tip TLDR
+<Tabs groupId="interface">
+  <TabItem value="ui" label="Goose Desktop" default>
+  [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40upstash%2Fcontext7-mcp&id=context7&name=Context7&description=Context7%20MCP%20server%20for%20up-to-date%20code%20and%20docs)
+  </TabItem>
+  <TabItem value="cli" label="Goose CLI">
+  **Command**
+  ```sh
+  npx -y @upstash/context7-mcp
+  ```
+  </TabItem>
+</Tabs>
+:::
+
+## Configuration
+
+:::info
+Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
+:::
+
+<Tabs groupId="interface">
+  <TabItem value="ui" label="Goose Desktop" default>
+    1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40upstash%2Fcontext7-mcp&id=context7&name=Context7&description=Context7%20MCP%20server%20for%20up-to-date%20code%20and%20docs)  
+    2. Press <code>Yes</code> to confirm the installation  
+    3. Click <code>Save Configuration</code>  
+    4. Scroll to the top and click <code>Exit</code> from the upper left corner  
+  </TabItem>
+
+  <TabItem value="cli" label="Goose CLI">
+    <CLIExtensionInstructions
+      name="context7"
+      command="npx -y @upstash/context7-mcp"
+      timeout={300}
+    />
+  </TabItem>
+
+</Tabs>
+
+## Example Usage
+
+In this example, Goose uses Context7 to pull real-time docs, compare tools, and scaffold a modern app using only the latest, official implementation patterns.
+
+<Tabs groupId="interface">
+  <TabItem value="ui" label="Goose Desktop" default>
+   1. Open a new session in Goose Desktop
+  </TabItem>
+  <TabItem value="cli" label="Goose CLI">
+
+  1. Open a terminal and start a new Goose session:
+
+  ```sh
+  goose session
+  ```
+
+  </TabItem>
+</Tabs>
+
+### Goose Prompt
+
+I need help building a modern web application. Could you:
+
+1. Use Context7 to analyze and compare:
+
+- Next.js App Router vs Pages Router
+- Prisma vs other ORMs
+- Different authentication approaches
+- State management solutions
+
+2. For each technology chosen:
+
+- Show the latest official implementation patterns
+- Provide type definitions and interfaces
+- Share relevant code snippets from documentation
+- Explain best practices and common pitfalls
+
+3. Help implement:
+
+- Project structure following official guidelines
+- Database schema and type safety
+- Authentication flow with proper security
+- API routes with error handling
+- Performance optimizations
+
+Please reference specific documentation sections and explain why certain approaches are recommended over others.
+
+### Goose Output
+
+:::note Desktop
+
+1. Technology Analysis
+Next.js App Router vs Pages Router
+First, let's get the latest Next.js documentation:
+
+
+-------- Resolve-library-id -------
+
+Let's get detailed documentation about Next.js, focusing on routing:
+
+
+------ Get-library-docs ---------
+
+Let me analyze the Next.js documentation and break down the key differences between the App Router and Pages Router:
+
+------ code structure comparison -----
+
+Let's get information about Prisma and other ORMs:
+
+
+------- Resolve-library-id ---------- 
+
+Let's get Prisma's documentation:
+
+
+------ Get-library-docs ----------
+
+
+Key Decisions and Best Practices:
+
+1. App Router vs Pages Router:
+
+Chose App Router for:
+Server Components by default (better performance)
+Built-in data fetching with streaming
+Simpler API routes with Route Handlers
+Better TypeScript integration
+
+2. Prisma as ORM:
+
+Benefits:
+Type-safe database queries
+Auto-generated client
+Schema migrations
+Rich query API
+Using Prisma Accelerate for better performance
+
+3. Authentication:
+
+NextAuth.js for:
+Built-in security features
+Multiple authentication providers
+Session management
+JWT handling
+
+4. Performance Optimizations:
+
+Server Components for reduced JavaScript
+Route Handlers for API endpoints
+Prisma Accelerate for database performance
+Type safety across the stack
+
+Would you like me to explain any part in more detail or help you implement specific features?
+
+:::

documentation/src/components/CLIExtensionInstructions.js

@@ -127,6 +127,34 @@ export default function CLIExtensionInstructions({
         <li>{envStepText}</li>
       </ol>
 
+      {!hasEnvVars && (
+        <CodeBlock language="sh">{`┌   goose-configure 
+│
+◇  What would you like to configure?
+│  Add Extension (Connect to a new extension) 
+│
+◇  What type of extension would you like to add?
+│  Command-line Extension 
+│
+◇  What would you like to call this extension?
+│  ${name}
+│
+◇  What command should be run?
+│  ${command}
+│
+◇  Please set the timeout for this tool (in secs):
+│  ${timeout}
+│
+◇  Would you like to add a description?
+│  No
+│
+// highlight-start
+◆  Would you like to add environment variables?
+│  No
+// highlight-end
+└  Added ${name} extension`}</CodeBlock>
+      )}
+
       {hasEnvVars && (
         <>
           {infoNote && <div className="alert alert--info">{infoNote}</div>}