GenSX Documentation

GenSX provides several Next.js-based templates to jumpstart development:

Chat UX

Focuses on chat-based interfaces. Features include:

• Streaming chat: Real-time message streaming.
• AI thinking: Visible reasoning process.
• Tool integration: Built-in tools for web scraping, search, and data processing.
• Thread history: Persistent history using GenSX Storage.

Deep Research

Focuses on iterative research workflows. Features include:

• Multi-step streaming workflow: Iterative process for building reports.
• Web search and summarization: Uses Tavily for search and extractive summarization.
• Detailed report generation: Creates structured, in-depth reports.

Draft Pad

Focuses on AI-powered writing. Features include:

• Real-time streaming: Live content updates.
• Draft versioning: Track and navigate changes.
• Live progress tracking: Detailed workflow event updates.
• Multi-provider support: Works with OpenAI, Anthropic, Google, etc.

Client Side Tools

Focuses on client-side interactivity. Demonstrates how AI can control client-side components like maps via tool calling.

Self-reflection is a prompting technique where an LLM evaluates its own output and then improves it. In GenSX, this is implemented using a Reflection component that creates a programmatic loop between an evaluation component and an improvement component.

To implement this pattern, you need:

1. An evaluation component (EvaluateFn): Assesses the current output and provides feedback and a decision on whether to continue.
2. An improvement component (ImproveFn): Processes the input using the provided feedback to generate a revised version.

The Reflection component iterates until either the EvaluateFn returns continueProcessing: false or the maxIterations limit is reached.

interface ReflectionProps<TInput> {
  // The initial input to process
  input: TInput;
  // Component to process the input and generate new output
  ImproveFn: (props: { input: TInput; feedback: string }) => Promise<TInput>;
  // Component to evaluate if we should continue processing and provide feedback
  EvaluateFn: (props: { input: TInput }) => Promise<ReflectionOutput>;
  // Maximum number of iterations allowed
  maxIterations?: number;
}

const Reflection = gensx.Component(
  "Reflection",
  async <TInput>({
    input,
    ImproveFn,
    EvaluateFn,
    maxIterations = 3,
  }: ReflectionProps<TInput>): Promise<TInput> => {
    let currentInput = input;
    let iteration = 0;

    while (iteration < maxIterations) {
      const { feedback, continueProcessing } = await EvaluateFn({
        input: currentInput,
      });

      if (!continueProcessing) {
        break;
      }

      currentInput = await ImproveFn({ input: currentInput, feedback });
      iteration++;
    }

    return currentInput;
  },
);

GenSX Cloud automatically captures detailed execution traces for all workflows and agents without requiring additional instrumentation.

What is captured:

• LLM Calls: Full prompts, parameters, and responses.
• Tool Invocations: Input arguments and return values.
• Component Lifecycle: Inputs, outputs, and intermediate state changes for every component.
• Execution Flow: A hierarchical component tree and timeline of execution.

Analysis Tools:

• Timeline View: Visualizes the sequence and duration of component execution.
• Component Tree: Navigates the hierarchical structure of the workflow.
• Input/Output Inspector: Examines data flowing between components.
• Error Highlighting: Identifies exactly where failures occurred.

// Traces are automatically captured when workflows are executed
// No additional instrumentation required
const result = await MyWorkflow({ input: "some query" });

GenSX uses a tree-based model for workflow orchestration instead of an explicit graph of nodes and edges. Workflows are expressed using JSX-like syntax where each component represents a step in the process.

Data flows through the tree via child functions (render props pattern). A parent component executes and passes its output to a child function, which then allows the next component in the workflow to be nested. This makes data dependencies explicit and avoids global state.

Key benefits:

• Explicit Dependencies: Each child component only receives what its parent explicitly provides.
• Readability: The workflow reads top-to-bottom like standard code.
• Testability: Components are treated as pure functions of their inputs, making them easy to isolate and test.

<FetchHNPosts limit={postCount}>
  {(stories) => (
    <AnalyzeHNPosts stories={stories}>
      {({ analyses }) => (
        <GenerateReport analyses={analyses}>
          {(report) => (
            <EditReport content={report}>
              {(editedReport) => (
                <WriteTweet
                  context={editedReport}
                  prompt="Summarize the HN trends in a tweet"
                />
              )}
            </EditReport>
          )}
        </GenerateReport>
      )}
    </AnalyzeHNPosts>
  )}
</FetchHNPosts>