Basic usage

This quick guide will help you setup the package for common usage (but we still recommend you to read all docs for deeper understanding).

Usage examples

import { CodeBud } from '@appklaar/codebud';

// Declare array of instructions
const INSTRUCTIONS = [
  {
    id: "helloWorld",
    handler: () => {
      console.log('Hello, world!');
    }
  },
  {
    id: "sayHi",
    description: `Say "Hi!" to someone. Has 1 parameter - name to greet`,
    parametersDescription: {
      name: "string"
    },
    handler: (data: {name: string}) => {
      const greeting = `Hi, ${data.name}!`;
      console.log(greeting);
      return {greeting};
    }
  }
];

// Call the init method.
CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS);

// Check package state (optionaly)
console.log('CodeBud init:', CodeBud.isInit);
console.log('CodeBud state:', CodeBud.state);

That's it! Now you can open GUI and try to send an Event.

ApiKey should be valid and registered (you can get one, it's free).

Next.js notes

You can use CodeBud both for client-side and server-side simultaneously and switch between sides using GUI.

We recommend you to use Next.js app router. Older versions of Next.js weren't tested with CodeBud.
On client-side, it is recommended to setup CodeBud only once in the root layout.tsx file.
On server-side, it is recommended to setup CodeBud using instrumentation.ts file.

"use client";
import React, { useRef } from "react";
import { Provider } from "react-redux";
import { makeStore, AppStore } from "./../store/store";
import { setupCodeBud } from "~/codebud/codebudConfig";

type ReduxStoreProviderProps = {
  children: React.ReactNode;
};

// In this example, we are setting up package together with Redux only once using React ref.
// <ReduxStoreProvider> meant to be used in the root layout.tsx file.
// Note that you can use this approach even if you don't use Redux. Just Headless client-side component that inits package once.
export function ReduxStoreProvider({
  children 
}: ReduxStoreProviderProps) {
  const storeRef = useRef<AppStore>();

  if (!storeRef.current) {
    // Create the store instance the first time this renders
    storeRef.current = makeStore();
    // Init CodeBud
    setupCodeBud(storeRef.current);
  }

  return <Provider store={storeRef.current}>{children}</Provider>;
}

That's it! Now you can open GUI and monitor both client-side and server-side of your Next.js application.