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
  • Kaapi Guardrails Service
• 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

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

💡 Note: The Guardrails service must be running and accessible whenever you use the Guardrails module in the frontend.

---

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

Trigger	Environment
Push to main	Staging
Tag matching v*.*.* (e.g. v1.0.0)	Production

Pipeline Steps

Staging — on every push to main, 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 pm2 server to apply the new build

Production — on every version tag (e.g. v1.0.0, v2.1.0), the pipeline automatically:

1. SSHes into the EC2 instance
2. Runs git fetch --tags and checks out the tag
3. Runs npm run build to create an optimized production build
4. Restarts the pm2 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