@semoss/sdk-react
v1.0.0-beta.19
Published
@semoss\sdk-react is a small react package that accelerates the process of building an deploying an app.
Downloads
712
Keywords
Readme
@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);
};