Glass

Setting up Glass

Glass is no longer maintained. If you would like access to the source code, feel free to reach out.

First, install theGlass VSCode Extension Glass Logo

Next, install the glass-js package in your project:

npm install glass-js
# OR
yarn add glass-js
# OR
pnpm add glass-js

Next, add the SWC plugin to your next.config.js file. This allows Glass to locate what you clicked on in your source code.

// next.config.js
const nextConfig = {
  ...
  experimental: {
    swcPlugins: [["glass-js/swc", {}]]
  }
};

module.exports = nextConfig;

Finally, add the GlassProvider to your project:

With App router

// app/layout.js
import GlassProvider from 'glass-js'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GlassProvider>
          {children}
        </GlassProvider>
      </body>
    </html>
  )
}

With Pages router

// pages/_app.js
import GlassProvider from 'glass-js'

export default function App({ Component, pageProps }) {
  return (
    <>
      <GlassProvider>
        <Component {...pageProps} />
      </GlassProvider>
    </>
  )
}

Add your OpenAI key

Go in VSCode's settings (press Ctrl+,), search Glass, and enter your key.

🎉 Setup complete!