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.
- 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
- 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
- OpenAI
- Anthropic
- Groq
- Ollama
- LMStudio
- Any other OpenAI compatible model providers
pnpm install @reagentai/reagent @reagentai/cli
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: