---
sidebar_label: 'NLUX + Hugging Face'
---

import {PlatformSelector} from '@site/src/components/PlatformSelector/PlatformSelector';
import {PlatformSection} from '@site/src/components/PlatformSection/PlatformSection';

import ReactJs from './_004-nlux-hugging-face-inference/#react.mdx';
import Javascript from './_004-nlux-hugging-face-inference/#js.mdx';

import HfModelSetup from './_004-nlux-hugging-face-inference/online/001-hugging-face-model-setup.mdx';

import InstallReactJs from './_004-nlux-hugging-face-inference/react-js/002-install.mdx';
import InstallJavascript from './_004-nlux-hugging-face-inference/javascript/002-install.mdx';

import ImportReactJs from './_004-nlux-hugging-face-inference/react-js/003-import.mdx';
import ImportJavascript from './_004-nlux-hugging-face-inference/javascript/003-import.mdx';

import CreateAdapterReactJs from './_004-nlux-hugging-face-inference/react-js/004-create-adapter.mdx';
import CreateAdapterJavascript from './_004-nlux-hugging-face-inference/javascript/004-create-adapter.mdx';

import CreateChatCompReactJs from './_004-nlux-hugging-face-inference/react-js/005-create-comp.mdx';
import CreateChatCompJavascript from './_004-nlux-hugging-face-inference/javascript/005-create-comp.mdx';

import StyleReactJs from './_004-nlux-hugging-face-inference/react-js/006-style.mdx';
import StyleJavascript from './_004-nlux-hugging-face-inference/javascript/006-style.mdx';

import RunReactJs from './_004-nlux-hugging-face-inference/react-js/007-run.mdx';
import RunJavascript from './_004-nlux-hugging-face-inference/javascript/007-run.mdx';

# Get Started ― NLUX And Hugging Face Inference API

[Hugging Face](https://huggingface.co/) is a popular platform for sharing and using pre-trained AI models.
It provides a wide range of models for various tasks, including text generation tasks that enables building chatbots
and other conversational AI applications.

This guide focuses on _NLUX_ UI and assumes some familiarity with Hugging Face's hosted inference API.
If you are new to Hugging Face's inference API, you can check out the [official documentation](https://huggingface.co/docs/api-inference/en/index) for more information.

The advantage of Hugging Face's inference API is that it allows you to access a wide range of models and use them for
inference without having to worry about the underlying infrastructure or the model's implementation details.

---

## 1. Set up the Hugging Face Inference API

<PlatformSection javascript={HfModelSetup} reactJs={HfModelSetup}/>

---

_NLUX_ is available as a React JS component and hooks, or as a Javascript library.<br />
The features are identical for both platforms.
Use the version that best suits your needs.

<PlatformSelector reactJs={ReactJs} javascript={Javascript}/>

---

## 2. Install NLUX Packages

<PlatformSection javascript={InstallJavascript} reactJs={InstallReactJs}/>

---

## 3. Import Component And Hook

<PlatformSection javascript={ImportJavascript} reactJs={ImportReactJs}/>

---

## 4. Create Hugging Face Adapter

<PlatformSection javascript={CreateAdapterJavascript} reactJs={CreateAdapterReactJs}/>

---

## 5. Create Chat Component

<PlatformSection javascript={CreateChatCompJavascript} reactJs={CreateChatCompReactJs}/>

---

## 6. Add CSS Styles

<PlatformSection javascript={StyleJavascript} reactJs={StyleReactJs}/>

---

## 7. Run Your App

<PlatformSection javascript={RunJavascript} reactJs={RunReactJs}/>