Skip to content

Genie Chat Frontend

Requirements:

Install the following tools:

Install dependencies

In the root of the project directory, you must install the dependencies from package.json and create a bun.lockb file, by running the following:

bun install

Local Development

Create a .env file and adjust the local environment variables.

cp .env.example .env

Create a GenieTilesConfig.json.example file and adjust the variables.

cp GenieTilesConfig.json.example GenieTilesConfig.json

N.B. The GenieTilesConfig.json determines which tiles are created & where the front-end connects to. Please see the following table for a detailed description:

Name Type Description Required
title string Title of the tile Yes
description string Short paragraph explaining the tile Yes
buttonIcon IconName Determines the tile icon and is based on Lucide React dynamic icons. Please ensure your value matches an icon in their list, otherwise it will default to "text" . No, defaults to "text".
comingSoon boolean Gives the tile a coming soon icon No, defaults to false
endpoint string The endpoint of the agent the front end connects to, e.g "/v1/ai/chat" No if external link, yes for chat
href string External link, use for tiles that send the user to another website No if chat, yes if external link
to string Front end link, determines where on the frontend the tile points to No if external link, yes for chat
proxy object Allows the front end to connect to an agent via proxy. Should be in the format: No if external link, yes for chat

Run: Starts development version of the application with hot reloading enabled

bun run dev

Build: Creates a production version of the application

bun run build

Preview: Starts a production version of the application from the \dist folder - you must first run bun run build

bun run preview

Prettier: Formats all files to pre-defined coding standards. Should be used before any Merge Request is created

bun run prettier

Extend the frontend to your needs

Connecting to Genie Agents

This should now be done through GenieTilesConfig.json.

Creating new pages

If you want to have multiple pages that render different content, create a new page under the /pages directory then add that new page to the routes.tsx object array, making sure to import the component. If done correctly, the new page will be dynamically rendered into the navigation menu at the top of the screen.

Technologies

  • Vite: Build tool
  • Bun: Package Manager
  • TailwindCSS: CSS Utility Framework
  • TypeScript: Type safe JavaScript linting
  • ESLint: Enforce coding standards
  • Prettier: Enforce coding formatting