open-index/open-npm huggingface dataset:
npm package: @insy/client
Description: Insy browser client
Latest version: 0.0.4

# @insy/client

> Browser client for Insy - AI-powered visual code editing

[![npm version](https://img.shields.io/npm/v/@insy/client.svg)](https://www.npmjs.com/package/@insy/client)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The browser-side client that provides visual element selection, UI widgets, and WebSocket communication with the Insy server.

## Installation

```bash
npm install @insy/client
# or
pnpm add @insy/client
# or
yarn add @insy/client
```

## Usage

### Via CDN (Recommended)

```html
<script src="https://unpkg.com/@insy/client@latest/dist/client.js"></script>
```

### Via Framework Plugin

If you're using Vite or Next.js, use the respective plugins which handle client injection automatically:

- [@insy/vite](https://www.npmjs.com/package/@insy/vite) - Vite plugin
- [@insy/next](https://www.npmjs.com/package/@insy/next) - Next.js plugin

## Features

- Visual element selection with hover highlighting
- Quick edit popup for natural language prompts
- Image attachment support for visual context
- WebSocket communication with Insy server
- Framework detection (React, Vue, HTML)
- Component context capture (props, state, fiber path)
- Source file hints extraction

## Configuration

The client reads configuration from global variables injected by the server or framework plugins:

```javascript
window.__INSY_PROJECT_ROOT__ = '/path/to/project';
window.__INSY_SERVER_PORT__ = 7777;
```

## Keyboard Shortcuts

- `Alt+Q` - Toggle element selection mode

## API

The client auto-initializes when loaded. For programmatic access:

```javascript
import InsyClient from '@insy/client';

const client = new InsyClient();
await client.init();
```

## Related Packages

- [@insy/server](https://www.npmjs.com/package/@insy/server) - Local server
- [@insy/vite](https://www.npmjs.com/package/@insy/vite) - Vite plugin
- [@insy/next](https://www.npmjs.com/package/@insy/next) - Next.js plugin
- [@insy/shared](https://www.npmjs.com/package/@insy/shared) - Shared types

## License

MIT
npm package: @insy/next
Description: Next.js plugin for Insy - AI-powered visual editing
Latest version: 0.0.5

# @insy/next

> Next.js plugin for Insy - AI-powered visual code editing

[![npm version](https://img.shields.io/npm/v/@insy/next.svg)](https://www.npmjs.com/package/@insy/next)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Seamlessly integrate Insy into your Next.js projects. The client is loaded from unpkg CDN for optimal performance.

## Installation

```bash
npm install @insy/next --save-dev
# or
pnpm add -D @insy/next
# or
yarn add -D @insy/next
```

## Usage

### 1. Configure Next.js

```javascript
// next.config.js
const { withInsy } = require('@insy/next');

module.exports = withInsy()({
  // your existing Next.js config
});
```

### 2. Add the Script Component

```tsx
// app/layout.tsx (App Router)
import { InsyScript } from '@insy/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <InsyScript />
      </body>
    </html>
  );
}
```

Or for Pages Router:

```tsx
// pages/_app.tsx
import { InsyScript } from '@insy/next';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <InsyScript />
    </>
  );
}
```

## Options

```javascript
withInsy({
  port: 7777,       // Server port (default: 7777)
  host: 'localhost' // Server host (default: 'localhost')
})
```

## How It Works

1. **Dev Mode Only** - Components only render in development
2. **Server Auto-Start** - Registers with the Insy server on startup
3. **CDN Client** - Loads `@insy/client` from unpkg CDN
4. **Webpack Define** - Injects `__INSY_PROJECT_ROOT__` and `__INSY_SERVER_PORT__`

## Features

- Works with both App Router and Pages Router
- Client loaded from CDN (no bundling overhead)
- Automatic server lifecycle management
- TypeScript support out of the box

## Requirements

- Next.js >= 13.0.0
- React >= 18.0.0
- Node.js >= 18.0.0
- OpenCode CLI (for AI features)

## Example

```javascript
// next.config.js
const { withInsy } = require('@insy/next');

module.exports = withInsy({
  port: 8888  // Custom port
})({
  reactStrictMode: true,
  // ... other Next.js config
});
```

## Related Packages

- [@insy/client](https://www.npmjs.com/package/@insy/client) - Browser client
- [@insy/server](https://www.npmjs.com/package/@insy/server) - Local server
- [@insy/vite](https://www.npmjs.com/package/@insy/vite) - Vite plugin
- [@insy/shared](https://www.npmjs.com/package/@insy/shared) - Shared types

## License

MIT
npm package: @insy/server
Description: Insy local server
Latest version: 0.0.7

# @insy/server

> Local server for Insy - AI-powered visual code editing

[![npm version](https://img.shields.io/npm/v/@insy/server.svg)](https://www.npmjs.com/package/@insy/server)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The server component that handles AI integration, WebSocket communication, and coordinates between the browser client and CLI tools like OpenCode.

## Installation

```bash
npm install @insy/server
# or
pnpm add @insy/server
# or
yarn add @insy/server
```

## Usage

### Programmatic API

```typescript
import { startServer, InsyServer } from '@insy/server';

// Simple start
await startServer({
  port: 7777,
  host: 'localhost',
  projectRoot: process.cwd()
});

// Or with full control
const server = new InsyServer({
  port: 7777,
  host: 'localhost',
  projectRoot: '/path/to/project'
});
await server.start();
```

### Via CLI

```bash
npx @insy/server
# or
npx insy-server
```

## Features

- HTTP server with REST API endpoints
- WebSocket server for real-time communication
- CLI tool adapter system (OpenCode integration)
- Prompt building with element context
- Client script serving with injected configuration
- Project registration for multi-project support

## API Endpoints

- `GET /health` - Health check
- `GET /config` - Get project configuration
- `GET /client.js` - Serve client script with injected config
- `POST /register` - Register a project

## WebSocket Messages

### Client to Server

- `prompt/submit` - Submit a prompt with element context

### Server to Client

- `connected` - Connection established
- `status` - Status update during processing
- `done` - Processing complete
- `error` - Error occurred

## Requirements

- Node.js >= 18.0.0
- OpenCode CLI (for AI integration)

## Related Packages

- [@insy/client](https://www.npmjs.com/package/@insy/client) - Browser client
- [@insy/vite](https://www.npmjs.com/package/@insy/vite) - Vite plugin
- [@insy/next](https://www.npmjs.com/package/@insy/next) - Next.js plugin
- [@insy/shared](https://www.npmjs.com/package/@insy/shared) - Shared types

## License

MIT
npm package: @insy/shared
Description: Shared types and utilities for Insy
Latest version: 0.0.4

# @insy/shared

> Shared types and utilities for Insy

[![npm version](https://img.shields.io/npm/v/@insy/shared.svg)](https://www.npmjs.com/package/@insy/shared)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Common TypeScript types and utilities shared across all Insy packages.

## Installation

```bash
npm install @insy/shared
# or
pnpm add @insy/shared
# or
yarn add @insy/shared
```

## Usage

```typescript
import type {
  ElementInfo,
  Framework,
  FrameworkContext,
  WebSocketMessage,
  InsyConfig,
  // ... other types
} from '@insy/shared';
```

## Types

### Framework Detection

- `FrameworkType` - Supported frameworks: `'react' | 'vue' | 'svelte' | 'nextjs' | 'html'`
- `Framework` - Framework info with type, version, and devtools status

### Element Context

- `ElementInfo` - Complete element information (tag, class, id, bbox, screenshot, HTML, CSS, selectors)
- `BoundingBox` - Element position and dimensions
- `ReactContext` - React-specific context (component name, props, state, hooks, fiber path, source)
- `VueContext` - Vue-specific context (component name, props, data, computed)
- `HtmlContext` - HTML-specific context (attributes, data attributes)
- `FrameworkContext` - Union of framework contexts
- `SourceHints` - Source file location hints

### WebSocket Messages

- `WebSocketMessage` - Base message format
- `PromptSubmitPayload` - Prompt submission with full element context
- `StatusUpdatePayload` - Processing status updates
- `ErrorPayload` - Error information
- `ConversationMessage` - Chat history message

### Configuration

- `InsyConfig` - Full configuration schema
- `AIConfig` - AI provider settings
- `ServerConfig` - Server host/port settings
- `EditorConfig` - Editor mode settings
- `UIConfig` - UI preferences

### File Attachments

- `FileAttachment` - Image attachment for prompts

## Utilities

```typescript
import { createMessage } from '@insy/shared';

const msg = createMessage('status', { stage: 'analyzing', message: 'Processing...' });
```

## Related Packages

- [@insy/client](https://www.npmjs.com/package/@insy/client) - Browser client
- [@insy/server](https://www.npmjs.com/package/@insy/server) - Local server
- [@insy/vite](https://www.npmjs.com/package/@insy/vite) - Vite plugin
- [@insy/next](https://www.npmjs.com/package/@insy/next) - Next.js plugin

## License

MIT
npm package: @insy/vite
Description: Vite plugin for Insy - AI-powered visual editing
Latest version: 0.0.9

# @insy/vite

> Vite plugin for Insy - AI-powered visual code editing

[![npm version](https://img.shields.io/npm/v/@insy/vite.svg)](https://www.npmjs.com/package/@insy/vite)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Seamlessly integrate Insy into your Vite projects with automatic server startup and client injection.

## Installation

```bash
npm install @insy/vite --save-dev
# or
pnpm add -D @insy/vite
# or
yarn add -D @insy/vite
```

## Usage

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { insy } from '@insy/vite';

export default defineConfig({
  plugins: [
    react(),
    insy()  // Add the Insy plugin
  ]
});
```

That's it! The plugin will:

1. Start the Insy server when Vite dev server starts
2. Inject the client script into your HTML
3. Configure the project root and server port automatically

## Options

```typescript
insy({
  port: 7777,      // Server port (default: 7777)
  host: 'localhost' // Server host (default: 'localhost')
})
```

## How It Works

1. **Dev Mode Only** - The plugin only activates during `vite serve`
2. **Server Auto-Start** - Starts (or registers with) the Insy server
3. **HTML Transform** - Injects configuration and client script into `index.html`
4. **Global Config** - Sets `__INSY_PROJECT_ROOT__` and `__INSY_SERVER_PORT__` globals

## Features

- Zero configuration for most projects
- Automatic server lifecycle management
- Hot Module Reload compatible
- Works with all Vite-compatible frameworks (React, Vue, Svelte, etc.)

## Requirements

- Vite >= 4.0.0
- Node.js >= 18.0.0
- OpenCode CLI (for AI features)

## Example

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { insy } from '@insy/vite';

export default defineConfig({
  plugins: [
    react(),
    insy({
      port: 8888  // Use custom port
    })
  ]
});
```

## Related Packages

- [@insy/client](https://www.npmjs.com/package/@insy/client) - Browser client
- [@insy/server](https://www.npmjs.com/package/@insy/server) - Local server
- [@insy/next](https://www.npmjs.com/package/@insy/next) - Next.js plugin
- [@insy/shared](https://www.npmjs.com/package/@insy/shared) - Shared types

## License

MIT