Kaapi-Frontend

This is a thin frontend UI for Kaapi backend — a platform that acts as a middleware layer, enabling platforms like Avni, Glific, and Dalgo to seamlessly integrate AI functionality.

---

📋 Table of Contents

• Pre-requisite
  • Software Dependencies
    • npm (via asdf)
  • Kaapi Backend
• Clone Frontend Repo
  • Git commands to clone
• Installation
  • Start frontend server
• Available Scripts
• Pre-commit Hooks
• Deploying Release on EC2 with CD
• Learn More

---

Pre-requisite

Software Dependencies

npm (via asdf)

asdf plugin-add nodejs
asdf install

Clone Frontend Repo

Git commands to clone

git clone git@github.com:ProjectTech4DevAI/kaapi-frontend.git

---

Kaapi Backend

You need to set up the Kaapi backend service and follow the instructions there.

💡 Note: Ensure the backend is running and accessible before starting the frontend.

Kaapi Guardrails Service (coming soon)

The Guardrails UI (currently in development) will require the Kaapi Guardrails service to be running alongside the backend. Setup instructions will be added here once the service is available.

🚧 No action needed for now — this is a placeholder for when the Guardrails feature lands in main.

---

Installation

1. Copy .env.example to .env in the project root:

   cp .env.example .env

2. Do not modify .env unless absolutely required.

3. Install dependencies:

   npm install
   # or
   yarn

---

Start frontend server

npm run dev
# or
yarn dev

Visit http://localhost:3000 to open the app.

Available Scripts

npm install      # Install dependencies (also sets up pre-commit hooks via husky)
npm run dev      # Run app in development mode
npm run build    # Create optimized production build
npm run start    # Start the production server
npm run lint     # Run ESLint on the entire project
npm test         # Run tests
npm run test:coverage  # Run tests with coverage report

---

Pre-commit Hooks

This project uses Husky and lint-staged to enforce code quality before every commit.

What runs on commit

• ESLint is executed on all staged *.ts, *.tsx, *.js, and *.jsx files. Any lint errors must be fixed before the commit is accepted.

Setup

Hooks are installed automatically when you run:

npm install

This works because the prepare script in package.json runs husky after every install.

Skipping the hook (not recommended)

If you need to bypass the hook in exceptional cases:

git commit --no-verify -m "your message"

---

Deploying Release on EC2 with CD

Deployments are automated via a GitHub Actions CD pipeline that SSHes into the EC2 instance, pulls the latest code, builds, and restarts the server.

Branch Strategy

Branch	Environment
main	Staging
release	Production

Pipeline Steps

On every push to main or release, the pipeline automatically:

1. SSHes into the EC2 instance
2. Runs git pull to fetch the latest code
3. Runs npm run build to create an optimized production build
4. Restarts the server to apply the new build

---

Learn More

• 🌐 Kaapi
• 📄 One Pager
• 📄 Next.js Documentation - learn about Next.js features and API.
• 📄 Learn Next.js - an interactive Next.js tutorial.

Chat With Us

• 💬 Discord