search-component JS example

[sabatale]

Hello,

Is there any way today to use the search-component with Vanilla JS and CDN?

Similar to https://www.meilisearch.com/docs/guides/front_end/front_end_integration.

Thanks for your efforts!

[skeptrunedev]

Not with a script tag unfortunately. However, we do support web components.

You can see the web component install guide on this page on the web component tag - https://trieve.ai/sitesearch

[sabatale]

Hopefully this will come! One more thing, it's probably something we do wrong, but any idea what may cause this in development with web components:

        import { TrieveSDK, TrieveModalSearch, initTrieveModalSearch } from "/libs/search-component/dist/index.esm.js";
        export const trieve = new TrieveSDK({
          apiKey: "abc",
          datasetId: "abc",
          theme: "dark",
          placeholder: "abc"
          });
        initTrieveModalSearch({
          trieve: trieve
        });

Access to fetch at 'https://api.trieve.ai/api/chunk/suggestions' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[skeptrunedev]

Hmm, I think that we need to further relax the cors policy on the server. I'm looking into it now.

[skeptrunedev]

Hopefully this will come! One more thing, it's probably something we do wrong, but any idea what may cause this in development with web components:

        import { TrieveSDK, TrieveModalSearch, initTrieveModalSearch } from "/libs/search-component/dist/index.esm.js";
        export const trieve = new TrieveSDK({
          apiKey: "abc",
          datasetId: "abc",
          theme: "dark",
          placeholder: "abc"
          });
        initTrieveModalSearch({
          trieve: trieve
        });

Access to fetch at 'https://api.trieve.ai/api/chunk/suggestions' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Ok, so I was able to take a look and it seems like our server's CORS policy does allow you to make requests from non https localhost URL's.

I think the issue you are having is likely due to an incorrect dataset-id or api-key. Are you sure those values are correct?

[sabatale]

You are right, it looks like setting the theme to dark is not showing in the UI so the options are probably not being sent.

Not sure where to go from there - we'll probably wait for a script release if that happens. We repackaged the .esm.js with all deps to be able use from the client but there are no errors other than the cors one. In the documentation, it indicates initModalSearch() but there was no export for it.

// script type=module
        import { TrieveSDK, TrieveModalSearch, initTrieveModalSearch } from "/libs/search-component/dist/index.esm.js";
        const trieve = new TrieveSDK({
          apiKey: "abc",
          datasetId: "abc",
          theme: "dark",
          placeholder: "abc"
          });
        initTrieveModalSearch({
          trieve: trieve
        });