The SingularityNET network allows developers to register their AI services on an open marketplace and charge for access. Though the expectation is that service consumers will primarily call services from code, the SingularityNET Dapp offers a rich UI/UX for people to explore the services offered on the network. Providing an interface for consumers to interact with the service on the marketplace is a big driver for demand.
SingularityNet storybook is a UI component explorer for service developers. This lists all common components used in the marketplace and can be reused for your service.
git clone firstname.lastname@example.org:singnet/snet-dapp.git cd snet-dapp npm install cp .env.sandbox .env
org_idto which the service belongs. This value will be used for registering the custom UI
service_idof the service. This value will be used for registering the custom UI
Start the AI service locally along with the snet daemon. Make sure the blockchain is disabled in the daemon configuration.
protoc-gen-tsin the path
./node_modules/.bin/. Else run
npm i -D ts-protoc-gen
.protofiles. For the custom UI to talk to the services on SingularityNET platform via the DApp, we are using gRPC-web by improbable-eng. Apart from the steps mentioned at the official documentation to generate
.protodefinitions, you also need to provide the
namespace_prefixflag to the generator. Here is an example which illustrates the usage
protoc \ --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \ --js_out=import_style=commonjs,binary,namespace_prefix=<uniq_name_space>:. \ --ts_out=service=true:. \ example_service.proto
uniq_name_space should be a combination of
For the following proto file with
service_id=example-service the namespace_prefix would be
PS: All the
- should be replaced by
*pb_service.jsinto your component’s folder and ignore the rest.
org-idto which this service belongs inside
src/assets/thirdPartyServices. It could be possible that the directory already exists, in which case you can use it instead of creating a new one.
service-idunder the newly created directory in the above step e.g. for a service with org-id: snet and service-id: example-service you will have to do the following assuming you are at the root of the
cd src/assets/thirdPartyServices mkdir snet cd snet mkdir example_service cd example_service
src/assets/thirdPartyServices/index.jsif it does not already exist. Add the following line towards the end of the file. Make sure to replace
thirdPartyCustomUIComponents.addCustomUIComponent(orgId, serviceId, CustomUIComponent);
8088, running the bellow commands should bring up the DApp in sandbox mode for local development.
npm run sandbox
Last modified on : 16-Jul-21