@semoss/sdk-react

@semoss\sdk-react

@semoss\sdk-react is a small react package that accelerates the process of building an deploying an app.

Getting Started:

First, install the sdk using a package manager (or your favorite cdn):

npm install @semoss/sdk-react

Second, install dependencies using a package manager:

npm install @semoss/sdk

Next, import the InsightProvider. This provider will wrap your components and provide an Insight to all of it's children. Insights are temporal workspaces that allow end users to script and interact with a model, storage engine, or database.

import { InsightProvider } from '@semoss/sdk-react';

const App = (props) => {
    const { children } = props;

    return <InsightProvider>{children}</InsightProvider>;
};

Once the application is wrapped, You can access the insight through the useInsight hook;

import { useInsight } from '@semoss/sdk-react';

const Child = (props) => {
    const { children } = props;

    const {
        /** Track if it is initialized **/
        isInitialized,
        /** Track if the user is authorized **/
        isAuthorized,
        /** Any Insight Errors **/
        error,
        /** System information **/
        system,
        /** Actions to update **/
        actions,
    } = useInsight();

    return <div>{children}</div>;
};

Now you are ready to go. You can do things like

• Login or Logout

const login = (username, password) => {
    const success = await actions.login({
        type: 'native',
        username: username,
        password: password,
    });

    console.log(success);
};

const loginWithOauth = (provider: 'ms' ) => {
    const resp = await insight.actions.login({
        type: 'oauth',
        provider: provider
    })

    console.log(resp)
}

const logout = (username, password) => {
    const success = await actions.logout();

    console.log(success);
};

• Query a LLM and return a result

const ask = (question) => {
    const { output } = await actions.askModel(MODEL_ID, question);

    // log the output
    console.log(output);
};

• Ask LLM with stream

import { partial, runPixel } from '@semoss/sdk';

const { actions, insightId } = useInsight()

const askWithStream = async () => {
        let isCollecting = false;

        const collectMessage = async () => {
            // only continue if response hasn't come back from runPixel
            if (!isCollecting) {
                return;
            }
    
            // get the output of partial
            try {
                const output = await partial(insightId);

                // add the partial
                if (output.message && output.message.total) {
                    setAnswer(output.message.total);
                }

                // get the next partial of response
                setTimeout(() => collectMessage(), 1000);
            } catch (e) {
                // noop
            }
        }

        // start collecting
        isCollecting = true;

        // initial delay that collects partial of response
        setTimeout(() => collectMessage(), 500);

        const { errors, pixelReturn } = await runPixel(
            `LLM(engine=["001510f8-b86e-492e-a7f0-41299775e7d9"], command=["<encode>${question}</encode>"]);`,
            insightId,
        );

        // OR

        // const response = await  actions.run(
        //     `LLM(engine=[MODEL_ID], command=["<encode>${question}</encode>"]);`,
        //     insightId,
        // )

        isCollecting = false
    }

• Run a database query

const getMovies = () => {
    const { output } = await actions.queryDatabase(
        DATABASE_ID,
        'select * from movie',
    );

    // log the output
    console.log(output);
};

• Run Python

const sum = (num1, num2) => {
    const { output } = await actions.runPy(`${num1} + ${num2}`);

    // log the output
    console.log(output);
};

• Upload a File

const upload = (file, path) => {
    const { output } = await actions.upload(file, path);

    // log the output
    console.log(output);
};

• Download a File

const download = (path) => {
    const { output } = await actions.download(path);

    // log the output
    console.log(output);
};

Tips and Tricks

Here are a few tips and tricks that can help streamline the development process.

Development Environment

Note: We recommend manually setting the environment only in development mode.

You can setup a development environment and use access keys to authenticate with the app server. Generate the keys on the server and then update the Env module. See:

// import the module
import { Env } from '@semoss/sdk';

// update the environment
Env.update({
    /**
     * Url pointing to the app server
     **/
    MODULE: '',
    /**
     * Access key generated by the app server
     **/
    ACCESS_KEY: '',
    /**
     * Secret key generated by the app server
     **/
    SECRET_KEY: '',
    /**
     * Optional field. This will load app specific reactors into the insight. Your app has to be hosted and running on the app server.
     **/
    APP: '',
});

Note: Please do not commit your keys. Instead externalize your keys to a .env and load them in as environment variables during development

Python

The app server allows you to write custom python to power your app. You can initialize your python environment by:

• Loading via a file

The sdk will load python via an external file.

# ./hello.py
def sayHello(name):
    print(f'Hello {name}')

Set the option on initialize:

// update the environment
initialize({
    python: {
        /**
         *  Load the python via an external file
         **/
        type: 'file',
        /**
         *  Path to the file
         **/
        path: './hello.py',
        /**
         *  Alias for the file
         **/
        alias: 'smss',
    },
});

• Loading via js

Set the option on initialize:

// define it int he js
const py = `
def sayHello(name):
    print(f'Hello {name}')
`;

// update the environment
initialize({
    python: {
        /**
         *  Load the python via js
         **/
        type: 'script',
        /**
         *  Path to the file
         **/
        script: py,
        /**
         *  Alias for the file
         **/
        alias: 'smss',
    },
});

Next you can the preloaded python methods by calling the runPy action. See

const hello = (name) => {
    const { output } = await actions.runPy(
        `smss.sayHello(${name})`,
    );

    // log the output
    console.log(output);
};