feat: add Msty AI integration and configuration instructions (#180)

Author: AshAnand34

README.md

@@ -191,6 +191,25 @@ Or use the following configuration:
 }
 ```
 
+#### Connecting Msty AI
+1. Open Msty Studio
+2. Go to Tools > Import Tools from JSON Clipboard
+3. Paste the following configuration:
+
+```json
+{
+  "mcpServers": {
+    "git-mcp Docs": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://gitmcp.io/{owner}/{repo}"
+      ]
+    }
+  }
+}
+```
+
 For more details on configuring MCP servers in Augment Code, visit [the Augment Code documentation](https://docs.augmentcode.com/setup-augment/mcp).
 
 > **Note:** Remember to replace `{owner}` and `{repo}` with the actual GitHub username/organization and repository name. You can also use the dynamic endpoint `https://gitmcp.io/docs` to allow your AI to access any repository on demand.

app/components/content.tsx

@@ -109,6 +109,8 @@ export default function Content({
         return "https://highlightai.com/favicon.ico";
       case "Augment Code":
         return "https://cdn.prod.website-files.com/66d76c2202b335e39ad2b5e8/66f302d663108ca67c19ddbc_Favicon.png";
+      case "Msty AI":
+        return "https://msty.studio/favicon.ico";
       default:
         return "https://codeium.com/favicon.ico";
     }
@@ -241,6 +243,7 @@ export default function Content({
                 "Cline",
                 "Highlight AI",
                 "Augment Code",
+                "Msty AI",
               ].map((tab, index) => (
                 <button
                   key={tab}
@@ -537,9 +540,49 @@ export default function Content({
                 </div>
               </div>
             </div>
+
+            <div id="tab-msty-ai" className="tab-content hidden">
+              <div className="bg-slate-50 p-3 sm:p-4 rounded-md border border-slate-200">
+                <ul className="text-sm text-slate-700 mb-4 list-disc pl-5 space-y-2">
+                  <li>Copy the following JSON configuration: </li>
+                  <CodeExample
+                    code={`{
+                      "mcpServers": {
+                        "${serverName}": {
+                          "command": "npx",
+                          "args": [
+                            "mcp-remote",
+                            "${url}"
+                          ]
+                        }
+                      }
+                    }`}
+                    id="msty-ai"
+                    name="Msty AI"
+                  />
+                  <li>
+                    Go to Msty Studio &gt; Tools &gt; 'Import Tools from JSON
+                    Clipboard'
+                  </li>
+                </ul>
+                <p className="text-sm text-slate-700 mb-4">
+                  For more details on using Msty AI, refer to{" "}
+                  <a
+                    href="https://docs.msty.ai"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:text-blue-800"
+                  >
+                    the documentation
+                  </a>
+                  .
+                </p>
+              </div>
+            </div>
           </div>
         </div>
 
+        {/* Footer with tool links */}
         <div className="mt-8 flex flex-col items-center justify-center">
           <div className="flex justify-center space-x-8 mb-6">
             <a
@@ -635,6 +678,19 @@ export default function Content({
               />
               Augment Code
             </a>
+            <a
+              href="https://msty.ai"
+              className="text-blue-600 hover:text-blue-800 flex items-center transition-colors"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img
+                src={getToolFaviconUrl("Msty AI")}
+                alt="Msty AI"
+                className="h-6 w-6 mr-2"
+              />
+              Msty AI
+            </a>
           </div>
         </div>
       </div>

app/routes/_index.tsx

@@ -551,6 +551,26 @@ export default function Home() {
                 </span>
               </a>
             </div>
+
+            <div className="flex flex-col items-center">
+              <a
+                href="https://msty.studio"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group hover:opacity-90 transition-opacity flex flex-col items-center"
+              >
+                <div className="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl shadow-lg flex items-center justify-center mb-3 group-hover:from-gray-650 group-hover:to-gray-750 transition-all">
+                  <img
+                    src="https://msty.studio/favicon.ico"
+                    alt="Msty AI"
+                    className="h-8 w-8 sm:h-10 sm:w-10"
+                  />
+                </div>
+                <span className="text-gray-200 text-base sm:text-lg font-medium">
+                  Msty AI
+                </span>
+              </a>
+            </div>
           </div>
         </div>
       </section>