@nextlive/nextlive
v1.0.4
Published
NextLive - A React component for live code editing and AI assistance
Readme
NextLive - A React component for live code editing and AI assistance
Table of Contents
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>
);
}- Now you have successfully setupped NextLive. Now just click the button at bottom right corner or press
CTRL+Gto open chat
Contibuting
Please see https://github.com/next-live/nextlive project to contribute