@insy/next
v0.0.3
Published
Next.js plugin for Insy - AI-powered visual editing
Maintainers
divin-princeReadme
@insy/next
Next.js plugin for Insy - AI-powered visual code editing
Seamlessly integrate Insy into your Next.js projects. The client is loaded from unpkg CDN for optimal performance.
Installation
npm install @insy/next --save-dev
# or
pnpm add -D @insy/next
# or
yarn add -D @insy/nextUsage
1. Configure Next.js
// next.config.js
const { withInsy } = require('@insy/next');
module.exports = withInsy()({
// your existing Next.js config
});2. Add the Script Component
// 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:
// pages/_app.tsx
import { InsyScript } from '@insy/next';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<InsyScript />
</>
);
}Options
withInsy({
port: 7777, // Server port (default: 7777)
host: 'localhost' // Server host (default: 'localhost')
})How It Works
- Dev Mode Only - Components only render in development
- Server Auto-Start - Registers with the Insy server on startup
- CDN Client - Loads
@insy/clientfrom unpkg CDN - 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
// 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 - Browser client
- @insy/server - Local server
- @insy/vite - Vite plugin
- @insy/shared - Shared types
License
MIT