{"id":20504328,"url":"https://github.com/klevultd/frontend-sdk","last_synced_at":"2025-10-24T06:39:22.779Z","repository":{"id":36958948,"uuid":"456976128","full_name":"klevultd/frontend-sdk","owner":"klevultd","description":"Monorepository for Klevu headless","archived":false,"fork":false,"pushed_at":"2024-04-02T11:54:28.000Z","size":25744,"stargazers_count":19,"open_issues_count":15,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-03T09:26:44.869Z","etag":null,"topics":["api-client","ecommerce","headlessui","react","remix-run","search-engine","ssr","typescript","vue"],"latest_commit_sha":null,"homepage":"https://www.klevu.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/klevultd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-02-08T14:52:35.000Z","updated_at":"2024-08-06T12:00:25.319Z","dependencies_parsed_at":"2023-10-03T11:06:14.231Z","dependency_job_id":"4bcb1dfb-6474-4600-ad49-bad87a7a3d88","html_url":"https://github.com/klevultd/frontend-sdk","commit_stats":{"total_commits":441,"total_committers":10,"mean_commits":44.1,"dds":0.1882086167800453,"last_synced_commit":"097191ddc23110588d816a3337030acef7626c8e"},"previous_names":[],"tags_count":136,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klevultd%2Ffrontend-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klevultd%2Ffrontend-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klevultd%2Ffrontend-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klevultd%2Ffrontend-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klevultd","download_url":"https://codeload.github.com/klevultd/frontend-sdk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248098553,"owners_count":21047460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-client","ecommerce","headlessui","react","remix-run","search-engine","ssr","typescript","vue"],"created_at":"2024-11-15T19:37:20.153Z","updated_at":"2025-10-24T06:39:17.724Z","avatar_url":"https://github.com/klevultd.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Design Systems"],"sub_categories":["Community"],"readme":"![Klevu](images/klevu_header.jpg?raw=true \"Klevu\")\n\n[![](https://img.shields.io/badge/Discord-Join%20the%20chat-5965f2.svg?style=flat-square\u0026logo=discord\u0026logoColor=white)](https://discord.gg/Jrud6Zj5Hy)\n\n# Headless product discovery, for every body\n\nWith Klevu’s brand new SDK, you can pull the power of AI product discovery into anything.\n\nA traditional website, a single page application (SPA), progressive web app (PWA), a mobile app, a campaign website, an in-store kiosk, a spaceship… whatever.\n\nSimpler for developers, faster to innovate.\n\n# Klevu headless monorepository\n\nHere are the links to different projects.\n\n- [@klevu/core](packages/klevu-core/README.md) package that can be used to build modern frontends with Klevu search.\n- [React example](examples/react/) React, React Router, Material UI example.\n- [Vue example](examples/vue/) Vue 3, Vue-Router, TailwindCSS example.\n- [Nuxt example](examples/nuxt3/) Nuxt 3 example.\n- [Remix example](examples/remix/) Remix is a React-based example of using Klevu with Server Side Rendering.\n- [Vanilla JavaScript example](examples/vanillajs/) - Minimal JavaScript example.\n- [Shopify Hydrogen example](examples/hydrogen/) - Small Hydrogen example\n\n# Integrate Klevu into your application with ease. We do all the heavy lifting.\n\nKlevu SDK brings smart search, category merchandising and recommendations solution to your ecommerce store. Klevu makes it easy to create the best product browsing experience for your customers.\n\nKlevu already has a simple to implement JavaScript library that is perfect for most users, so who is this library good for?\n\n## TypeScript SDK\n\nThe Klevu SDK is written in TypeScript which gives you:\n\n- Full auto-completion support of integrated development environments (IDEs)\n- Full documenation from the code comments!\n- Easy and fast way to integrate Klevu to your custom UI\n\n## SPA (Single Page Applications)\n\nThis library supports all the major frontend libraries like React and Vue. This SDK however gives you the ability to plugin Klevu smart search, category merchandizing and recommendations any way that you would like. Including event tracking of product clicks, searches, and purchases that drive the AI at Klevu's core.\n\n## PWA (Progressive Web Applications)\n\nPWAs are designed to give users an experience on par with native apps. With the Klevu SDK, you can also bring the power of Klevu AI into your PWA.\n\n## SSR \u0026 SSG (Server Side Rendering \u0026 Static Site Generation)\n\nSSR \u0026 SSG are quickly becoming standard features in all of the most popular frontend frameworks such as NextJS and NuxtJS. With the Klevu SDK you can both increase your store's SEO and your user's experience by requesting search results, category pages, and recommendations before the page loads.\n\n## Full Creative Control, on Full Power\n\nThe Klevu SDK gives developers maximum control over the way they want to display and allow users to interact with your product catalog. When you add the SDK library to your project you have all the building blocks necessary to create trully unique user experiences that perfectly fit your brand.\n\n# Klevu SDK Feature List\n\nWe've packed a lot of features into the React Example included with this SDK. Here are many of the features and where to find a working example. You can also take a look a the [React Example README](/examples/react/) for more information on what is implemented in the example and click here to:\n\n## [View a Live Demo](https://headlessdemo.klevu.com/)\n\n## Search\n\n| Feature                     | Description                                                           | Example                                                                                                                                     |\n| --------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| Quick Search                | Example used to display search results as you type into a text field. | [quicksearch.tsx](/examples/react/src/components/quicksearch.tsx)                                                                           |\n| Search Results Landing Page | Example to show search results based on a keyword passed in the URL.  | [SearchResultPage.tsx](/examples/react/src/routes/SearchResultPage.tsx)                                                                     |\n| Category Navigation         | Example display of products in a Category/Collection.                 | [CategoryPage.tsx](/examples/react/src/routes/CategoryPage.tsx)                                                                             |\n| Single Product Search       | Example of using search to query the data for a single product.       | [ProductPage.tsx](/examples/react/src/routes/ProductPage.tsx)                                                                               |\n| Filters                     | Examples of filters to narrow down products based on product facets.  | [SearchResultPage.tsx](/examples/react/src/routes/SearchResultPage.tsx) \u003cbr\u003e[CategoryPage.tsx](/examples/react/src/routes/CategoryPage.tsx) |\n| Load More Results           | Example of a Load More button to request more products.               | [SearchResultPage.tsx](/examples/react/src/routes/SearchResultPage.tsx)                                                                     |\n\n## Analytics\n\nAnalytics drive the Machine Learning Klevu uses to provide users the best results.\n\n| Feature                                 | Description                                              | Example                                                                 |\n| --------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------- |\n| SearchEvent                             | Track what was searched.                                 | [quicksearch.tsx](/examples/react/src/components/quicksearch.tsx)       |\n| Search Product Click Event              | Track the products that are clicked from search results. | [SearchResultPage.tsx](/examples/react/src/routes/SearchResultPage.tsx) |\n| Category Navigation Product Click Event | Track the products that are clicked from category pages. | [CategoryPage.tsx](/examples/react/src/routes/CategoryPage.tsx)         |\n| Buy/Purchase Event                      | Track the products that are purchased.                   | [CheckoutPage.tsx](/examples/react/src/routes/CheckoutPage.tsx)         |\n\n## Recommendations\n\n| Feature                               | Description                                  | Example                                                                                                                                                                                        |\n| ------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Klevu Merchant Center Recommendations | Add recommendations created within KMC. [^1] | [HomePage.tsx](/examples/react/src/routes/HomePage.tsx)\u003cbr\u003e [CategoryPage.tsx](/examples/react/src/routes/CategoryPage.tsx) \u003cbr\u003e [ProductPage.tsx](/examples/react/src/routes/ProductPage.tsx) |\n| Similar Products                      |                                              | [ProductPage.tsx](/examples/react/src/routes/ProductPage.tsx)                                                                                                                                  |\n\n[^1]: Klevu's Merchant Center allows you to create recommendations for specific uses that take into account the context of the pages they are added into.\n\n## Personalization\n\n| Feature         | Description                                                                 | Example                                                 |\n| --------------- | --------------------------------------------------------------------------- | ------------------------------------------------------- |\n| Personalisation | Easily add personlization to your klevuFetch searches by adding a modifier. | [HomePage.tsx](/examples/react/src/routes/HomePage.tsx) |\n\n## Utilities\n\n| Feature          | Description                                                               | Example                                    |\n| ---------------- | ------------------------------------------------------------------------- | ------------------------------------------ |\n| KlevuKMCSettings | Load your Klevu Merchant Center settings into the browser's localstorage. | [index.tsx](/examples/react/src/index.tsx) |\n\n# Internal development\n\nNode.js and npm is required to be installed on your system before starting. This should be done once before starting development.\n\n## Core\n\nTo run build and test `@klevu/core` you need to first go to `packages/klevu-core`.\n\nBefore starting you need to have all packages installed with `npm install`\n\n### Creating release version\n\n`npm run build` creates production version of the `@klevu/core`. It does a clean build every time it runned.\n\nTo actually release there is CI/CD script `utils/release-klevu-core.js`. Use Node.JS to run it.\n\n### Developing core\n\n\u003e npm run build:watch\n\n`build:watch` runs build in watch mode rebuilding application every time there is changes. It doesn't do clean build, but incremental builds and it doesn't do all tricks required for the release. It is good if you wish make changes to library while developing other package like `@klevu/ui` that require changes to core.\n\n\u003e npm run qoc\n\nThis checks that quality of code is good enough. Will be automatically run by GitHub.\n\n\u003e npm run test\n\nRuns big suite of tests for core. Doesn't require building. It can be possible just to develop and run test once in a while to see everything works perfectly. Will be automatically run by GitHub.\n\n## UI\n\nTo start building `@klevu/ui` you first need to go to `packages/klevu-ui` folder and do the `npm install`. To make build work correctly you need to run `npm install` also in `packages/klevu-ui-react` and `packages/klevu-ui-vue`.\n\nReact and Vue packages do not need any other changes. Their contens are automatically generated by `klevu-ui` project.\n\n### Creating release version\n\n`npm run build` creates a distributed version of `@klevu/ui`. But to create proper version and release all three UI libraries there is a CI/CD node script in `utils/update-klevu-ui.js`.\n\n### Developing\n\nEasiest way to develop and test components is by running Storybook. For that you need to watch build the ui project and run the storybook.\n\n\u003e npm run build:watch\n\nAnd in separate window\n\n\u003e npm run storybook\n\nThis should open the development environment.\n\nTo create generate components you can use the command:\n\n\u003e npm run generate\n\n# VSCode extensions\n\nIt is recommened to have `ESLint` and `Prettier` extensions installed in order to produce clean code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklevultd%2Ffrontend-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklevultd%2Ffrontend-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklevultd%2Ffrontend-sdk/lists"}