Skip to content

reagentai/reagent

Repository files navigation

Reagent logo


Discord Reagentai twitter npm package MIT

Reagent AI

Graph based full-stack framework for building AI workflows

Reagent is an open-source Javascript framework to build AI workflows. It enables you to build multi-step workflows by combining nodes into an agentic graph.

It supports rendering custom UI components directly from the workflow nodes and seamlessly integrates with any frontend frameworks like NextJs, Remix, Solid-start, Svelte Kit, etc.

Demo

Agent UI demo

Features

  • Generative UI: Render UI components directly from workflow node and use it as LLM tool
  • Auto generate workflow graph: Generate the agent graph automatically
  • Supports Any AI Model: Use OpenAI, Anthropic, Mistral, Groq or any other model provider
  • Framework Agnostic: Works with any modern JavaScript framework: React, Solid, Svelte and Vue
  • Easy Integration: Easily integrate into your existing application
  • Full type safety: It is written in Typescript and supoprts type inference when building an agent graph

Use cases

  • Workflows: Easily build custom AI powered workflows
  • AI Chat: Build custom AI chat applications
  • AI Agent: Build custom AI agents with backend/frontend tool calling

Supported Model Providers

  • OpenAI
  • Anthropic
  • Groq
  • Ollama
  • LMStudio
  • Any other OpenAI compatible model providers

Getting Started

Installation

pnpm install @reagentai/reagent @reagentai/cli

Example: Simple chat application

Here's a very simple AI chat application.

import "dotenv/config";
import { Workflow } from "@reagentai/reagent/workflow";
import { ChatCompletion, WorkflowInput } from "@reagentai/reagent/nodes";

// create a new workflow
const workflow = new Workflow({
  name: "Simple AI Chat",
  description: "A simple AI chat agent.",
});

// add an input node
// each workflow must have an input node and user node for final output
const input = workflow.addNode("input", new WorkflowInput());

// add a chat completion node
const chat1 = workflow.addNode("chat-1", new ChatCompletion(), {
  config: {
    systemPrompt: "You are an amazing AI assistant called Jarvis",
    temperature: 0.9,
    stream: true,
  },
});

// bind chat completion node's inputs
chat1.bind({
  // TODO: replace model with a specific model
  model: input.output.model,
  query: input.output.query,
});

// bind output of different nodes to workflow so that those
// outputs are shown in the frontend
workflow.bind({
  markdown: [chat1.output.markdown],
  markdownStream: [chat1.output.stream],
});

// export workflow as default to run this workflow with reagentai cli
export default workflow;
export const nodes = [];
export const __reagentai_exports__ = true;

To run this chat agent workflow, copy the above code to a agent.ts and run the following command:

pnpm reagent dev ./agent.ts

Note: You need to add the API keys in .env file.

For Groq: GROQ_API_KEY={groq_api_key}.

For OpenAI: OPENAI_API_KEY={api_Key}.

The following agent graph is auto generated for the above chat agent:

Agent UI demo

Guides

Integrating Reagent with Next.js

LICENSE

MIT