@jrpool/kilotest 55.0.0 → 57.1.0

package/web/tutorialAI/index.html

@@ -14,52 +14,39 @@
   <body>
     <main>
       <h1>Connect an AI Platform to Kilotest</h1>
-      <h2>What you can do here</h2>
+      <h2>Purpose</h2>
+      <p>This tutorial shows you how to make Kilotest available to AI assistants. Suppose:</p>
       <ul>
-        <li>Do you ask questions to artificial intelligence (AI) assistants?</li>
-        <li>Do some of your questions ask for technical information?</li>
+        <li>You use an AI platform, like Claude.ai, Claude Code, Claude Desktop, Perplexity, Cursor, Gemini, or ChatGPT.</li>
+        <li>You want to audit the quality of a web page.</li>
       </ul>
-      <p>If you answered both of these questions with <q>yes</q>, this tutorial is designed for you.</p>
-      <h2>AI needs your help</h2>
-      <p>When you get AI help, you use AI platforms to interact with large language models (LLMs). LLMs are superb at understanding your questions, fetching information for you, and formulating answers from that information. But LLMs are <strong>not</strong> good at performing technical tasks to produce the accurate information they need. For those tasks, LLMs use <em>tools</em>. If you ask an LLM a question that requires a tool, you <strong>cannot assume</strong> that the LLM will know how to discover that tool. Typically, the LLM will try to answer you without the tool and will give you an inferior answer: superficial, vague, incomplete, inaccurate, or even fabricated. To ensure that the LLM uses the right tool, you can tell the AI platform to make the tool available to its LLMs.</p>
-      <p>This tutorial shows you how to do that.</p>
-      <h2>Let us begin with a concrete example</h2>
-      <p>Suppose the AI platform you want to use is Claude, and you will use it in a web browser.</p>
-      <p>Also suppose you will be asking an LLM on that platform to give you technical details about software quality: specifically, about the quality of a particular web page.</p>
-      <p>For that task, the LLM will need a tool that can test a web page to discover quality defects and report those defects to the LLM.</p>
-      <p>Finally, suppose you know about a tool that has that capability: Kilotest. You also know the URL that Kilotest makes available to LLMs: <code>https://kilotest.com/mcp</code>.</p>
-      <h2>What to do</h2>
-      <p>You can solve this problem with two steps.</p>
-      <h3>Step 1: Become a user</h3>
-      <p>If you are not already a user of the Claude AI platform, register yourself on it as a user. You can do this for free. Navigate to <a href="https://claude.ai/login">https://claude.ai/login</a> and use either Google or your email address to create an account. After you proceed through the substeps of creating a <q>Free plan</q> account, you are on the <a href="https://claude.ai/new">home page of a new task</a>.</p>
-      <h3>Step 2: Add a connector</h3>
-      <p>Now you are ready to add a connector to the Claude AI platform.</p>
-      <p>The page has a toolbar on the left side. Click it to expand it, so you can see labels, not only icons.</p>
-      <p>Now click the <q>Customize</q> tool.</p>
-      <p>A dialog opens. In the <q>Customize</q> list, click <q>Connectors</q>.</p>
-      <p>The dialog changes to a <q>Connectors</q> view.</p>
-      <p>In the <q>Add</q> dropdown list, click <q>Add custom connector</q>.</p>
-      <p>A subdialog opens, titled <q>Add custom connector</q>. It contains 4 inputs.</p>
+      <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="#chatgpt">ChatGPT</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>
+        <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>
+        <li>Click <q>Connectors</q>.</li>
+        <li>In the <q>Add</q> list, click <q>Add custom connector</q>.</li>
         <li>Enter <q>Kilotest</q> into the <q>Name</q> input.</li>
         <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>Submit the form by clicking the <q>Add</q> button.</li>
-      </ul>
-      <p>The dialog changes to a tool permissions view for the Kilotest connector. You can decide whether an LLM needs your approval to use each of the tools that Kilotest makes available.</p>
-      <p>Close the dialog by clicking the <code>x</code> button in the top-right corner or by pressing the <code>Escape</code> key.</p>
-      <h2>Finished!</h2>
-      <p>Now the platform will make the connector available to its LLMs.</p>
-      <p>Here is a simple test for you to verify that your configuration works:</p>
-      <ul>
-        <li>In the <q>How can I help you today?</q> input, choose which model you want to use.</li>
-        <li>Enter the question: <q>What quality issues exist on the World Wide Web Consortium home page?</q></li>
-        <li>Click the <q>Send message</q> up-arrow button or press the <code>Enter</code> key to submit your question.</li>
-        <li>From the answer that you get, determine whether the model used any Kilotest tools for this task.</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>
-      <h2>Did this work?</h2>
-      <p>If the model used any Kilotest tools, congratulations! You know how to add tool power to the LLMs on one of the major AI platforms.</p>
-      <p>But what if it did <strong>not</strong> work? If an LLM fails to use the Kilotest connector when it should, or if you need to explicitly tell the LLM to use the connector, something is wrong, and we want to know about your experience. Please use the <a href="tutorialAIComment.html">comment form</a> to tell us about it.</p>
+      <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">
         <h2>Suggest improvements</h2>