@clicktocode/next
v0.3.3
Published
Click an element in your running Next.js app and hand it to a coding agent — element picker + OpenCode bridge. App Router and Pages Router.
Downloads
1,067
Maintainers
amin.arshadiniaReadme
@clicktocode/next
Click an element in your running Next.js app (App Router and Pages Router) and hand it to a coding agent. Full docs →
Hold Alt (⌥ Option on Mac), click an element — or ⇧-click to select several — then type what you want. Your agent gets the element's exact DOM and component source files, so it doesn't burn tokens searching the codebase for it. No agent set up? Hold ⌘C on Mac / Ctrl+C on Windows-Linux (about half a second) instead — a clipboard picker is wired up by default — and the same context is copied (one element, or several) to paste into any AI chat.
Easiest setup — let your AI do it: give your coding agent the repo's SKILL.md and say “integrate clicktocode into this project” — it detects your framework, installs the right package, and wires up the agent of your choice.
npm i -D @clicktocode/nextTwo steps: start the bridge from instrumentation, and render the picker.
1. Enable the instrumentation hook + start the bridge
// next.config.js — Next 14 needs this flag; it's the default in Next 15+
module.exports = { experimental: { instrumentationHook: true } };// instrumentation.ts (project root, or src/ — NOT inside app/ or pages/)
export async function register() {
await import("@clicktocode/next/instrumentation").then((m) => m.registerClickToCode());
}registerClickToCode() is dev-only and Node-only (guarded), and loads the bridge without a bundler-visible import — so no next.config externals are needed. Pass { port } to change the bridge port.
2. Render the picker (dev only)
App Router — in your root layout (keep it a Server Component):
// app/layout.tsx
import { ClickToCode } from "@clicktocode/next";
export default function RootLayout({ children }) {
return (<html><body>
{children}
{process.env.NODE_ENV !== "production" && <ClickToCode />}
</body></html>);
}Pages Router — in _app:
// pages/_app.tsx
import { ClickToCode } from "@clicktocode/next";
export default function App({ Component, pageProps }) {
return <>
<Component {...pageProps} />
{process.env.NODE_ENV !== "production" && <ClickToCode />}
</>;
}<ClickToCode /> props: serverUrl, opencode (adapter options), clipboard (also run a copy picker on ⌘C / Ctrl+C, default true).
<ClickToCode /> defaults to OpenCode on Alt, plus the clipboard picker on ⌘C (Mac) / Ctrl+C (Windows/Linux). Needs the CLI: npm i -g opencode-ai@latest && opencode auth login.
App Router + Server Components
The picker reads React fibers, which only exist for client components. A grab on Server-Component DOM resolves to the nearest "use client" boundary. The Pages Router has no Server Components, so everything is grabbable.
Common gotcha
Seeing Module not found: Can't resolve 'fs' (or child_process/http)? You're on an old version — upgrade to @clicktocode/next ≥ 0.1.0, which keeps the bridge out of the bundle graph. And confirm experimental.instrumentationHook: true on Next 14.
Built on @clicktocode/react + @clicktocode/core. MIT.