Using Nylas components

Notetaker components is available for Contract plans only.

Nylas maintains the @nylas/react library, a set of pre-built React components you can use to integrate Notetaker into your UI. Each component is built with clean internal styling, and they all support standard customization properties.

Before you begin

Before you start, install the components package in your environment.

Set up provider

You need to set up a provider before you can use some components. The provider is responsible for handling communication with the Nylas APIs. It automatically passes your API key and manages authentication for the components. This lets the components interact with Nylas without you having to manually handle API requests or authentication logic.

import { provider as NotebookComponentsProvider } from "@nylas/react";

// Configure the provider for notebook components
NotebookComponentsProvider.setState({
  accessToken: "your-access-token",
    apiUrl:"us" // You can leave this blank, or use "eu" for the E.U. region.
    accessToken: "your-nylas-access-token",
});

import { useEffect } from "react";
import { provider as useProvider } from "@nylas/react";

export default function App() {
    const provider = useProvider();

    useEffect(() => {
    // Configure the provider for notebook components
    provider.setAccessToken("your-access-token");
    provider.setApiUrl("us"); // You can leave this blank, or use "eu" for the E.U. region.
    }, []);

    return <div>Hello World</div>;
}

Alternatively, you can store your API key in localStorage using the nylas-access-token key. The components automatically detect and use this token if present, without you needing to set up a provider.

Available components

You can use the following components in your project:

Changelog

Changelog for the components will appear here.