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 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.

Components in GenSX look a lot like a React components:

import * as gensx from "@gensx/core";
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 = gensx.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 * as gensx from "@gensx/core";
import { OpenAIProvider } from "gensx/openai";
import { Research, WriteDraft, EditDraft } from "./writeBlog";

interface BlogWriterProps {
  prompt: string;
}

export const WriteBlog = gensx.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 = gensx.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.

Examples

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

Running an example:

# From the root of the repo

# Install dependencies
pnpm install

# Run the example
pnpm start:example <example-name>

# or to run from the example directory
pnpm build

cd examples/<example-name>
pnpm start

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
💻 Computer Use	Demonstrates how to use the OpenAI computer use tool with GenSX

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