frontend-integration

Integrates React and Flutter frontends with Kailash SDK workflows via Nexus APIs.

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/Dchuuuuuu/disease-risk-classifier --skill frontend-integration-dchuuuuuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-integration
Source: https://github.com/Dchuuuuuu/disease-risk-classifier/tree/main/.claude/skills/11-frontend-integration
Command: npx skills add https://github.com/Dchuuuuuu/disease-risk-classifier --skill frontend-integration-dchuuuuuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Connecting React or Flutter frontends to Kailash SDK workflows requires correct API client setup, state management, error handling, and type safety, which developers often implement inconsistently or incorrectly. ## Core Features & Use Cases - React Integration: Quick-start patterns for calling Kailash workflows from React using TanStack Query, React Flow workflow editors, Zustand state, and streaming responses. - Flutter Integration: HTTP client setup with Dio, Riverpod/Bloc state management, responsive layouts, form validation, and platform-specific code for mobile and desktop apps. - Architecture Guidance: Recommended stacks, backend architecture (Frontend → Nexus API → Kailash Workflows → DataFlow), and best practices for error handling, caching, and performance. - Use Case: A developer building a React dashboard that executes Kailash workflows through the Nexus API can follow the provided patterns to implement typed API clients, loading states, and real-time WebSocket updates. ## Quick Start Ask how to connect a React or Flutter app to a Kailash workflow through the Nexus API, including state management and error handling setup.

Frequently Asked Questions about frontend-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate React with Kailash workflows?▼

Deploy the workflow with WorkflowAPI on port 8000, then call the /execute endpoint from React using fetch or TanStack Query. The skill provides TypeScript examples covering mutations, loading states, and streaming responses.

How do I connect a Flutter app to a Kailash backend?▼

Create a Dart service class using the http package or Dio to POST workflow inputs to the Nexus API endpoint. The skill includes Riverpod providers for state management and examples for chat interfaces and workflow lists.

What state management should I use with Kailash frontends?▼

For React, use TanStack Query for server state and Zustand for app state. For Flutter, use Riverpod or Bloc. Both approaches are documented with providers, notifiers, and optimistic update patterns.

Does Kailash support streaming responses in React?▼

Yes, enable streaming by initializing WorkflowAPI with streaming=True, then read the response body with a ReadableStream reader in React. The skill shows how to decode chunks and update the UI incrementally.

Can I build a visual workflow editor with React Flow?▼

Yes, the skill documents custom node components, drag-and-drop from a node palette, and performance-optimized state updates using useNodesState and useEdgesState from React Flow.

What are the limitations of frontend integration with Kailash?▼

Frontends must communicate through the Nexus API layer rather than calling workflows directly, and API keys must never be exposed in client code. Real-time updates require WebSocket endpoints configured on the backend.