Building reusable components

GenSX allows you to create reusable components that can be used with different models and providers. This is particularly useful if you want to be able to compare the behavior of different models in a component or want to share your components with others.

Creating a reusable component

The pattern for creating reusable components is fairly simple—you just need to parameterize the model name and provider details. Here’s an example of a SummarizeDocument component that can be re-used with any OpenAI compatible API.

First, define the ProviderConfig interface that specifies the client options, such as the baseURL and apiKey, and the model name:


interface ProviderConfig {
  clientOptions: ClientOptions;
  model: string;
}

Then include the ProviderConfig in the component’s props interface:


interface SummarizeDocumentProps {
  document: string;
  provider: ProviderConfig;
}
 
const SummarizeDocument = gensx.Component<SummarizeDocumentProps, string>(
  "SummarizeDocument",
  ({ document, provider }) => (
    <OpenAIProvider {...provider.clientOptions}>
      <ChatCompletion
        model={provider.model}
        messages={[
          {
            role: "user",
            content: `Please create a high level summary of the following document targeting 30 words.\n\n<document>${document}</document>`,
          },
        ]}
      />
    </OpenAIProvider>
  ),
);

Now, whenever your invoke the SummarizeDocument component, you can pass in any provider configuration that you’d like:


const gpt4oProviderConfig = {
  clientOptions: {
    apiKey: process.env.OPENAI_API_KEY,
  },
  model: "gpt-4o",
};
 
const llama8bProviderConfig = {
  clientOptions: {
    apiKey: process.env.GROQ_API_KEY,
    baseURL: "https://api.groq.com/openai/v1",
  },
  model: "llama-3.1-8b-instant",
};
 
const gptSummary = await gensx.execute<string>(
  <SummarizeDocument
    document="Your document..."
    provider={gpt4oProviderConfig}
  />,
);
 
const llamaSummary = await gensx.execute<string>(
  <SummarizeDocument
    document="Your document..."
    provider={llama8bProviderConfig}
  />,
);

Creating parameterized workflows

You can take this one step further and create parameterized workflows with multiple provider configurations. One common use case for this is using both a small and large model in your workflow and having separate configurations for each so you can easily swap out the individual models.

To demonstrate this, let’s create a ProcessDocument component that builds on the SummarizeDocument component but also extracts keywords and categorizes the document.

To get started, define an interface that receives a document and two provider configurations:


interface ProcessDocumentProps {
  document: string;
  defaultProvider: ProviderConfig;
  smallModelProvider?: ProviderConfig;
}

In this example, the defaultProvider is required, but the smallModelProvider is optional. If it’s not provided, the defaultProvider will be used in all components.

Now, we can define the ProcessDocument component and pass the provider configuration to the individual components:


export const ProcessDocument = gensx.Component<
  ProcessDocumentProps,
  ProcessDocumentOutput
>("ProcessDocument", (props) => {
  // Use the small model provider if it's provided, otherwise use the default provider
  const smallModelProvider = props.smallModelProvider ?? props.defaultProvider;
  return {
    summary: (
      <SummarizeDocument
        document={props.document}
        provider={props.defaultProvider}
      />
    ),
    keywords: [
      <ExtractKeywords
        document={props.document}
        provider={smallModelProvider}
      />,
    ],
    category: (
      <CategorizeDocument
        document={props.document}
        provider={smallModelProvider}
      />
    ),
  };
});

You can find the full code for the ProcessDocument component in the reusable components example .

Finally, to run the workflow, you can invoke the ProcessDocument component with the appropriate provider configurations:


const gpt4oProviderConfig = {
  clientOptions: {
    apiKey: process.env.OPENAI_API_KEY,
  },
  model: "gpt-4o",
};
 
const llama8bProviderConfig = {
  clientOptions: {
    apiKey: process.env.GROQ_API_KEY,
    baseURL: "https://api.groq.com/openai/v1",
  },
  model: "llama-3.1-8b-instant",
};
 
const documentMetadata = await gensx.execute<ProcessDocumentOutput>(
  <ProcessDocument
    document="Your document here"
    defaultProvider={gpt4oProviderConfig}
    smallModelProvider={llama8bProviderConfig}
  />,
);