### Install FlowKit Package

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Commands to install the FlowKit library using popular JavaScript package managers.

```bash
npm install flowkit
# or
yarn add flowkit
# or
pnpm add flowkit
```

--------------------------------

### Example Widget JSON Data

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

JSON representations for specific UI components like a Product Card and a Login Form.

```json
{
  "type": "ProductCard",
  "productId": "prod-001",
  "title": "Premium Headphones",
  "price": 299.99,
  "onAddToCartAction": {
    "type": "add_to_cart",
    "data": { "productId": "prod-001" }
  }
}
```

```json
{
  "type": "Login",
  "title": "Welcome Back",
  "fields": [
    { "name": "email", "type": "email", "placeholder": "Email", "required": true },
    { "name": "password", "type": "password", "placeholder": "Password", "required": true }
  ],
  "onSubmitAction": { "type": "login" }
}
```

--------------------------------

### FlowKit Component API Reference

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Usage examples for core FlowKit components including Chat, WidgetRenderer, and the theme provider.

```tsx
<Chat
  adapter={adapter}
  placeholder="Type..."
  suggestions={['Hi', 'Help']}
  onMessage={(msg) => {}}
  theme={customTheme}
/>

<WidgetRenderer
  widget={widget}
  onAction={(action) => {}}
/>

<FlowKitProvider theme={customTheme}>
  <Chat adapter={adapter} />
</FlowKitProvider>
```

--------------------------------

### Backend Integration - LangGraph

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Examples of integrating FlowKit with a Python backend using FastAPI for chat and action handling.

```APIDOC
## POST /api/chat

### Description
Processes a user message and returns a list of widgets.

### Method
POST

### Endpoint
/api/chat

### Parameters
#### Request Body
- **message** (string) - Required - The user's input message.

### Request Example
```json
{
  "message": "Hello, how can I help you today?"
}
```

### Response
#### Success Response (200)
- **widgets** (array) - A list of widget objects to be rendered.

#### Response Example
```json
{
  "widgets": [
    {
      "type": "Text",
      "content": "I can help with that."
    }
  ]
}
```

## POST /api/action

### Description
Handles actions triggered by user interactions with widgets.

### Method
POST

### Endpoint
/api/action

### Parameters
#### Request Body
- **action** (object) - Required - The action object representing the user interaction.
  - **type** (string) - Required - The type of action.
  - **data** (any) - Optional - Payload associated with the action.
  - **widgetId** (string) - Optional - The ID of the widget that triggered the action.

### Request Example
```json
{
  "action": {
    "type": "button_click",
    "widgetId": "some-widget-id"
  }
}
```

### Response
#### Success Response (200)
- **widgets** (array) - A list of widget objects to be rendered in response to the action.

#### Response Example
```json
{
  "widgets": [
    {
      "type": "Confirmation",
      "message": "Action processed successfully."
    }
  ]
}
```
```

--------------------------------

### Backend Integration - Node.js (Express)

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Examples of integrating FlowKit with a Node.js backend using Express for chat and action handling.

```APIDOC
## POST /api/chat

### Description
Processes a user message and returns a list of widgets using an Express backend.

### Method
POST

### Endpoint
/api/chat

### Parameters
#### Request Body
- **message** (string) - Required - The user's input message.

### Request Example
```json
{
  "message": "Tell me about your services."
}
```

### Response
#### Success Response (200)
- **widgets** (array) - A list of widget objects to be rendered.

#### Response Example
```json
{
  "widgets": [
    {
      "type": "InfoCard",
      "title": "Services",
      "details": "We offer a wide range of services."
    }
  ]
}
```

## POST /api/action

### Description
Handles widget actions in a Node.js Express backend.

### Method
POST

### Endpoint
/api/action

### Parameters
#### Request Body
- **action** (object) - Required - The action object representing the user interaction.
  - **type** (string) - Required - The type of action.
  - **data** (any) - Optional - Payload associated with the action.
  - **widgetId** (string) - Optional - The ID of the widget that triggered the action.

### Request Example
```json
{
  "action": {
    "type": "submit_form",
    "widgetId": "form-widget-123",
    "data": {
      "name": "John Doe",
      "email": "john.doe@example.com"
    }
  }
}
```

### Response
#### Success Response (200)
- **widgets** (array) - A list of widget objects to be rendered in response to the action.

#### Response Example
```json
{
  "widgets": [
    {
      "type": "Notification",
      "message": "Form submitted successfully!"
    }
  ]
}
```
```

--------------------------------

### Initialize FlowKit Chat Interface

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Demonstrates how to import the Chat component and adapter to render the interface in a React application. Includes both a demonstration adapter and a custom backend adapter configuration.

```tsx
import { Chat, DemoAdapter } from 'flowkit'
import 'flowkit/styles.css'

const adapter = new DemoAdapter()

function App() {
  return <Chat 
    adapter={adapter}
    placeholder="Ask me anything..."
  />
}
```

```tsx
import { Chat, FlowKitAdapter } from 'flowkit'

const adapter = new FlowKitAdapter({
  baseUrl: 'https://your-api.com',
  apiKey: 'your-api-key' // optional
})

function App() {
  return <Chat adapter={adapter} />
}
```

--------------------------------

### Implement Backend Chat Endpoints

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Demonstrates how to handle chat and action requests on the backend using Python (FastAPI) and Node.js (Express).

```python
from fastapi import FastAPI
from fastapi.responses import StreamingResponse

@app.post("/api/chat")
async def chat(request: ChatRequest):
    widgets = process_message(request.message)
    return {
        "widgets": widgets
    }

@app.post("/api/action")
async def handle_action(request: ActionRequest):
    widgets = handle_widget_action(request.action)
    return {
        "widgets": widgets
    }
```

```typescript
app.post('/api/chat', async (req, res) => {
  const { message } = req.body
  const widgets = await processMessage(message)
  res.json({ widgets })
})

app.post('/api/action', async (req, res) => {
  const { action } = req.body
  const widgets = await handleAction(action)
  res.json({ widgets })
})
```

--------------------------------

### Create Custom FlowKit Adapter

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Implements the FlowKitAdapter interface to handle message streaming and widget actions by connecting to a custom backend API.

```typescript
import { FlowKitAdapter, StreamEvent } from 'flowkit'

class MyCustomAdapter implements FlowKitAdapter {
  async *sendMessage(message: string): AsyncGenerator<StreamEvent> {
    const response = await fetch('your-api/chat', {
      method: 'POST',
      body: JSON.stringify({ message })
    })
    const data = await response.json()
    for (const widget of data.widgets) {
      yield { type: 'widget', widget }
    }
  }
  
  async *handleAction(action: WidgetAction): AsyncGenerator<StreamEvent> {
    const response = await fetch('your-api/action', {
      method: 'POST',
      body: JSON.stringify(action)
    })
    const data = await response.json()
    for (const widget of data.widgets) {
      yield { type: 'widget', widget }
    }
  }
}
```

--------------------------------

### API Reference - WidgetRenderer Component

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Documentation for the WidgetRenderer component in FlowKit.

```APIDOC
## `<WidgetRenderer />` Component

### Description
A component responsible for rendering individual widgets.

### Props
- **widget** (Widget) - Required - The widget object to be rendered.
- **onAction** (function) - Required - Handler function for actions triggered by the widget.
```

--------------------------------

### API Reference - FlowKitProvider Component

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Documentation for the FlowKitProvider component in FlowKit.

```APIDOC
## `<FlowKitProvider />` Component

### Description
Provides theming context to the FlowKit components.

### Props
- **theme** (Theme) - Required - The theme object to be applied to child components.
- **children** (ReactNode) - Required - The child components to be wrapped by the provider.
```

--------------------------------

### Configure FlowKit Theming

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Defines a custom theme object with brand colors and applies it to the application using the FlowKitProvider component.

```tsx
import { FlowKitProvider, Theme } from 'flowkit'

const customTheme: Theme = {
  colors: {
    primary: '#10a37f',
    secondary: '#6b7280',
    success: '#22c55e',
    warning: '#f59e0b',
    error: '#ef4444',
    info: '#3b82f6',
    background: '#ffffff',
    surface: '#f7f7f8',
    text: '#202123',
    textSecondary: '#6b7280',
    border: '#e5e5e5',
  }
}

function App() {
  return (
    <FlowKitProvider theme={customTheme}>
      <Chat adapter={adapter} />
    </FlowKitProvider>
  )
}
```

--------------------------------

### API Reference - Chat Component

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Documentation for the main Chat component in FlowKit.

```APIDOC
## `<Chat />` Component

### Description
The main chat interface component for user interaction.

### Props
- **adapter** (FlowKitAdapter) - Required - An instance of the FlowKitAdapter for handling messages and actions.
- **placeholder** (string) - Optional - Placeholder text for the input field.
- **suggestions** (string[]) - Optional - An array of suggested quick action chips.
- **onMessage** (function) - Optional - Callback function triggered when a user sends a message.
- **theme** (Theme) - Optional - A custom theme object to style the chat interface.
```

--------------------------------

### Widget Schema

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

Defines the structure for widgets and actions within FlowKit.

```APIDOC
## Widget Schema

### Widget Interface
```typescript
interface Widget {
  type: string          // Widget type
  children?: Widget[]   // Nested widgets
  // ... component-specific props
}
```

### WidgetAction Interface
```typescript
interface WidgetAction {
  type: string           // Action type
  data?: any             // Action payload
  widgetId?: string      // Source widget ID
}
```

### Example: Product Card Widget
```json
{
  "type": "ProductCard",
  "productId": "prod-001",
  "image": "https://example.com/product.jpg",
  "title": "Premium Headphones",
  "price": 299.99,
  "originalPrice": 399.99,
  "currency": "USD",
  "rating": 4.8,
  "reviews": 1247,
  "badge": "SALE",
  "inStock": true,
  "onAddToCartAction": {
    "type": "add_to_cart",
    "data": { "productId": "prod-001" }
  }
}
```

### Example: Login Form Widget
```json
{
  "type": "Login",
  "title": "Welcome Back",
  "subtitle": "Sign in to continue",
  "fields": [
    { "name": "email", "type": "email", "placeholder": "Email", "required": true },
    { "name": "password", "type": "password", "placeholder": "Password", "required": true }
  ],
  "submitLabel": "Sign In",
  "forgotPasswordAction": { "type": "forgot_password" },
  "onSubmitAction": { "type": "login" }
}
```
```

--------------------------------

### Define Widget Schema

Source: https://github.com/openclawabdullah/flowkit/blob/main/README.md

TypeScript interfaces defining the structure for widgets and actions within the FlowKit ecosystem.

```typescript
interface Widget {
  type: string
  children?: Widget[]
}

interface WidgetAction {
  type: string
  data?: any
  widgetId?: string
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.