feat: start adding platforms to AI tutorial

docs/AI-TOOLS.md

@@ -49,6 +49,7 @@ The external features that support the use of Kilotest as a collection of AI too
 - Registration of Kilotest with the [RapidAPI](https://rapidapi.com/jrpool/api/kilotest/playground/apiendpoint_0f03577a-ff9a-472a-a0ed-533bd198981a) Hub.
 - Registration of Kilotest with the [LobeHub MCP Market](https://lobehub.com/mcp) (identifier: `jrpool-kilotest`), enabled with an `lhm.plugin.json` file.
 - Deployment of an MCP server in HTTP mode on the Kilotest service host.
+- Submission of the MCP server to the [Claude directory of plugins and connectors](https://claude.ai/directory/manage).
 - Configuration of Claude Desktop on the local development host and the `claude.ai` web application to connect Claude Desktop models to the Kilotest MCP server. The configuration was performed in the UI of each platform with the addition of Kilotest as a _connector_. The user used the `Customize/Connectors/Add connector/Add custom connector` interface, providing these data before activating the `Add` button:
 
   - Name: Kilotest

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrpool/kilotest",
-  "version": "57.1.0",
+  "version": "57.2.0",
   "description": "Ensemble testing for front-end web quality",
   "type": "module",
   "main": "index.ts",

web/tutorialAI/index.html

@@ -7,33 +7,30 @@
     <meta name="creator" content="Jonathan Robert Pool">
     <meta name="keywords" content="large language models,tools,model context protocol">
     <meta name="description" content="Kilotest tutorial: how to connect an AI platform to Kilotest for technical analysis">
-    <title>Tutorial: Connect an AI Platform | Kilotest</title>
+    <title>Connect an AI Platform | Kilotest</title>
     <link rel="icon" href="/favicon.ico">
     <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>
-      <h1>Connect an AI Platform to Kilotest</h1>
+      <h1><a href="/">Kilotest</a>: Connect an AI Platform</h1>
       <h2>Purpose</h2>
       <p>This tutorial shows you how to make Kilotest available to AI assistants. Suppose:</p>
       <ul>
-        <li>You use an AI platform, like Claude.ai, Claude Code, Claude Desktop, Perplexity, Cursor, Gemini, or ChatGPT.</li>
+        <li>You use an AI platform, like Claude, ChatGPT, Perplexity, or Mistral Vibe.</li>
         <li>You want to audit the quality of a web page.</li>
       </ul>
       <p>Then the models on your AI platform can use Kilotest <strong>if</strong> you make Kilotest available on the platform.</p>
       <h2>What AI platform do you use?</h2>
       <ul>
-        <li><a href="#claude-ai">Claude.ai</a></li>
-        <li><a href="#claude-code">Claude Code</a></li>
-        <li><a href="#claude-desktop">Claude Desktop</a></li>
-        <li><a href="#perplexity">Perplexity</a></li>
-        <li><a href="#cursor">Cursor</a></li>
-        <li><a href="#gemini">Gemini</a></li>
+        <li><a href="#claude">Claude.ai in a browser or Claude Desktop</a></li>
         <li><a href="#chatgpt">ChatGPT</a></li>
+        <li><a href="#perplexity">Perplexity</a></li>
+        <li><a href="#vibe">Mistral Vibe</a></li>
       </ul>
-      <h2 id="claude-ai">Claude.ai</h2>
-      <p><a href="https://claude.ai/login">Claude.ai</a> is an AI platform that you can use for free in any web browser. To make Kilotest available on Claude.ai:</p>
-      <ul>
+      <h2 id="claude">Claude.ai <a href="https://claude.ai">in a browser</a> or <a href="https://downloads.claude.com">Claude Desktop</a></h2>
+      <p>To make Kilotest available on either Claude platform:</p>
+      <ol>
         <li><a href="https://claude.ai/new">Start a new task</a>.</li>
         <li>Expand the left sidebar to see the labels.</li>
         <li>Click <q>Customize</q>.</li>
@@ -43,9 +40,31 @@ <h2 id="claude-ai">Claude.ai</h2>
         <li>Enter <q>https://kilotest.com/mcp</q> into the <q>Remote MCP server URL</q> input.</li>
         <li>Leave the OAuth inputs empty.</li>
         <li>Click <q>Add</q>.</li>
-        <li>Decide whether Claude.ai needs your approval to use each Kilotesw tool.</li>
-        <li>Clicking the <code>x</code> button or by press the <code>Escape</code> key to close the dialog.</li>
-      </ul>
+        <li>For maximum autonomy, click <q>Always allow</q> for each tool.</li>
+        <li>Click the <code>x</code> button or press the <code>Escape</code> key to close the dialog.</li>
+      </ol>
+      <h2 id="chatgpt">ChatGPT</h2>
+      <p>To make Kilotest available on ChatGPT:</p>
+      <ol>
+        <li>Forthcoming</li>
+      </ol>
+      <h2 id="perplexity">Perplexity</h2>
+      <p>To make Kilotest available on Perplexity:</p>
+      <ol>
+        <li>Forthcoming</li>
+      </ol>
+      <h2 id="Vibe">Mistral Vibe</h2>
+      <p>To make Kilotest available on Mistral Vibe:</p>
+      <ol>
+        <li>Choose the <a href="https://chat.mistral.ai/work">Work tab</a>.</li>
+        <li>Click <q>Connect your apps for better answers</q></li>
+        <li>Click the <q>+ Add connector</q> button.</li>
+        <li>Click the <q>Add a custom connector</q> button.</li>
+        <li>Enter <q>Kilotest</q> into the <q>Connector name</q> input.</li>
+        <li>Enter <q>https://kilotest.com/mcp</q> into the <q>Server</q> input.</li>
+        <li>Click the <q>Add connector</q> button.</li>
+        <li>Toggle the <q>Ask/Allow</q> buttons to show <q>Allow</q>.</li>
+      </ol>
       <p>What if this did not work? Use the comment form below to tell us about it.</p>
       <p>You can also submit an issue on the <a href="https://github.com/jrpool/kilotest/issues">Kilotest GitHub repository</a>.</p>
       <section id="suggest-improvement" class="main">