elemenote

v0.5.0

Published

11 days ago

Embeddable annotation widget for live sites — global script or React/Next.js (elemenote/react). Pins, exports, MCP-friendly context. https://elemenote.io

0High
0Medium
0Low

ploau

elemenote annotations widget react nextjs next shadow-dom pins markdown mcp

elemenote

Elemenote is a human-first annotation layer for live web pages: pin elements, capture context, export notes, and hand structured briefs to coding assistants instead of re-describing the UI.

Use in development, not as a default production feature. Elemenote fits local dev, staging, and internal review (Design ↔ Engineering, QA, AI workflows). Shipping it to all production users adds UX, script weight, and annotation surface area—only do that when you intentionally want end users to see the widget.

Summary

Install

npm install elemenote

React: add peers (React 18 or 19):

npm install elemenote react react-dom

React

Styles live inside the widget (Shadow DOM). No separate CSS import.

import { Elemenote } from 'elemenote/react'

export function App() {
  return (
    <Elemenote
      position="bottom-right"
      appearance="system"
      locale="en-US"
    />
  )
}

Use an options object instead of flat props if you prefer; flat props override the same keys inside options. TypeScript: ElemenoteInitOptions, ElemenotePosition, ElemenoteAppearance, etc. from 'elemenote/react'.

Next.js (App Router)

elemenote/react is built as a Client Component ('use client'). You can import Elemenote from app/layout.tsx alongside metadata and other server APIs.

import type { Metadata } from 'next'
import { Elemenote } from 'elemenote/react'

export const metadata: Metadata = { title: 'My app' }

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Elemenote position="bottom-right" appearance="system" />
      </body>
    </html>
  )
}

AI Settings

AI-related UI is off by default. Turn it on when you want the widget toolbar to show the AI settings control (MCP mode, bridge URL, CLI send provider, connection checks) and the AI Settings panel.

showAiSettings — set to true on <Elemenote> (or options.showAiSettings: true) to show the AI settings toolbar button and panel.
showAiSendButton — optional; set to true to show the floating “send to AI” control. You can enable either or both; enabling at least one turns on the AI feature surface in the widget.

import { Elemenote } from 'elemenote/react'

export function App() {
  return (
    <Elemenote
      position="bottom-right"
      appearance="system"
      showAiSettings
      showAiSendButton
    />
  )
}

License

Released under the MIT License. The full text is included in the tarball.

elemenote.io · MCP: elemenote-mcp

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

elemenote

Summary

Install

React

Next.js (App Router)

AI Settings

License