From 2a29985be167a7cc1bfcea0b2a054cd9b9bdce42 Mon Sep 17 00:00:00 2001 From: Ebony Louis <55366651+EbonyLouis@users.noreply.github.com> Date: Thu, 22 May 2025 13:17:42 -0700 Subject: [PATCH] docs: Add Context7 MCP Server Tutorial (#2640) Co-authored-by: Rizel Scarlett --- documentation/docs/tutorials/context7-mcp.mdx | 170 ++++++++++++++++++ .../components/CLIExtensionInstructions.js | 28 +++ 2 files changed, 198 insertions(+) create mode 100644 documentation/docs/tutorials/context7-mcp.mdx diff --git a/documentation/docs/tutorials/context7-mcp.mdx b/documentation/docs/tutorials/context7-mcp.mdx new file mode 100644 index 0000000000..ec2276d022 --- /dev/null +++ b/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'; + + + + + +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 + + + [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) + + + **Command** + ```sh + npx -y @upstash/context7-mcp + ``` + + +::: + +## Configuration + +:::info +Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`. +::: + + + + 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 Yes to confirm the installation + 3. Click Save Configuration + 4. Scroll to the top and click Exit from the upper left corner + + + + + + + + +## 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. + + + + 1. Open a new session in Goose Desktop + + + + 1. Open a terminal and start a new Goose session: + + ```sh + goose session + ``` + + + + +### 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? + +::: \ No newline at end of file diff --git a/documentation/src/components/CLIExtensionInstructions.js b/documentation/src/components/CLIExtensionInstructions.js index 2e1df037ab..cd8b7ded38 100644 --- a/documentation/src/components/CLIExtensionInstructions.js +++ b/documentation/src/components/CLIExtensionInstructions.js @@ -127,6 +127,34 @@ export default function CLIExtensionInstructions({
  • {envStepText}
    • + {!hasEnvVars && ( + {`┌ 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`} + )} + {hasEnvVars && ( <> {infoNote &&
    {infoNote}
    }