<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

This package should work in the browser: <a href="https://www.npmjs.com/package/mistra

We plan to move to fetch to solve a few axios related issues <a class="issue-link js-i

Streaming doesn't work in the browser about client-js HOT 3 CLOSED

sublimator commented on May 27, 2024 1

Streaming doesn't work in the browser

from client-js.

Comments (3)

wordware-ai commented on May 27, 2024

This package should work in the browser: https://www.npmjs.com/package/mistral-edge

from client-js.

wordware-ai commented on May 27, 2024

Actually, it looks like there's also a CORS issue but this can be solved with corsproxy.io

Here's a very minimal example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mistral-edge browser example</title>
    <!-- Including mistral-edge from unpkg -->
    <script src="https://www.unpkg.com/mistral-edge/dist/index.min.js"></script>
  </head>
  <body>
    <h1><code>mistral-edge</code> browser example</h1>
    <textarea id="input" placeholder="Your request here">Write a haiku about cheese</textarea>
    <button id="run">Run</button>
    <pre id="output"></pre>

    <script>
      const runButton = document.getElementById("run");
      const outputElement = document.getElementById("output");

      let fullOutput;
      runButton.addEventListener("click", async function () {
        fullOutput = "";
          const tokenStream = window["mistral-edge"].streamMistralChat(
          [{ role: "user", content: document.getElementById("input").value }],
          {
            model: "mistral-medium",
            temperature: 0.7,
          },
          {
            apiKey: "dN3DwBHXeml44luKElOmz6tHW3kVzZxL",
            apiUrl:
              "https://corsproxy.io/?https://api.mistral.ai/v1/chat/completions",
          },
        );

        let fullResponse = "";
        for await (const token of tokenStream) {
          fullResponse += token;
          outputElement.textContent = fullResponse;
        }
      });
    </script>
  </body>
</html>