DEV Community: Vincent Grobler

We built an embeddable AI chat widget, hybrid RAG search, and agent portability — here's how (CrewForm v1.8.0)

Vincent Grobler — Wed, 08 Apr 2026 14:45:09 +0000

CrewForm is an open-source AI agent orchestration platform — think "Slack for AI workers." You create agents, wire them into teams (pipeline, orchestrator, or collaboration mode), and let them handle tasks. BYOK, self-hostable, all three agentic protocols (MCP + A2A + AG-UI).

Today we're shipping v1.8.0 with three major features we're really excited about.

💬 Embeddable Chat Widget
You can now deploy any CrewForm agent as a chat bubble on your website with a single script tag:

<script
  src="https://runner.crewform.tech/chat/widget.js"
  data-key="cf_chat_your_key_here"
  data-theme="dark"
  data-position="bottom-right"
  async
></script>

That's it. No React, no build step, no npm install. Paste it before closing body tag and your visitors can chat with your agent in real-time with streaming responses.

What we built under the hood:

Standalone Vite build that outputs a single widget.js bundle
Shadow DOM isolation — zero CSS conflicts with your existing site
Domain whitelisting via cf_chat_ API keys
Session memory — conversations persist across page reloads
Rate limiting per visitor
Settings UI with embed snippet generator and live preview
The widget connects directly to your task runner via SSE, so responses stream in word-by-word. We bundle it inside the Docker image so self-hosted deployments get it for free.

🔍 Knowledge Base: Hybrid Search + Retrieval Testing
Our RAG pipeline got a serious upgrade. Previously it was basic vector search — now it's production-grade.

Hybrid Search
We combine vector similarity (cosine distance via pgvector) with PostgreSQL full-text search (tsvector + ts_rank_cd):

Final Score = (0.7 × cosine_similarity) + (0.3 × ts_rank)
The over-fetch + rerank strategy retrieves 2× results from each method, deduplicates, and returns the top-K. This dramatically improves recall for queries that mix semantic meaning with specific keywords.

Metadata Tags
Documents can now be tagged (e.g., "FAQ", "Technical", "Policy") with GIN-indexed filtering. Tag your docs, then filter search results by tag — both in the UI and via the API.

Retrieval Tester
This is my favorite part. Before deploying retrieval to agents, you can test it interactively:

Type a query, see matched chunks with color-coded similarity scores
Toggle between vector-only and hybrid search
Filter by document or tag
Adjust top-K (1–20)
See response times for benchmarking
No more "deploy and pray" — you can validate retrieval quality before it touches your agents.

📦 Agent/Team Export & Import
Share agents and teams as portable JSON files:

{
  "format": "crewform-export",
  "version": 1,
  "type": "team",
  "data": {
    "name": "Content Pipeline",
    "mode": "pipeline",
    "agents": [
      { "ref_id": "abc", "role": "researcher", "agent": { ... } },
      { "ref_id": "def", "role": "writer", "agent": { ... } }
    ]
  }
}

Export an agent or team with one click — the JSON includes everything (model, prompt, tools, voice profile, config). Team exports are self-contained with all member agents embedded inline.

Import into any workspace — agent IDs get remapped automatically to maintain referential integrity in team configs. Custom tools are stripped (not portable across workspaces).

This is the foundation for agent sharing — export a team, send it to a colleague, they import it and they're running.

Also in this release
AG-UI Rich Interactions — Agents can now pause mid-execution and ask for approval, data confirmation, or present choices
Marketplace Agent README — Published agents can include rich Markdown documentation
License Key Validation — HMAC-SHA256 cryptographic verification
OpenTelemetry + Langfuse — Opt-in tracing for LLM calls, tool use, and team runs

Try it
🌐 Hosted: crewform.tech — free tier, no credit card
🐳 Self-hosted: docker compose up -d
⭐ GitHub: github.com/CrewForm/crewform
📖 Docs: docs.crewform.tech
💬 Discord: discord.gg/TAFasJCTWs
We'd love feedback — especially on the hybrid search and retrieval tester. What features would you want next?

How We Turned CrewForm Agents Into MCP Tools

Vincent Grobler — Wed, 01 Apr 2026 17:00:12 +0000

Last month I shared how we built a visual workflow builder for AI agent teams. This time: how we made those agents callable from Claude Desktop, Cursor, and any other MCP client — without the agents knowing or caring.

The idea

CrewForm already supported MCP as a client — our agents could call external MCP tool servers (GitHub, Brave Search, Postgres, etc.). But MCP is a two-way standard. We wanted to flip it around:

What if your CrewForm agents could BE the tools?

Imagine configuring a "Content Writer" agent in CrewForm — with a specific model, system prompt, knowledge base, and tools — and then calling it from Claude Desktop as if it were any other MCP tool. No API wrappers. No custom integration code. Just add a URL to your claude_desktop_config.json and go.

The protocol

MCP (Model Context Protocol) uses JSON-RPC 2.0 over HTTP. A client connects, discovers tools, and calls them. The key methods:

initialize — Handshake. Client sends its info, server responds with capabilities.
tools/list — Discovery. Returns all available tools with names, descriptions, and input schemas.
tools/call — Execution. Client sends a tool name + arguments, server returns the result.

That's it. The simplicity is the point.

Implementation

We added a single HTTP handler (mcpServer.ts, ~300 lines) that mounts at POST /mcp alongside our existing A2A and AG-UI protocol handlers.

Tool discovery

When a client calls tools/list, we query for all agents in the workspace with is_mcp_published = true and map them to MCP tools:

// Each published agent becomes an MCP tool
const tools = agents.map(agent => ({
  name: agent.name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '_')
    .replace(/^_|_$/g, '')
    .slice(0, 64),
  description: agent.description || `CrewForm agent: ${agent.name}`,
  inputSchema: {
    type: 'object',
    properties: {
      message: {
        type: 'string',
        description: `The prompt or task to send to ${agent.name}`
      }
    },
    required: ['message']
  }
}));

The name transformation matters — MCP tool names must be lowercase alphanumeric with underscores, max 64 chars. An agent called "Blog Content Writer v2" becomes blog_content_writer_v2.

Tool execution

When a client calls tools/call, we:

Look up the agent by the tool name
Create a task record in the database
The existing task runner picks it up (same execution path as any other task)
Poll for completion
Return the result as a JSON-RPC response

// Create task — same as pressing "Run" in the UI
const { data: task } = await supabase
  .from('tasks')
  .insert({
    agent_id: agent.id,
    workspace_id: workspaceId,
    input: message,
    status: 'dispatched',
    source: 'mcp',
  })
  .select()
  .single();

// Poll until complete (with timeout)
const result = await pollForCompletion(task.id, 120_000);

This is important: the agent runs with its full configuration — model, system prompt, tools (including MCP tools it consumes), knowledge base, voice profile. It's not a prompt relay. It's a fully orchestrated agent execution.

Authentication

We reuse our existing API key infrastructure. MCP clients authenticate with a Bearer token that maps to a workspace:

const authHeader = req.headers.get('authorization');
const token = authHeader?.replace('Bearer ', '');

// Check api_keys table for mcp-server or a2a provider
const { data: keyRecord } = await supabase
  .from('api_keys')
  .select('workspace_id')
  .eq('encrypted_key', token)
  .in('provider', ['mcp-server', 'a2a'])
  .single();

One key, one workspace, only that workspace's published agents are exposed.

The transport question

MCP supports three transports: stdio (local processes), sse (server-sent events), and streamable-http (HTTP-based). We went with Streamable HTTP because:

Our task runner is already an HTTP server
No WebSocket infrastructure needed
Works behind proxies, load balancers, and CDNs
Claude Desktop and Cursor both support it natively

Each request is a self-contained JSON-RPC call. No persistent connections to manage.

UI: one-click publishing

On the backend, publishing is just a boolean flag: is_mcp_published. But the UX matters.

On each agent's detail page, there's a toggle button. Click "MCP Publish" → the agent appears as an MCP tool. Click again → it disappears. The config snippet in Settings updates automatically.

We also added a "Generate MCP API Key" button in Settings → MCP Servers. One click generates a cf_mcp_ prefixed key, shows it once for copying, and it's ready to paste into claude_desktop_config.json.

The config snippet

This was a small detail that made a big difference in adoption. Instead of making users construct the JSON config manually, we generate it for them:

{
  "mcpServers": {
    "crewform": {
      "url": "https://runner.crewform.tech/mcp",
      "headers": {
        "Authorization": "Bearer cf_mcp_a1b2c3d4..."
      }
    }
  }
}

Copy button. Done. Restart Claude Desktop and your agents are available.

What it looks like in practice

You build a "Code Reviewer" agent in CrewForm with GPT-4o, a system prompt about code quality, and access to GitHub MCP tools
You click "MCP Publish" on that agent
You paste the config into Claude Desktop
Now when you're chatting with Claude and say "review this pull request for security issues", Claude can delegate to your CrewForm agent — which uses its own model, prompt, and tools to do the actual review

The agent runs on your infrastructure, with your API keys, using your configuration. Claude just sees a tool that returns a result.

Three protocols, one platform

CrewForm is now a triple-protocol platform:

MCP Client — Your agents can use external tools (GitHub, Slack, databases)
MCP Server — External clients can use your agents as tools
A2A — Agents can delegate tasks to other agents across frameworks
AG-UI — Real-time streaming for frontend integration

All three are open-source and ship with the same codebase.

Try it

The MCP Server is live on crewform.tech and fully open-source:

If you're building MCP servers or have agents you want to expose as tools, I'd love to hear how you're approaching it. Drop a comment or find us on Discord.

How We Built a Visual Drag-and-Drop Workflow Builder for AI Agent Teams (React Flow + Dagre)

Vincent Grobler — Mon, 30 Mar 2026 17:01:36 +0000

A few days ago, I shared how I built CrewForm — an open-source platform for orchestrating AI agent teams through a web UI. The "What's next" section mentioned an interactive workflow canvas. We shipped it. Here's how it works under the hood.

The problem

In the original version, pipeline teams were configured through a dropdown-based step list. It worked, but:

You couldn't see the full flow at a glance
Rearranging steps meant a lot of up/down clicking
Non-technical team members found it confusing
There was no visual feedback during execution

We needed a canvas where you could see agents as nodes, connections as edges, and execution status in real-time.

The stack

React Flow — The canvas library. Handles nodes, edges, panning, zooming, selection, and minimap out of the box.
Dagre — Auto-layout engine. Given a directed graph, it computes x/y positions for every node so nothing overlaps.
SSE (Server-Sent Events) — Real-time execution state. The task runner pushes status updates, and the canvas highlights the active node.

Layout system: TB and LR

One design decision that took a few iterations: directional layouts.

Pipeline workflows naturally flow in one direction. Some people think top-to-bottom (like a flowchart), others think left-to-right (like a timeline). We support both.

const getLayoutedElements = (nodes, edges, direction = 'TB') => {
  const dagreGraph = new dagre.graphlib.Graph();
  dagreGraph.setGraph({ rankdir: direction, nodesep: 80, ranksep: 100 });
  dagreGraph.setDefaultEdgeLabel(() => ({}));

  nodes.forEach((node) => {
    dagreGraph.setNode(node.id, { width: 220, height: 80 });
  });

  edges.forEach((edge) => {
    dagreGraph.setEdge(edge.source, edge.target);
  });

  dagre.layout(dagreGraph);
  // ... map positions back to React Flow nodes
};

The tricky part was edge handles. React Flow connects edges to specific handles (connection points) on each node — top, bottom, left, right. When you toggle from TB to LR, every edge needs its sourceHandle and targetHandle updated:

function getHandleIds(direction: string) {
  return direction === 'LR'
    ? { sourceHandle: 'right', targetHandle: 'left' }
    : { sourceHandle: 'bottom', targetHandle: 'top' };
}

Without this, edges default to the first available handle (usually top), and you get connections going the wrong way. This was one of those bugs that seems obvious in hindsight but took a few rounds of debugging.

Inserting agents between steps

This was the feature that made the canvas feel like a real tool rather than a visualisation.

Right-click any edge → "Insert Agent Here" → pick an agent → done. The new agent splits the edge into two, and dagre re-layouts everything automatically.

The implementation:

Remove the original edge (A → C)
Insert the new node (B)
Create two new edges (A → B, B → C)
Re-run dagre layout
Animate the transition with React Flow's fitView()

Real-time execution

When a pipeline runs, the canvas comes alive:

The active agent node gets highlighted
Camera auto-follows the executing node
A side panel shows the live transcript (streamed via SSE)
Completed steps get a success indicator

This uses Supabase Realtime subscriptions on the task execution table. When the task runner updates a step's status, the canvas reflects it instantly.

Persisting layout direction

Small detail that matters: layout direction is saved per-team using an useRef to avoid stale closures in React's render cycle. When a user opens a team they configured as LR last week, it opens in LR.

The direction is stored in the team's JSONB configuration column alongside the graph structure, so it survives page reloads and re-renders without triggering unnecessary edge recalculations.

What I'd do differently

Start with the canvas earlier. The dropdown-based config was a stepping stone, but users immediately understood the canvas better. Visual-first should have been day one.
Use useRef for shared state from the start. React Flow callbacks capture stale closure values. We hit this bug twice before learning to use refs for anything that edges or layout callbacks depend on.

Try it

The visual canvas is live on crewform.tech and fully open-source:

⭐ GitHub
📖 Docs
💬 Discord

If you've built anything with React Flow + dagre, I'd love to compare notes. And if you have ideas for the canvas — multi-select, copy-paste node groups, conditional branching — drop a comment or open an issue.

I built an open-source platform for orchestrating AI agent teams — here's what I learned

Vincent Grobler — Fri, 27 Mar 2026 20:05:31 +0000

For the past few months, I've been building CrewForm — an open-source platform for creating and orchestrating multi-agent AI workflows through a web UI.

Think of it as the visual, no-code alternative to frameworks like CrewAI or LangGraph. Instead of writing Python scripts to wire agents together, you configure everything in a dashboard.

I wanted to share what it does, how it's built, and some lessons from the journey.

What it does
You create AI agents by picking a model (15 LLM providers supported — OpenAI, Anthropic, Gemini, Groq, Ollama, etc.), writing a system prompt, and attaching tools.

Then you combine agents into teams that run in one of three modes:

Pipeline — agents execute sequentially, each passing output to the next. Great for content workflows (research → write → edit → format).
Orchestrator — a "brain" agent receives the task, breaks it down, and delegates sub-tasks to specialist workers. Best for complex, dynamic problems.
Collaboration — agents discuss in a shared thread, debate approaches, and converge on a consensus. Useful for analysis and decision-making.
Each mode has a visual workflow canvas where you can see the execution graph — pipeline chains, orchestrator delegation trees, or collaboration circles.

The protocol story
One thing I'm particularly excited about is protocol support. CrewForm implements all three emerging agentic protocols:

MCP (Model Context Protocol) — your agents can connect to any MCP-compatible tool server. There are thousands of these now — file systems, databases, APIs, web scrapers. One config, and your agent has new capabilities.

A2A (Agent-to-Agent) — agents in CrewForm can collaborate with agents from completely different frameworks. Publish your agent as an A2A endpoint, or consume external ones.

AG-UI (Agent-User Interaction) — real-time SSE streaming so you can build frontends that show what agents are doing as they work.

Self-hosting & local models
This was a non-negotiable. If you're processing sensitive data through AI, you need to own the infrastructure.

bash
docker compose up -d
That's the entire setup. Pair with Ollama, and you get fully local AI — Llama 3.3, DeepSeek R1, Qwen 2.5, Mistral, and more. Zero API keys, zero data leaving your network.

Knowledge Base (RAG)
Upload documents (TXT, MD, CSV, JSON), CrewForm chunks, and embeds them using pgvector, and agents search the knowledge base at runtime. No external vector DB needed — it's all in Postgres.

Tech stack
For anyone curious about the architecture:

Frontend: React + TypeScript + Vite, TailwindCSS, React Flow (workflow canvas)
Backend: Supabase — Auth, PostgreSQL with RLS, Realtime, Edge Functions, Storage
Task runner: Node.js — polls for pending tasks, runs the execution engine
Vectors: pgvector extension in Postgres
Hosting: Vercel (frontend), Railway (task runner), Supabase Cloud (backend)
Self-hosted: Docker Compose for the full stack
The decision to build on Supabase was pivotal. Row Level Security means every database query is automatically scoped to the user's workspace — security by default, not by convention. And real-time subscriptions meant live task execution updates without managing WebSocket servers.

Bring Your Own Keys
CrewForm is BYOK — bring your own API keys. You plug in your keys for whatever providers you use, and we never touch them. No per-token markup, no middleman.

Currently supporting: OpenAI, Anthropic, Google Gemini, Groq, Mistral, Cohere, Perplexity, DeepSeek, Together AI, Fireworks, OpenRouter, xAI, Cerebras, HuggingFace, and Ollama.

What's next
Interactive workflow canvas (drag-to-add agents, connect nodes to define execution order)
Cost optimisation dashboard
Enterprise features (SSO, audit log streaming)
More marketplace templates
Try it
🔗 GitHub: github.com/CrewForm/crewform
🌐 Website: crewform.tech
📚 Docs: docs.crewform.tech
💬 Discord: discord.gg/TAFasJCTWs
Licensed under AGPL-3.0. Would love feedback from the dev community — especially on the self-hosting experience and what features you'd want to see next!