Merge pull request #129 from restackio/reactflowLint

Reactflow lint

Author: aboutphilippe

agent-reactflow/README.md

@@ -2,9 +2,11 @@
 
 A sample repository to have low code editor with React Flow of Agents built with Restack.
 
+See the full documentation on our [Agent with React Flow](https://docs.restack.io/blueprints/agent-reactflow) page.
+
 ### Apps
 
-- `frontend`: another [Next.js](https://nextjs.org/) app
+- `frontend`: a [Next.js](https://nextjs.org/) app
 - `backend`: a [Restack](https://restack.io/) app
 
 ## Requirements
@@ -27,11 +29,91 @@ pnpm i
 pnpm run dev
 ```
 
-Leveraging turborepo, this will start both frontend and backend.
+Leveraging TurboRepo, this will start both frontend and backend.
 Your code will be running and syncing with Restack to execute agents.
 
 ## Run agents
 
-### from frontend
+### From frontend
+
+![Run agents from frontend](./agent-reactflow.png)
+
+### from UI
+
+You can run agents from the UI by clicking the "Run" button.
+
+![Run agents from UI](./agent-post.png)
+
+### from API
+
+You can run agents from the API by using the generated endpoint:
+
+`POST http://localhost:6233/api/agents/agentFlow`
+
+### from any client
+
+You can run agents with any client connected to Restack, for example:
+
+```bash
+pnpm schedule-agent
+```
+
+executes `scheduleAgent.ts` which will connect to Restack and execute the `agentFlow` agent.
+
+## Send events to the Agent
+
+### from Backend Developer UI
+
+You can send events like or end from the UI.
+
+![Send events from UI](./agent-event.png)
+
+And see the events in the run:
+
+![See events in UI](./agent-run.png)
+
+### from API
+
+You can send events to the agent by using the following endpoint:
+
+`PUT http://localhost:6233/api/agents/agentFlow/:agentId/:runId`
+
+with the payload:
+
+```json
+{
+  "name": "idVerification",
+  "input": {
+    "type": "id",
+    "documentNumber": "1234567890"
+  }
+}
+```
+
+to send messages to the agent.
+
+or
+
+```json
+{
+  "eventName": "end"
+}
+```
+
+to end the conversation with the agent.
+
+### from any client
+
+You can send event to the agent with any client connected to Restack, for example:
+
+Modify agentId and runId in eventAgent.ts and then run:
+
+```bash
+pnpm event-agent
+```
+
+It will connect to Restack and send an events to the agent.
+
+## Deploy on Restack Cloud
 
-![Run agents from frontend](./agent-reactflow.png)
+To deploy the application on Restack, you can create an account at [https://console.restack.io](https://console.restack.io)

agent-reactflow/agent-event.png

@@ -1,4 +1,5 @@
 .env
 node_modules
 media
-dist
+dist
+.eslintcache

agent-reactflow/agent-post.png

@@ -0,0 +1,4 @@
+import { config } from "@agent-reactflow/eslint-config/base";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

agent-reactflow/agent-run.png

@@ -7,11 +7,11 @@
     "start": "tsx src/services.ts",
     "start.watch": "nodemon src/services.ts",
     "dev": "open-cli http://localhost:5233 && tsx watch --include src src/services.ts",
+    "lint": "eslint src --fix --max-warnings 0 --cache",
     "build": "tsc --build",
     "clean": "rm -rf node_modules",
     "workflow": "tsx ./scheduleWorkflow.ts",
-    "event": "tsx ./eventAgent.ts",
-    "restack-up": "node restack_up.mjs"
+    "event": "tsx ./eventAgent.ts"
   },
   "dependencies": {
     "@restackio/ai": "^0.0.119",

agent-reactflow/apps/backend/.gitignore

@@ -0,0 +1,29 @@
+import { client } from "./src/client";
+
+export type InputSchedule = {
+  name: string;
+};
+
+async function scheduleAgent(input: InputSchedule) {
+  try {
+    const agentId = `${Date.now()}-agentFlow`;
+    const runId = await client.scheduleAgent({
+      agentName: "agentFlow",
+      agentId,
+      input,
+    });
+
+    const result = await client.getAgentResult({ agentId, runId });
+
+    console.log("Agent result:", result);
+
+    process.exit(0); // Exit the process successfully
+  } catch (error) {
+    console.error("Error scheduling agent:", error);
+    process.exit(1); // Exit the process with an error code
+  }
+}
+
+scheduleAgent({
+  name: "test",
+});

agent-reactflow/apps/backend/eslint.config.mjs

@@ -4,7 +4,6 @@ import {
   condition,
   log,
   step,
-  sleep,
 } from "@restackio/ai/agent";
 import * as functions from "../functions";
 
@@ -17,11 +16,12 @@ type AgentChatOutput = {
 
 export async function agentChat(): Promise<AgentChatOutput> {
   let endReceived = false;
-  let messages: functions.Message[] = [];
+  const messages: functions.Message[] = [];
 
-  onEvent(messagesEvent, async ({ messages, stream = true }: { messages: functions.Message[], stream?: boolean }) => {
+  onEvent(messagesEvent, async ({ messages, tools, stream = true }: { messages: functions.Message[], tools: any, stream?: boolean }) => {
     const result = await step<typeof functions>({}).llmChat({
       messages,
+      tools,
       stream
     });
     messages.push(result);

agent-reactflow/apps/backend/package.json

@@ -44,7 +44,7 @@ export type AgentFlowOutput = {
 }
 export async function agentFlow({flowJson}: AgentFlowInput): Promise<AgentFlowOutput> {
   let endReceived = false;
-  let eventResults: AgentFlowOutput['results'] = []
+  const eventResults: AgentFlowOutput['results'] = []
 
   try {