GenSX ⚡️

GenSX is a simple typescript framework for building agents and workflows with reusable React-like components.

GenSX takes a lot of inspiration from React, but the programming model is very different - it’s a Node.js framework designed for data flow.

But if you know how to write a react component, then building an agent will feel easy and familiar.

Why GenSX?

• 🎯 Pure Functions: Components are pure TypeScript functions that are easily testable, reusable, and sharable
• 🌴 Natural Composition: Chain LLM calls using JSX - a familiar, visual syntax that reads top-to-bottom like normal code
• ⚡️ Parallel by Default: Components execute in parallel when possible while maintaining dependencies
• 🔒 Type-safe: Full TypeScript support with no DSLs or special syntax - just standard language features
• 🌊 Streaming Built-in: Stream responses with a single prop change, no refactoring needed
• 🚀 Built for Scale: Start simple and evolve to complex patterns like agents and reflection without changing your programming model

Check out the documentation to learn more about building LLM applications with GenSX.

Building a component (equivalent to a workflow or agent step) looks a lot like a React component:

import { gsx } from "gensx";
import { ChatCompletion } from "gensx/openai";

// props interface
interface WriteDraftProps {
  research: string[];
  prompt: string;
}

// return type
type WriteDraftOutput = string;

// components are pure functions that are reusable by default
const WriteDraft = gsx.Component<WriteDraftProps, WriteDraftOutput>(
  "WriteDraft",
  ({ prompt, research }) => {
    const systemMessage = `You're an expert technical writer.
    Use the information when responding to users: ${research}`;

    return (
      <ChatCompletion
        model="gpt-4o-mini"
        temperature={0}
        messages={[
          {
            role: "system",
            content: systemMessage,
          },
          {
            role: "user",
            content: `Write a blog post about ${prompt}`,
          },
        ]}
      />
    );
  },
);

Components can be composed together to create more complex agents and workflows:

import { gsx } from "gensx";
import { OpenAIProvider } from "gensx/openai";
import { Research, WriteDraft, EditDraft } from "./writeBlog";

interface BlogWriterProps {
  prompt: string;
}

export const WriteBlog = gsx.StreamComponent<BlogWriterProps>(
  "WriteBlog",
  ({ prompt }) => {
    return (
      <OpenAIProvider apiKey={process.env.OPENAI_API_KEY}>
        <Research prompt={prompt}>
          {(research) => (
            <WriteDraft prompt={prompt} research={research.flat()}>
              {(draft) => <EditDraft draft={draft} stream={true} />}
            </WriteDraft>
          )}
        </Research>
      </OpenAIProvider>
    );
  },
);

const workflow = gsx.Workflow("WriteBlogWorkflow", WriteBlog);
const result = await workflow.run({
  prompt: "Write a blog post about AI developer tools",
});

Getting Started

Check out the Quickstart Guide to build your first workflow in just a few minutes.

Building a workflow

Most LLM frameworks are graph oriented--you express your workflow with nodes, edges, and a global state object. GenSX takes a different approach--you compose your workflow with components, and GenSX handles the execution for you.

You start by defining your components:

import { gsx } from "gensx";
import { OpenAIProvider, ChatCompletion } from "@gensx/openai";

// Define the input props and output type for type safety
interface CreateOutlineProps {
  prompt: string;
}
type CreateOutlineOutput = string;

// Create a reusable component that can be composed with others
const CreateOutline = gsx.Component<CreateOutlineProps, CreateOutlineOutput>(
  "CreateOutline",
  async ({ prompt }) => {
    return (
      <ChatCompletion
        model="gpt-4o-mini"
        messages={[
          {
            role: "user",
            content: `Create an outline for an article about ${prompt}`,
          },
        ]}
      />
    );
  },
);

interface WriteArticleProps {
  outline: string;
}
type WriteArticleOutput = string;

const WriteArticle = gsx.Component<WriteArticleProps, WriteArticleOutput>(
  "WriteArticle",
  async ({ outline }) => {
    return (
      <ChatCompletion
        model="gpt-4o-mini"
        messages={[
          {
            role: "user",
            content: `Use this outline to write a detailed article: ${outline}`,
          },
        ]}
      />
    );
  },
);

Then you can compose your components together to create a workflow:

// Execute the workflow with the OpenAI provider
const result = await gsx.execute<string>(
  <OpenAIProvider apiKey={process.env.OPENAI_API_KEY}>
    <CreateOutline prompt="the future of LLM dev tools">
      {(outline) => <WriteArticle outline={outline} />}
    </CreateOutline>
  </OpenAIProvider>,
);

console.log(result);

Examples

This repo contains a number of examples to help you get up and running with GenSX.

Basic Examples

Example	Description
📊 Structured Outputs	Shows how to use structured outputs with GenSX
🔄 Reflection	Shows how to use a self-reflection pattern with GenSX
🌊 Streaming	Shows how to handle streaming responses with GenSX
🗃️ Contexts	Shows how to use contexts to manage state in GenSX
🔌 Providers	Shows how to create a custom provider for GenSX
🎭 Nested Providers	Demonstrates how to nest and combine multiple providers in GenSX
🧩 Reusable Components	Shows how to create and use reusable components in GenSX

Full Examples

Example	Description
🔍 Hacker News Analyzer	Analyzes HN posts and generates summaries and trends using Paul Graham's writing style
✍️ Blog Writer	Generates blogs through an end-to-end workflow including topic research and content creation
🔬 Deep Research	Generates a report from a prompt after researching and summarizing a list of research papers

Working with this repo

This monorepo contains GenSX, its related packages, examples, and documentation. You can find more detailed instructions in CONTRIBUTING.md.

Repository Structure

• packages/ - Published packages
• examples/ - Example applications and use cases
• website/ - GenSX website

License

Apache 2.0