metis: Skill for Claude Code

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