Bug: Frontend shows "MCP added!" success toast when streamable-http connection fails

[mgquach]

Bug: Frontend shows "MCP added!" success toast when streamable-http connection fails

Describe the bug
When connecting a streamable-http MCP server with an invalid URL, the backend correctly returns a 400 error, but the frontend displays a green "MCP added!" success toast. The "My MCPs" tab then shows "No MCP servers connected", which contradicts the success toast.

SSE connections with the same invalid input correctly show an error toast.

To Reproduce

1. Open the MCP Servers dialog
2. Select type "streamable-http"
3. Enter any invalid URL (e.g. "abc")
4. Click Confirm
5. Observe: green "MCP added!" toast appears, but no server is listed under "My MCPs"

Expected behavior
The frontend should show an error toast (consistent with SSE behavior), since the backend returns HTTP 400:

{"detail": "Could not connect to the MCP: unhandled errors in a TaskGroup (1 sub-exception)"}

Actual behavior

• SSE with invalid URL → error toast (correct)
• streamable-http with invalid URL → "MCP added!" success toast (incorrect)

Environment

• Chainlit version: 2.9.6
• MCP SDK version: 1.26.0
• Python version: 3.13+

Additional context
The backend behavior is correct in both cases (returns 400). This appears to be a frontend-only issue in how the streamable-http response is handled compared to SSE.

Related: #2147 (MCP URL validation)

[dosubot]

Hi @mgquach! I'm Dosu and I’m helping the chainlit team.

Good bug report! I found the root cause in the frontend code.

The issue is in frontend/src/api/index.ts — the connectStreamableHttpMCP() method always resolves its promise even when the server returns a 400 error:

connectStreamableHttpMCP(...) {
  return fetch(...).then(async (res) => {
    const data = await res.json();
    return { success: res.ok, mcp: data.mcp, error: data.detail };
  });
}

Since toast.promise() shows success toasts when promises resolve and error toasts when they reject, this always triggers the success toast.

SSE and stdio work correctly because they use the base ChainlitAPI.post() method which properly rejects on non-OK responses.

Fix: The method should throw an error when res.ok is false:

return fetch(...).then(async (res) => {
  const data = await res.json();
  if (!res.ok) {
    throw new Error(data.detail || 'Failed to connect MCP');
  }
  return { success: true, mcp: data.mcp };
});

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[github-actions]

This issue is stale because it has been open for 14 days with no activity.