diff --git a/README.md b/README.md index ace02f66..0efd88b2 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,38 @@ -# Orama UI Components +

+ +

+

+ Documentation • + Storybook +

+
-## Table of Contents +[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com) -1. [Introduction](#introduction) -2. [Getting Started](#getting-started) - - [Installation](#installation) -3. [Components](#components) - - [Chatbox: `Chatbox`](#chatbox) -4. [Contributing](#contributing) +# Orama UI Components -## Introduction +This library provides a set of ready to use UI components for easily implementing **Search** and **AI Chat** functionalities in your web applications through Orama. -Welcome to the **Orama UI Components Library**! This library provides a set of reusable UI components for easily implementing search functionalities in your web applications. + -## Getting Started +![Watch the video](/misc/readme/orama-quick-view.gif) -### Installation +## Getting Started -To get started with our components, you need to install the library via npm: +Orama Components were built with StencilJS as Web Components. They can be used in any project, no matter the framework or library you are using. But we also provide **React**, **Angular**, and **Vue** wrappers for easier integration. **Properties and Events** are the same across all wrappers, but the syntax is slightly different for each one, so please check the documentation for each wrapper for examples. -```bash -npm install @orama/ui-components -# TODO: placeholder -``` +- [Web Components](./packages/ui-stencil/) +- [React Components](./packages/ui-stencil-react/) +- [Angular Components](./packages/ui-stencil-angular/) +- [Vue Components](./packages/ui-stencil-vue/) -### Authentication +## Authentication Since most of our components require you to have a cloud index already deployed, make sure to: 1. **Sign Up**: Go to [Our Signup Page](https://cloud.oramasearch.com/auth/signup) and create an account. 2. **Create your first index**: You can even create a Demo index to start playing around -## Components - -### Chatbox: `Chatbox` - -**Description**: This component enables you to swiftly set up an entire Retrieval-Augmented Generation (RAG) system in just under 3 minutes. It leverages the answer engine to enhance content generation. - -**Usage**: - -```html - -``` - -## Contributing + diff --git a/apps/demo-angular/README.md b/apps/demo-angular/README.md index abf190e6..46409041 100644 --- a/apps/demo-angular/README.md +++ b/apps/demo-angular/README.md @@ -1,27 +1 @@ -# AppAngular - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +# TODO diff --git a/apps/demo-react/README.md b/apps/demo-react/README.md new file mode 100644 index 00000000..46409041 --- /dev/null +++ b/apps/demo-react/README.md @@ -0,0 +1 @@ +# TODO diff --git a/apps/demo-vue/README.md b/apps/demo-vue/README.md index ef72fd52..46409041 100644 --- a/apps/demo-vue/README.md +++ b/apps/demo-vue/README.md @@ -1,18 +1 @@ -# Vue 3 + TypeScript + Vite - -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `` in the head of your index.html -- Then you can use the element anywhere in your template, JSX, html etc - -### Node Modules - -- Run `npm install my-component --save` -- Put a script tag similar to this `` in the head of your index.html -- Then you can use the element anywhere in your template, JSX, html etc - -### In a stencil-starter app - -- Run `npm install my-component --save` -- Add an import to the npm packages `import my-component;` -- Then you can use the element anywhere in your template, JSX, html etc