Bonus · Portfolio Portfolio Track Full-stack Project

Thirteen AI testing agents, three formats each, one portfolio.

A project-ready portfolio: 10 AI testing agents and 3 AI testing tools, every one shipped as an importable n8n workflow, an importable LangFlow flow, and a runnable React studio app backed by a Node LLM wrapper with six provider options.

01 What students build

One catalog to rule them all: catalog/projects.json defines each project's system prompt, task prompt, inputs, outputs, workflow and sample input. A generator script (scripts/generate-flows.mjs) rebuilds the n8n and LangFlow JSON for all 13 projects from that single source of truth. The React studio (Vite, port 5177) runs the same catalog through a shared Node LLM wrapper (port 8787) that speaks Groq, OpenAI/ChatGPT, Anthropic, OpenRouter, Ollama and LM Studio. Agents range from a Test Strategy Builder and Selenium-to-Playwright Converter to a Flaky Test Detector, Self-Healing Automation Agent and Release Readiness scorer.

n8n Fleet

13 importable n8n workflow JSON files, one per project, regenerated from the catalog so prompts never drift between formats.

LangFlow Fleet

The same 13 projects as importable LangFlow flows for visual, drag-and-drop experimentation with every agent.

React Studio

A studio app with a project picker, provider switcher and sample inputs · run any agent against any of 6 LLM providers, local or cloud.

02 Architecture

projects.json13 projects · single source
──▶
generate-flows.mjsrebuilds all flow JSON
──▶
n8n + LangFlow26 importable flows
React StudioVite · localhost:5177
──▶
Node LLM wrapperlocalhost:8787
──▶
6 providersgroq · openai · anthropic · openrouter · ollama · lmstudio
10 agents + 3 tools · planning · test design · automation · api · accessibility · debugging

03 Live demo (simulated with sample data)

This is a UI walkthrough with pre-baked sample data so you can feel the studio without installing anything. In the course you run the real thing: npm run dev:all starts the React app on 5177 and the LLM wrapper on 8787.

ai-tester-studio · localhost:5177 demo · sample data

04 Inputs & outputs

What goes in

  • A project pick from the 13-entry catalog (agents + tools)
  • The project's sample input, or your own (code, logs, DOM, schema)
  • A provider choice: Groq, OpenAI/ChatGPT, Anthropic, OpenRouter, Ollama, LM Studio
  • API keys via .env (none needed for local Ollama / LM Studio)

What comes out

  • The agent's structured result: converted code, flake ranking, audit report and more
  • Importable n8n workflow JSON per project
  • Importable LangFlow flow JSON per project
  • A portfolio piece you can demo in interviews, three ways

05 How it's built

Define all 13 projects in catalog/projects.json: system prompt, task prompt, inputs, outputs, integrations, workflow and a realistic sample input each.
Write generate-flows.mjs to rebuild every n8n and LangFlow JSON from the catalog, so one edit updates all formats.
Build the Node LLM wrapper: one /api/run surface that normalizes Groq, OpenAI, Anthropic, OpenRouter, Ollama and LM Studio behind a single call shape.
Build the React studio: project picker, provider switcher, sample-input loader and result view over the wrapper.
Import the generated flows into n8n and LangFlow and verify each project runs in all three formats.
Run everything with npm run dev:all: studio on 5177, wrapper on 8787, keys from .env.

06 Tech stack

React + ViteNode LLM wrapperTypeScriptn8n workflowsLangFlow flowsGroq · OpenAI · AnthropicOpenRouter · Ollama · LM StudioJSON catalog codegen