Kailash Frontend Integration

Guides for integrating Kailash workflows with frontend frameworks including React and Flutter.

Overview

Frontend integration patterns for:

• •React applications with Kailash workflows
• •Flutter mobile/desktop apps with Kailash
• •API client setup and configuration
• •State management patterns
• •Real-time updates and streaming

Reference Documentation

React Integration

• •react-integration-quick - React integration quick start
  • •Setup with Nexus API
  • •React Query integration
  • •TypeScript types
  • •Error handling
  • •State management
  • •Real-time updates

Flutter Integration

• •flutter-integration-quick - Flutter integration quick start
  • •HTTP client setup
  • •Dart models
  • •State management (Riverpod/Bloc)
  • •Error handling
  • •Platform-specific code

General Frontend

• •frontend-developer - Frontend development guide
  • •Architecture patterns
  • •API integration
  • •Authentication
  • •Error handling
  • •Best practices

Integration Patterns

React + Nexus

import { useQuery } from '@tanstack/react-query';

// Call Kailash workflow via Nexus API
const { data, isLoading, error } = useQuery({
  queryKey: ['workflow', workflowId],
  queryFn: () => fetch(`/api/workflow/${workflowId}`, {
    method: 'POST',
    body: JSON.stringify({ input: 'data' })
  }).then(res => res.json())
});

Flutter + Nexus

import 'package:http/http.dart' as http;

// Call Kailash workflow
Future<Map<String, dynamic>> executeWorkflow(String workflowId, Map<String, dynamic> input) async {
  final response = await http.post(
    Uri.parse('$baseUrl/api/workflow/$workflowId'),
    body: jsonEncode(input),
  );
  return jsonDecode(response.body);
}

Architecture Patterns

Recommended Stack

React Applications:

• •API Layer: Nexus (multi-channel platform)
• •State Management: React Query / Zustand
• •HTTP Client: Fetch API / Axios
• •Type Safety: TypeScript with generated types
• •UI Framework: Shadcn, Material-UI, or custom

Flutter Applications:

• •API Layer: Nexus (multi-channel platform)
• •State Management: Riverpod / Bloc
• •HTTP Client: http package / Dio
• •Type Safety: Dart with generated models
• •UI Framework: Material 3 / Cupertino

Backend Architecture

Frontend (React/Flutter)
    ↓
Nexus API (Port 8000)
    ↓
Kailash Workflows
    ↓
DataFlow (Database)
    ↓
PostgreSQL/SQLite

When to Use This Skill

Use this skill when you need to:

• •Integrate React with Kailash workflows
• •Build Flutter apps with Kailash backend
• •Set up API clients for Kailash
• •Implement frontend state management
• •Handle errors in frontend applications
• •Configure real-time updates
• •Generate TypeScript/Dart types

Best Practices

API Integration

• •✅ Use Nexus for auto-generated APIs
• •✅ Implement proper error handling
• •✅ Use type-safe clients (TypeScript/Dart)
• •✅ Cache responses appropriately
• •✅ Handle loading and error states
• •❌ NEVER expose API keys in frontend code
• •❌ NEVER skip input validation

State Management

• •✅ Use React Query for server state (React)
• •✅ Use Riverpod/Bloc for app state (Flutter)
• •✅ Implement optimistic updates
• •✅ Handle offline scenarios
• •❌ NEVER store sensitive data in client state

Performance

• •✅ Implement pagination for large datasets
• •✅ Use debouncing for search/filter
• •✅ Cache API responses
• •✅ Lazy load components
• •❌ NEVER fetch all data at once

Related Skills

• •03-nexus - Nexus API deployment
• •02-dataflow - Database backend
• •01-core-sdk - Workflow creation

Support

For frontend integration help, invoke:

• •react-specialist - React integration patterns
• •flutter-specialist - Flutter integration patterns
• •frontend-developer - Frontend architecture
• •nexus-specialist - API configuration