This package defines the common interface for an agent explorer plugin.
Plugins have an init function that returns a configuration object.
The configuration object defines locations in the agent-explore
UI that will get modified by the plugin as well as
some of the methods it will use from the associated Veramo agent.
A plugin that adds a new menu item and a new page to the UI to manage some contacts.
import { IPlugin } from '@veramo-community/agent-explorer-plugin';
const Plugin: IPlugin = {
init: () => {
return {
config: {
enabled: true,
url: 'core://contacts',
},
name: 'Contacts',
description: 'Explore contacts',
icon: <ContactsOutlined />,
requiredMethods: ['dataStoreORMGetIdentifiers'],
routes: [
{
path: '/contacts',
element: <Contacts />,
},
{
path: '/contacts/:id',
element: <Identifier />,
},
],
menuItems: [
{
name: 'Contacts',
path: '/contacts',
icon: <ContactsOutlined />,
},
],
getCredentialContextMenuItems
}
}
};
- veramolabs/agent-explorer-plugin-brainshare
- veramolabs/agent-explorer-plugin-gitcoin-passport
- veramolabs/agent-explorer-plugin-kudos
- veramolabs/agent-explorer-plugin-graph-view
- veramolabs/agent-explorer-plugin-social-feed
- veramolabs/agent-explorer-plugin-developer-tools
- simonas-notcat/agent-explorer-plugin-codyfight
All of these plugins use the same project structure.
You can use any of them as a template for your own plugin.
- Clone any of the above mentioned plugin repositories
- Run
pnpm i
- Run
pnpm serve
to start the development server - Run
pnpm ngrok
to open a tunnel to your local server - Copy the ngrok url and paste it in the text field after clicking Add in https://explore.veramo.io/settings/plugins
https://EXAMPLE.ngrok.app/plugin.js
https://github.com/veramolabs/agent-explorer/assets/16773277/0fda3289-1d71-4559-97d4-786069e3a334
Run local agent-explore
instance
git clone https://github.com/veramolabs/agent-explorer.git
cd agent-explorer
pnpm i
cd packages/plugin
pnpm build
cd ../agent-explore
pnpm dev
- Clone any of the above mentioned plugin repositories
- Run
pnpm i
- Run
pnpm serve
to start the development server - Copy
http://localhost:8080/plugin.js
and paste it in the text field after clicking Add http://localhost:3000/plugins
- Run
pnpm build
- Commit changes and push to github
- Use the github url to load the plugin in
agent-explore
https://cdn.jsdelivr.net/gh/{USER}/{REPO}/dist/plugin.js
The plugin name
name: string;
A short description of the plugin
description: string;
The plugin icon
icon?: React.ReactNode;
These will be displayed in the plugins list
/** An array of routes to be added to the explorer */
routes?: IRouteComponent[];
Example:
routes: [
{
path: '/contacts',
element: <Contacts />,
},
{
path: '/contacts/:id',
element: <Identifier />,
},
]
An array of menu items to be added to the explorer
menuItems?: ExtendedMenuDataItem[];
Example:
menuItems: [
{
name: 'Contacts',
path: '/contacts',
icon: <ContactsOutlined />,
},
],
An array of methods that the plugin requires to be implemented by the agent.
If the agent does not implement the required methods, the plugin will be loaded but the menu item will not be shown.
requiredMethods: string[];
Example:
requiredMethods: ['dataStoreORMGetIdentifiers'],
Does the plugin provide custom css
hasCss?: boolean;
Example: Brainshare plugin provides custom css.
Veramo agent plugins accesable by all explorer plugins
agentPlugins?: IAgentPlugin[];
Veramo agent message handlers
messageHandlers?: AbstractMessageHandler[];
Example: Chats plugin
Menu items for the credential context menu
getCredentialContextMenuItems?: (credential: UniqueVerifiableCredential) => MenuProps['items'];
Example Chats plugin
{
key: 'sendto',
label: 'Share with ...',
icon: <MessageOutlined />,
onClick: handleSendTo
}
Returns a react component for a given verifiable credential
getCredentialComponent?: (credential: UniqueVerifiableCredential) => React.FC<IVerifiableComponentProps> | undefined;
Example: Kudos plugin
Returns a react component that will be displayed in the identifier hover component
getIdentifierHoverComponent?: () => React.FC<IIdentifierHoverComponentProps>;
Example: Gitcoin Passport plugin
Returns an array of react components and labels that will be displayed as tabs in the indentifier profile page
getIdentifierTabsComponents?: () => Array<{ label: string, component: React.FC<IIdentifierTabsComponentProps> }>;
Example: Credentials plugin
getIdentifierTabsComponents: () => {
return [
{
label: 'Issued credentials',
component: IdentifierIssuedCredentials,
},
{
label: 'Received credentials',
component: IdentifierReceivedCredentials,
},
]
}
Returns an array of react components that will be displayed as action buttons in Credential component
getCredentialActionComponents?: () => Array<React.FC<ICredentialActionComponentProps>>;
Example: Reactions plugin
react-markdown
Components for custom markdown rendering
getMarkdownComponents?: () => Partial<Components> | undefined;
remark
plugins for custom markdown manipulations
getRemarkPlugins?: () => PluggableList;
Example: Brainshare plugin