@veramo-community/agent-explorer-plugin
Advanced tools
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
}
}
};
All of these plugins use the same project structure.
You can use any of them as a template for your own plugin.
ngrokpnpm ipnpm serve to start the development serverpnpm ngrok to open a tunnel to your local serverhttps://EXAMPLE.ngrok.app/plugin.js
https://github.com/veramolabs/agent-explorer/assets/16773277/0fda3289-1d71-4559-97d4-786069e3a334
ngrokRun 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
pnpm ipnpm serve to start the development serverhttp://localhost:8080/plugin.js and paste it in the text field after clicking Add http://localhost:3000/pluginspnpm buildagent-explorehttps://cdn.jsdelivr.net/gh/{USER}/{REPO}/dist/plugin.js
nameThe plugin name
name: string;
descriptionA short description of the plugin
description: string;
iconThe plugin icon
icon?: React.ReactNode;
These will be displayed in the plugins list
routes/** An array of routes to be added to the explorer */
routes?: IRouteComponent[];
Example:
routes: [
{
path: '/contacts',
element: <Contacts />,
},
{
path: '/contacts/:id',
element: <Identifier />,
},
]
menuItemsAn array of menu items to be added to the explorer
menuItems?: ExtendedMenuDataItem[];
Example:
menuItems: [
{
name: 'Contacts',
path: '/contacts',
icon: <ContactsOutlined />,
},
],
requiredMethodsAn 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'],
hasCssDoes the plugin provide custom css
hasCss?: boolean;
Example: Brainshare plugin provides custom css.
agentPluginsVeramo agent plugins accesable by all explorer plugins
agentPlugins?: IAgentPlugin[];
messageHandlersVeramo agent message handlers
messageHandlers?: AbstractMessageHandler[];
Example: Chats plugin
getCredentialContextMenuItemsMenu items for the credential context menu
getCredentialContextMenuItems?: (credential: UniqueVerifiableCredential) => MenuProps['items'];
Example Chats plugin
{
key: 'sendto',
label: 'Share with ...',
icon: <MessageOutlined />,
onClick: handleSendTo
}
getCredentialComponentReturns a react component for a given verifiable credential
getCredentialComponent?: (credential: UniqueVerifiableCredential) => React.FC<IVerifiableComponentProps> | undefined;
Example: Kudos plugin
getIdentifierHoverComponentReturns a react component that will be displayed in the identifier hover component
getIdentifierHoverComponent?: () => React.FC<IIdentifierHoverComponentProps>;
Example: Gitcoin Passport plugin
getIdentifierTabsComponentsReturns 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,
},
]
}
getCredentialActionComponentsReturns an array of react components that will be displayed as action buttons in Credential component
getCredentialActionComponents?: () => Array<React.FC<ICredentialActionComponentProps>>;
Example: Reactions plugin
getMarkdownComponentsreact-markdown Components for custom markdown rendering
getMarkdownComponents?: () => Partial<Components> | undefined;
getRemarkPluginsremark plugins for custom markdown manipulations
getRemarkPlugins?: () => PluggableList;
Example: Brainshare plugin
1.72.2 (2024-04-10)
FAQs
Agent explorer types
The npm package @veramo-community/agent-explorer-plugin receives a total of 15 weekly downloads. As such, @veramo-community/agent-explorer-plugin popularity was classified as not popular.
We found that @veramo-community/agent-explorer-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.