@nextlive/client NPM

NextLive - A React component for live code editing and AI assistance

NextLive is a powerful coding assistant which can help you to interact with AI and make changes to your project from your WebBrowser.

NextLive is powered by Google Gemini, an AI multimodal assistant made to focus on code solving. The Best Model to use is Gemini 2.5 Pro/Flash

⚠️ Important: This component currently supports only NextJS

How to install

Create a new NextJS
Let the creation of the new app finish.
Now go to your app directory by running

cd <YOUR PROJECT NAME>

Now run

npm install --save @nextlive/nextlive

Now you have successfully install NextLive in your project

Setup

Go to your your layout file at src/app/layout.tsx
Paste This Code:

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import {NextLive} from "@nextlive/nextlive";
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <NextLive skipPaths={['']}>
          {children}
        </NextLive>
      </body>
    </html>
  );
}