MCPcopy
hub / github.com/steven-tey/novel

github.com/steven-tey/novel @1.0.17 sqlite

repository ↗ · DeepWiki ↗ · release 1.0.17 ↗
56 symbols 145 edges 43 files 0 documented · 0%
README

Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions.

Novel

An open-source Notion-style WYSIWYG editor with AI-powered autocompletions.

Hacker News License Novel.sh's GitHub repo

Introduction · Installation · Deploy Your Own · Setting Up Locally · Tech Stack · Contributing · License

Introduction

Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions.

https://github.com/steven-tey/novel/assets/28986134/2099877f-4f2b-4b1c-8782-5d803d63be5c

Installation

To use Novel in a project, you can run the following command to install the novel NPM package:

npm i novel

Then, you can use it in your code like this:

import { Editor } from "novel";

export default function App() {
  return <Editor />;
}

The Editor is a React component that takes in the following props:

Prop Type Description Default
completionApi string The API route to use for the OpenAI completion API. /api/generate
className string Editor container classname. "relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg"
defaultValue JSONContent or string The default value to use for the editor. defaultEditorContent
extensions Extension[] A list of extensions to use for the editor, in addition to the default Novel extensions. []
editorProps EditorProps Props to pass to the underlying Tiptap editor, in addition to the default Novel editor props. {}
onUpdate (editor?: Editor) => void A callback function that is called whenever the editor is updated. () => {}
onDebouncedUpdate (editor?: Editor) => void A callback function that is called whenever the editor is updated, but only after the defined debounce duration. () => {}
debounceDuration number The duration (in milliseconds) to debounce the onDebouncedUpdate callback. 750
storageKey string The key to use for storing the editor's value in local storage. novel__content

Note: Make sure to define an API endpoint that matches the completionApi prop (default is /api/generate). This is needed for the AI autocompletions to work. Here's an example: https://github.com/steven-tey/novel/blob/main/apps/web/app/api/generate/route.ts

Here's an example application: https://github.com/steven-tey/novella

Deploy Your Own

You can deploy your own version of Novel to Vercel with one click:

Deploy with Vercel

Setting Up Locally

To set up Novel locally, you'll need to clone the repository and set up the following environment variables:

  • OPENAI_API_KEY – your OpenAI API key (you can get one here)
  • BLOB_READ_WRITE_TOKEN – your Vercel Blob read/write token (currently still in beta, but feel free to sign up on this form for access)

If you've deployed this to Vercel, you can also use vc env pull to pull the environment variables from your Vercel project.

To run the app locally, you can run the following commands:

pnpm i
pnpm build
pnpm dev

Tech Stack

Novel is built on the following stack:

Contributing

Here's how you can contribute:

  • Open an issue if you believe you've encountered a bug.
  • Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Repo Activity

Novel.sh repo activity – generated by Axiom

License

Licensed under the MIT license.

Extension points exported contracts — how you extend this code

NodeSelectorProps (Interface)
(no doc)
packages/core/src/ui/editor/bubble-menu/node-selector.tsx
LinkSelectorProps (Interface)
(no doc)
packages/core/src/ui/editor/bubble-menu/link-selector.tsx
BubbleColorMenuItem (Interface)
(no doc)
packages/core/src/ui/editor/bubble-menu/color-selector.tsx
ColorSelectorProps (Interface)
(no doc)
packages/core/src/ui/editor/bubble-menu/color-selector.tsx
BubbleMenuItem (Interface)
(no doc)
packages/core/src/ui/editor/bubble-menu/index.tsx

Core symbols most depended-on inside this repo

getPrevText
called by 3
packages/core/src/lib/editor.ts
startImageUpload
called by 3
packages/core/src/ui/editor/plugins/upload-images.tsx
cn
called by 2
packages/core/src/lib/utils.ts
isValidUrl
called by 1
packages/core/src/lib/utils.ts
getUrlFromString
called by 1
packages/core/src/lib/utils.ts
useLocalStorage
called by 1
packages/core/src/lib/hooks/use-local-storage.ts
UploadImagesPlugin
called by 1
packages/core/src/ui/editor/plugins/upload-images.tsx
findPlaceholder
called by 1
packages/core/src/ui/editor/plugins/upload-images.tsx

Shape

Function 49
Interface 7

Languages

TypeScript100%

Modules by API surface

packages/core/src/ui/editor/extensions/slash-command.tsx9 symbols
packages/core/src/ui/editor/plugins/upload-images.tsx7 symbols
packages/core/src/ui/editor/index.tsx3 symbols
packages/core/src/ui/editor/bubble-menu/color-selector.tsx3 symbols
packages/core/src/lib/utils.ts3 symbols
packages/core/src/ui/editor/extensions/index.tsx2 symbols
packages/core/src/ui/editor/extensions/image-resizer.tsx2 symbols
packages/core/src/ui/editor/bubble-menu/node-selector.tsx2 symbols
packages/core/src/ui/editor/bubble-menu/link-selector.tsx2 symbols
packages/core/src/ui/editor/bubble-menu/index.tsx2 symbols
packages/core/src/lib/hooks/use-local-storage.ts2 symbols
apps/web/lib/hooks/use-local-storage.ts2 symbols

Dependencies from manifests, versioned

@radix-ui/react-popover1.0.6 · 1×
@tailwindcss/typography0.5.9 · 1×
@tiptap/core2.0.4 · 1×
@tiptap/extension-color2.0.4 · 1×
@tiptap/extension-highlight2.0.4 · 1×
@tiptap/extension-horizontal-rule2.0.4 · 1×
@tiptap/extension-image2.0.4 · 1×
@tiptap/extension-link2.0.4 · 1×
@tiptap/extension-placeholder2.0.3 · 1×
@tiptap/extension-task-item2.0.4 · 1×
@tiptap/extension-task-list2.0.4 · 1×
@tiptap/extension-text-style2.0.4 · 1×

For agents

$ claude mcp add novel \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact