Quick start

Run Kapi from the root of your Vue or Nuxt project:

npx kapi-ui

Kapi detects your framework, adds the required integration, and starts your configured coding agent.

Then run your dev server as usual and use the overlay to select and element and submit an instruction.

Supported integrations

Frameworks

• Vue with Vite
• Nuxt

Coding agents

• Claude Code
• Codex CLI
• Any coding agent through manual copy-and-paste mode

Manual installation

Install Kapi as a dev dependency:

npm install kapi -D

Vite and Vue

Add the Kapi plugin to vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import kapi from 'kapi-ui/vite-plugin'

export default defineConfig({
  plugins: [
    vue(),
    kapi({
      agent: 'claude',
    }),
  ],
})

Nuxt

Add the Kapi plugin to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['kapi-ui/nuxt'],

  kapi: {
    agent: 'claude',
  },
})

Configuration

The required agent option accepts:

'claude' | 'codex' | false

Use false to enable manual copy-and-paste mode without starting an agent session.

Shortcuts

| Action | Shortcut | |---|---| | Select multiple elements | Drag-select across the elements, or hold Shift and click each element individually | | Exit comment mode | Press Esc to stop composing and exit comment mode |

License

MIT