@semoss\sdk-react is a small react package that accelerates the process of building an deploying an app.
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);
};
Here are a few tips and tricks that can help streamline the development process.
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
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);
};