vite-plugin-koyi 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -0
- package/dist/client.iife.js +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
# vite-plugin-koyi ⚡
|
|
2
|
+
|
|
3
|
+
> AI-powered frontend development assistant for Vite — select any DOM element and ask Claude to help.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## What it does
|
|
8
|
+
|
|
9
|
+
- **Visual DOM picker** — click any element on the page; the plugin resolves its source file and line number automatically via `data-insp-path` attributes injected at build time.
|
|
10
|
+
- **Floating AI chat panel** — multi-turn conversation with streaming output rendered as rich Markdown (tables, code blocks with syntax highlighting, etc.).
|
|
11
|
+
- **Claude integration** — bridges the local `claude` CLI or the Anthropic API with zero configuration.
|
|
12
|
+
- **Shadow DOM isolation** — the overlay never interferes with your app's styles or scroll behaviour.
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install -D vite-plugin-koyi
|
|
18
|
+
# or
|
|
19
|
+
pnpm add -D vite-plugin-koyi
|
|
20
|
+
# or
|
|
21
|
+
yarn add -D vite-plugin-koyi
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Setup
|
|
25
|
+
|
|
26
|
+
### Option A — Claude Code CLI (recommended)
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install -g @anthropic-ai/claude-code
|
|
30
|
+
claude auth login
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
// vite.config.ts
|
|
35
|
+
import { defineConfig } from 'vite'
|
|
36
|
+
import react from '@vitejs/plugin-react'
|
|
37
|
+
import { KoyiPlugin } from 'vite-plugin-koyi'
|
|
38
|
+
|
|
39
|
+
export default defineConfig({
|
|
40
|
+
plugins: [
|
|
41
|
+
react(),
|
|
42
|
+
...KoyiPlugin({
|
|
43
|
+
claudeMode: 'cli',
|
|
44
|
+
}),
|
|
45
|
+
],
|
|
46
|
+
})
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Option B — Anthropic API
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
// vite.config.ts
|
|
53
|
+
import { defineConfig } from 'vite'
|
|
54
|
+
import react from '@vitejs/plugin-react'
|
|
55
|
+
import { KoyiPlugin } from 'vite-plugin-koyi'
|
|
56
|
+
|
|
57
|
+
export default defineConfig({
|
|
58
|
+
plugins: [
|
|
59
|
+
react(),
|
|
60
|
+
...KoyiPlugin({
|
|
61
|
+
claudeMode: 'api',
|
|
62
|
+
apiKey: process.env.ANTHROPIC_API_KEY,
|
|
63
|
+
}),
|
|
64
|
+
],
|
|
65
|
+
})
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Configuration
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
KoyiPlugin(options?)
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
| Option | Type | Default | Description |
|
|
75
|
+
|--------|------|---------|-------------|
|
|
76
|
+
| `claudeMode` | `'cli' \| 'api'` | `'cli'` | How to call Claude — local CLI or Anthropic API |
|
|
77
|
+
| `apiKey` | `string` | `process.env.ANTHROPIC_API_KEY` | API key (required when `claudeMode: 'api'`) |
|
|
78
|
+
| `autoApply` | `boolean` | `true` | Pass `--dangerously-skip-permissions` to the CLI so changes are applied without confirmation prompts |
|
|
79
|
+
| `hotkey` | `string` | `'ctrl+shift+k'` | Keyboard shortcut to toggle the panel |
|
|
80
|
+
| `position` | `{ x: 'left' \| 'right', y: 'top' \| 'bottom' }` | `{ x: 'right', y: 'bottom' }` | Initial position of the floating panel |
|
|
81
|
+
|
|
82
|
+
## Usage
|
|
83
|
+
|
|
84
|
+
1. Start your Vite dev server — the **⚡ Koyi** panel appears in the corner of the page.
|
|
85
|
+
2. Click **🎯 Pick Element** and hover over any DOM element to highlight it.
|
|
86
|
+
3. Click the element — a chip tag appears showing the source file and line number.
|
|
87
|
+
4. Type your question in the chat input and send.
|
|
88
|
+
5. Koyi streams Claude's answer back in real time, with full Markdown rendering.
|
|
89
|
+
6. Press `Ctrl+Shift+K` (or your configured hotkey) to hide/show the panel.
|
|
90
|
+
|
|
91
|
+
## How it works
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
Browser (Shadow DOM overlay)
|
|
95
|
+
└── WebSocket /__koyi_ws
|
|
96
|
+
└── Vite dev server (Node.js)
|
|
97
|
+
├── Reads ±25 source lines around each selected element
|
|
98
|
+
└── ClaudeBridge
|
|
99
|
+
├── CLI mode → spawn `claude --print --output-format stream-json`
|
|
100
|
+
└── API mode → @anthropic-ai/sdk streaming
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
At build time the plugin uses `@code-inspector/core` to inject `data-insp-path="file:line:col"` into every JSX / Vue / Svelte element, which is how the overlay knows which source file to read.
|
|
104
|
+
|
|
105
|
+
## Requirements
|
|
106
|
+
|
|
107
|
+
- Node.js ≥ 18
|
|
108
|
+
- Vite ≥ 4
|
|
109
|
+
- For CLI mode: [`@anthropic-ai/claude-code`](https://www.npmjs.com/package/@anthropic-ai/claude-code) installed globally
|
|
110
|
+
|
|
111
|
+
## License
|
|
112
|
+
|
|
113
|
+
MIT
|