Enhance documentation for Port MCP server by adding installation guide and improving image formatting. Updated the overview and installation guide to include a reference to the MCP installation template and modified image tags for better display. Additionally, refined the DORA metrics query guide with improved layout and examples, ensuring clarity and accessibility for users.

Author: kodjomiles

docs/ai-interfaces/port-mcp-server/overview-and-installation.md

@@ -5,6 +5,7 @@ title: Overview & Installation
 
 import Tabs from "@theme/Tabs"
 import TabItem from "@theme/TabItem"
+import MCPInstallation from '/docs/generalTemplates/_mcp-installation.md'
 
 # Port MCP server
 
@@ -75,7 +76,7 @@ Effortlessly query your software catalog and get immediate answers. This elimina
 *   Ask: "Show me all the microservices owned by the Backend team."
 *   Ask: "What are the dependencies of the 'OrderProcessing' service?"
 
-![Querying the service catalog from an IDE](/img/ai-agents/MCPCopilotAskServices.png)
+<img src="/img/ai-agents/MCPCopilotAskServices.png" width="100%" border="1px" />
 
 ### Vibe-build in Port
 
@@ -86,7 +87,7 @@ Leverage Claude's capabilities to manage and build your entire Port software cat
 *   Ask: "I want a new production readiness scorecard to track the code quality and service alerts"
 *   Ask: "Create a new self-service action in Port to scaffold a new service"
 
-![Claude building a self-service action](/img/ai-agents/MCPClaudeBuildSSA.png)
+<img src="/img/ai-agents/MCPClaudeBuildSSA.png" width="100%" border="1px" />
 
 ### Analyze scorecards and quality
 
@@ -96,11 +97,11 @@ Gain insights into service health, compliance, and quality by leveraging Port's
 *   Ask: "What's preventing the 'InventoryService' from reaching Gold level in the 'Production Readiness' scorecard?"
 *   Ask: "Show me the bug count vs. test coverage for all Java microservices."
 
-![Asking about bug counts and test coverage correlation](/img/ai-agents/MCPClaudeInsightsBugs.png)
+<img src="/img/ai-agents/MCPClaudeInsightsBugs.png" width="100%" border="1px" />
 
 *   Ask: "Which of our services are missing critical monitoring dashboards?"
 
-![Identifying services lacking proper monitoring](/img/ai-agents/MCPClaudeMonitoringServices.png)
+<img src="/img/ai-agents/MCPClaudeMonitoringServices.png" width="100%" border="1px" />
 
 ### Streamline development and operations
 
@@ -110,15 +111,12 @@ Receive assistance with common development and operational tasks, directly withi
 *   Ask: "Guide me through creating a new component blueprint with 'name', 'description', and 'owner' properties."
 *   Ask: "Help me add a rule to the 'Tier1Services' scorecard that requires an on-call schedule to be defined."
 
-![Getting instructions for new service setup](/img/ai-agents/MCPClaudeServiceSetup.png)
+<img src="/img/ai-agents/MCPClaudeServiceSetup.png" width="100%" border="1px" />
 
 ### Find your own use cases
 
 You can use Port's MCP to find the use cases that will be valuable to you. Try using this prompt: "think of creative prompts I can use to showcase the power of Port's MCP, based on the data available in Port"
 
-
-import MCPInstallation from '/docs/generalTemplates/_mcp-installation.md'
-
 <MCPInstallation />
 
 ## Token-based authentication

docs/generalTemplates/_mcp-installation.md

@@ -13,7 +13,7 @@ To connect Cursor to Port's remote MCP, follow these steps:
 
    Go to Cursor settings, click on **Tools & Integrations**, and add a new MCP server.
 
-   ![Go to Cursor Settings](/img/ai-agents/MCPInstallCursorStep1.png)
+   <img src="/img/ai-agents/MCPInstallCursorStep1.png" border="1px" width="100%" />
 
 2. **Configure the MCP server**
 
@@ -48,19 +48,19 @@ To connect Cursor to Port's remote MCP, follow these steps:
 </TabItem>
 </Tabs>
 
-   ![Add configuration](/img/ai-agents/MCPInstallCursorStep2.png)
+   <img src="/img/ai-agents/MCPInstallCursorStep2.png" border="1px" width="100%" />
 
 3. **Authenticate with Port**
 
    Click on **"Needs login"** and complete the authentication flow in the window that opens.
 
-   ![Login to Port](/img/ai-agents/MCPInstallCursorStep3.png)
+   <img src="/img/ai-agents/MCPInstallCursorStep3.png" border="1px" width="100%" />
 
 4. **Verify connection**
 
    After successful authentication, you'll see the list of available tools from the MCP server.
 
-   ![See tools](/img/ai-agents/MCPInstallCursorStep4.png)
+   <img src="/img/ai-agents/MCPInstallCursorStep4.png" border="1px" width="100%" />
 
 :::warning Authentication window behavior
 In some cases, after clicking "Accept" in the authentication popup, the window won't get closed but the connection is established successfully. You can safely close the window.
@@ -164,7 +164,7 @@ Failed to validate tool mcp_port_create_action: Error: tool parameters array typ
 2. Click on the tools icon in the chat interface
 3. You should now see Port tools available for use
 
-![VS Code MCP Setup](/img/ai-agents/MCPVSCodeSetup.gif)
+<img src="/img/ai-agents/MCPVSCodeSetup.gif" border="1px" width="100%" />
 
 </TabItem>
 <TabItem value="claude" label="Claude">