frontend-integration

Integrate Kailash workflows into React and Flutter frontends with API clients and state management.

Updated Aug 23, 2026

Search Tags:#state management #React #frontend #API integration #UI #Nexus #Flutter

Ready to run

npx skills add https://github.com/Integrum-Global/new_project_template --skill frontend-integration

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-integration
Source: https://github.com/Integrum-Global/new_project_template/tree/main/.claude/skills/11-frontend-integration
Command: npx skills add https://github.com/Integrum-Global/new_project_template --skill frontend-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires kailash, fastapi.

What problem does it solve?

Integrating powerful backend workflows with modern frontend applications can be challenging. This Skill provides clear guides and best practices for seamlessly connecting Kailash SDK workflows to React and Flutter UIs, simplifying full-stack development.

Core Features & Use Cases

React & Flutter Guides: Step-by-step instructions for integrating Kailash with popular frontend frameworks.
API Client Setup: Learn to configure API clients, manage state, and handle real-time updates.
Use Case: You're building a mobile app with Flutter that needs to trigger a complex AI workflow. This Skill guides you through setting up the API client, sending data, and displaying results in your Flutter UI.

Quick Start

// React + Nexus API call import { useQuery } from '@tanstack/react-query'; const { data, isLoading, error } = useQuery({ queryKey: ['workflow', workflowId], queryFn: () => fetch(/api/workflow/${workflowId}, { method: 'POST', body: JSON.stringify({ input: 'data' }) }).then(res => res.json()) });

Frequently Asked Questions about frontend-integration

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

FAQPage Schema

How do I connect a React app to Kailash workflows?▼

Connect React apps to Kailash workflows by setting up an API client with fetch or a library like React Query, configuring authentication, and managing state with the workflow response. Use generated TypeScript types for type safety and handle both synchronous and streaming responses from the Nexus API.

Can I integrate Kailash workflows with a Flutter mobile app?▼

Yes, Flutter apps integrate with Kailash workflows through HTTP clients configured with Nexus API endpoints and generated Dart types. Set up error handling, state management using Riverpod or Bloc, and real-time update listeners to display workflow results in your UI.

What's the best way to handle API errors when calling Kailash from React or Flutter?▼

Implement error handling in your API client by catching HTTP errors, parsing error responses from Kailash workflows, and surfacing them to users with fallback UI. Both React Query and Flutter's HTTP client libraries provide built-in error state management for this purpose.

How do I set up state management for Kailash workflow responses in React?▼

Manage Kailash workflow state in React using React Query for server state or Redux for complex application state. Store workflow responses, loading states, and errors; React Query automatically handles caching, refetching, and synchronization with your backend API calls.

Do I need to write custom code to handle real-time updates from Kailash workflows?▼

Real-time updates from Kailash workflows require streaming support in your HTTP client and state management setup. React Query and Flutter's stream listeners enable listening to workflow status changes; configure your Nexus API client to maintain open connections for continuous updates.

What's required before I can call Kailash workflows from my frontend?▼

Before calling Kailash workflows, set up an API client configured with Nexus API credentials, generate TypeScript or Dart types from your workflow schema, and ensure your frontend has network access to your backend. FastAPI or equivalent backend must expose workflow endpoints to your frontend domain.