# NLUX (Frontend Only)

Want to get started quickly? Check out this frontend only example! They're the fastest way to see the SDK in action. However, these examples are meant for testing and exploration only. In a real application, it's important to protect your API key. We'll show you how to do that in our secure setup guide.

## 1. Create Chat Agent

* Create **Project**

<figure><img src="/files/5M9oiKI0E3n5r3G7VQS8" alt=""><figcaption></figcaption></figure>

* Create a **Chat Agent** at **Project >  Chat Table > New Agent**
* Configure your agent. You can define the following parameters.

| Parameter     | Description                                          |   |
| ------------- | ---------------------------------------------------- | - |
| Agent ID      | Name of Agent                                        |   |
| Model         | LLM model                                            |   |
| Temperature   |                                                      |   |
| Max tokens    |                                                      |   |
| Top-p         |                                                      |   |
| System Prompt | Define the persona of the model                      |   |
| User message  | Define the conversational opener between User and AI |   |
| AI response   | Define the conversational opener between User and AI |   |

<figure><img src="/files/O9sUNKzI0QIYkkAHWanv" alt=""><figcaption></figcaption></figure>

## 2. Get the following information to start using JamAIBase

* Get the **Agent ID.**
* Get the **Project ID**.

<figure><img src="/files/fCTA3D88NegoHPgQt4zk" alt=""><figcaption></figcaption></figure>

* Create **JamAI API Key** at **Organization > Secrets > Create API Key.**

<figure><img src="/files/00s4EbZhIkZer0XMsuoY" alt=""><figcaption></figcaption></figure>

## 3. Clone the Chatbot Example

```bash
git clone https://github.com/EmbeddedLLM/jamaibase-cookbook

# example is at https://github.com/EmbeddedLLM/jamaibase-cookbook/tree/main/quickstart/nlux/0001-chat-with-jamai-agent
```

## 4. Update the App.tsx

```typescript
...
const baseURL = "https://api.jamaibase.com";
const apiKey = "<jamaibase-api-key";
const projectId = "<jamaibase-project-id>";
const agentId = "<your-agent-id";
...

```

## 5. Start app

```bash
cd jamaibase-cookbook/quickstart/nlux/0001-chat-with-jamai-agent
npm install
npm run dev
```

* Open up your app at <http://localhost:5173> .&#x20;

## 6. Manage and View Conversation Histories in Chat Table

<figure><img src="/files/xATv5QkXuj23YO1Mggw1" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jamaibase.com/developer-reference/framework-integration/nlux-frontend-only.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.