Create a Custom Connector

Step 1: Copy the Sample Connector

Begin by copying a sample connector to serve as a template for your custom connector. This step ensures that you have a solid foundation and proper structure to start with.

1. Clone the chosen sample connector into your development environment:

   cd path/to/your/development/folder
   git clone https://github.com/PromptMixerDev/prompt-mixer-sample-connector.git your-connector-name

Step 2: Manage Dependencies

1. Execute the following command to install the required basic dependencies:

   npm install

2. Install any necessary external libraries or packages your connector depends on. In your connector's directory, use npm or yarn to add dependencies:

   npm install package-name

   Replace package-name with the actual names of the dependencies required for your connector.

Step 3: Update the Connector's Main Script

The main.ts file contains the core logic of your connector. Update this file to add your specific functionality.

1. Navigate to the connector's directory:

   cd your-connector-name

2. Open main.ts in your code editor.

3. Modify the file to add your custom logic, adjusting API interactions, data processing, and error handling as needed.

   Ensure that the main function adheres to the following function signature:

   async function main(
     model: string,
     prompts: string[],
     properties: Record<string, unknown>,
     settings: Record<string, unknown>
   ) {}
   • model: The selected model name within the application by the user.
   • prompts: An array consisting of user-provided prompts.
   • properties: These parameters embody the model's specified properties.
   • settings: These parameters embody the user's specified settings.

Step 4: Customize the Connector Configuration

The configuration for your connector, including its name, associated models, and any specific settings, is defined in a config.js file. Here, you also define the connector's properties and descriptions.

1. Create or update the config.js file in your connector's directory:

   touch config.js # If it doesn't already exist

2. Open config.js in your code editor and define your connector's configuration. Use the structure provided below as a guide, customizing it to fit your connector:

   export const config = {
     connectorName: 'Your Connector Name',
     models: ['model-name'],
     properties: [
       {
         id: 'property-id',
         name: 'property name',
         value: 'default value',
         type: 'data type',
       },
     ],
     settings: [
       {
         id: 'SETTING_ID',
         name: 'setting name',
         value: 'default value',
         type: 'string',
       },
     ],
     description: 'Description of what your connector does and its purpose.',
     author: 'Author or Organization Name',
     iconBase64: 'data:image/svg+xml;base64,',
   };
   • connectorName: The name of your connector.
   • models: An array of model names your connector will use.
   • properties: (Optional) A list of properties specific to the models, including their ID, name, default value, and type.
   • settings: (Optional) Configuration settings for the connector, such as API keys or other credentials.
   • description: A brief description of your connector's functionality.
   • author: Your name or your organization name.
   • iconBase64: The icon of your connector. The icon size is 16x16 and format as Base64.

3. Save your changes to config.js.

Step 5: Revise the Manifest File

Update the manifest.json file to accurately describe your connector and its capabilities.

1. Open manifest.json in your code editor.

2. Modify the file with your connector's details, such as its unique identifier, name, description, and version.

3. Save your changes.

Step 6: Build you application

Ensure that you expose the main function and the config file by exporting them.

export { main, config };

Validate your build by running the following command:

npm run build

Step 7: Test Your Connector

Thoroughly test your connector to ensure it functions as expected in various scenarios.

1. Implement unit tests for critical functionality, especially around data processing and external API calls.

2. Manually test your connector in its intended environment to identify any issues not covered by automated tests.

Step 8: Modify the README.md file

Incorporate directions on how to utilize your connector. You can add features, installation and usage information.

Step 9: Deploy Your Connector

Finalize your connector for deployment, ensuring it is ready for use in its target environment.

1. Follow the specific deployment procedures required for your connector, which may involve packaging or publishing to a repository.

2. Document any necessary setup or configuration steps for users.

By following these steps, you will have successfully created, configured, and deployed a custom connector with specific models, properties, and settings, ready for integration into its intended environment.