Improve MCP Server connection guide (#30)

* Add CopyToClipboard for MCP endpoint

* Add LearnMore link for auth tokens

Author: mneudert

lang/en.json

@@ -8,7 +8,7 @@
         "ConnectInClientStepEndpoint": "Set the MCP server URL.",
         "ConnectInClientStepInitialize": "Save the configuration and connect.",
         "ConnectInClientStepOpenSettings": "Open your MCP client settings and find the MCP server configuration.",
-        "ConnectInClientTokenHelp": "In Matomo, go to: %1$sPersonal Settings -> Security -> Auth tokens%2$s. Create a token (or reuse an existing one) and use it as your %3$stoken_auth%4$s.",
+        "ConnectInClientTokenHelp": "In Matomo, go to: %1$sPersonal Settings -> Security -> Auth tokens%2$s. Create a token (or reuse an existing one) and use it as your %3$stoken_auth%4$s. %5$sLearn more about auth tokens%6$s.",
         "ConnectInClientTitle": "Connect Your MCP Client",
         "ConnectIntro": "Use this guide to connect any MCP client to your Matomo MCP Server.",
         "ConnectMcpDisabledCanEnable": "MCP Server is currently disabled. %1$sEnable it in Plugin Settings%2$s to start accepting MCP requests.",

stylesheets/mcpServer.less

@@ -1,4 +1,15 @@
 .mcpServerConnect {
+  .mcpServerCopyField {
+    margin: 0 0 1rem;
+    padding-right: 4.5rem;
+  }
+
+  .mcpServerCopyValue {
+    margin: 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
   .mcpServerLongCode {
     word-break: break-all;
   }

templates/connect.twig

@@ -38,7 +38,9 @@
     {% if isMcpEnabled %}
         <div vue-entry="CoreHome.ContentBlock" content-title="{{ 'McpServer_ConnectEndpointTitle'|translate }}" anchor="endpoint">
             <p>{{ 'McpServer_ConnectEndpointDescription'|translate }}</p>
-            <p><code class="mcpServerLongCode">{{ mcpApiEndpoint }}</code></p>
+            <div class="mcpServerCopyField">
+                <pre class="mcpServerLongCode mcpServerCopyValue" vue-directive="CoreHome.CopyToClipboard">{{ mcpApiEndpoint }}</pre>
+            </div>
         </div>
 
         <div vue-entry="CoreHome.ContentBlock" content-title="{{ 'McpServer_ConnectInClientTitle'|translate }}" anchor="set-up-client">
@@ -55,7 +57,7 @@
                 <li>{{ 'McpServer_ConnectInClientStepInitialize'|translate }}</li>
             </ol>
             <h3>{{ 'McpServer_ConnectTokenTitle'|translate }}</h3>
-            <p>{{ 'McpServer_ConnectInClientTokenHelp'|translate('<a href="' ~ userSecurityUrl ~ '">', '</a>', '<code>', '</code>')|raw }}</p>
+            <p>{{ 'McpServer_ConnectInClientTokenHelp'|translate('<a href="' ~ userSecurityUrl ~ '">', '</a>', '<code>', '</code>', externallink('https://matomo.org/faq/general/faq_114/'), '</a>')|raw }}</p>
         </div>
 
         <div vue-entry="CoreHome.ContentBlock" content-title="{{ 'McpServer_ConnectTroubleshootingTitle'|translate }}" anchor="troubleshooting">