ArcanFlows - The Visual Builder for Production-Grade AI Flows

Deploy your AI agent and make it available to users through multiple channels.

Deployment Options

ArcanFlows offers several ways to deploy your agent:

Method	Best For	Setup Effort
Embed Widget	Websites, web apps	Low
Standalone URL	Quick sharing	Minimal
API Integration	Custom applications	Medium
Workflow Trigger	Automation pipelines	Low
Form Integration	Data collection + AI	Low

Publishing Your Agent

Pre-Deployment Checklist

Before publishing, verify:

System prompt is complete and tested
Model settings are optimized
Knowledge base is up to date
Tools are configured and tested
Welcome message is set
Error handling is in place

Publishing Steps

Go to your agent's page
Click the Publish button
Review the deployment summary
Confirm publication

┌─────────────────────────────────────────┐
│        Publish Agent                     │
├─────────────────────────────────────────┤
│                                          │
│  Agent: Customer Support Bot             │
│  Status: Draft → Published               │
│                                          │
│  ✓ System prompt configured              │
│  ✓ Model selected (GPT-4)                │
│  ✓ Knowledge base (5 documents)          │
│  ✓ Tools enabled (3 tools)               │
│                                          │
│       [Cancel]  [Publish Now]            │
│                                          │
└─────────────────────────────────────────┘

JavaScript Embed

Add the chat widget to any website:

html
<!-- Add to your website's <head> -->
<script src="https://cdn.arcanflows.io/widget.js"></script>

<!-- Initialize the widget -->
<script>
  ArcanFlows.init({
    agentId: 'your-agent-id',
    position: 'bottom-right',
    theme: 'light'
  });
</script>

Configuration Options

javascript
ArcanFlows.init({
  // Required
  agentId: 'agent_abc123',

  // Positioning
  position: 'bottom-right', // bottom-right, bottom-left
  offset: { x: 20, y: 20 },

  // Appearance
  theme: 'light', // light, dark, auto
  primaryColor: '#4AB6FF',
  buttonIcon: 'chat', // chat, help, custom

  // Behavior
  autoOpen: false,
  greeting: 'Hi! How can I help?',
  placeholder: 'Type a message...',

  // User context
  user: {
    id: 'user-123',
    email: 'user@example.com',
    name: 'John Doe'
  },

  // Callbacks
  onOpen: () => console.log('Widget opened'),
  onClose: () => console.log('Widget closed'),
  onMessage: (msg) => console.log('Message:', msg)
});

Control the widget programmatically:

javascript
// Open the chat widget
ArcanFlows.open();

// Close the widget
ArcanFlows.close();

// Send a message
ArcanFlows.send('Hello!');

// Update user context
ArcanFlows.setUser({
  id: 'user-456',
  email: 'new@example.com'
});

// Destroy the widget
ArcanFlows.destroy();

iFrame Embed

For simple embedding:

html
<iframe
  src="https://chat.arcanflows.io/agent/your-agent-id"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

Standalone URL

Share a direct link to your agent:

https://chat.arcanflows.io/a/your-agent-slug

Customizing the Standalone Page

Configure the landing page:

Setting	Description
Title	Page title
Description	Meta description
Logo	Your brand logo
Colors	Brand colors
Background	Custom background

API Integration

Chat Endpoint

Send messages via API:

bash
curl -X POST https://api.arcanflows.io/v1/agents/agent_id/chat \
  -H "Authorization: Bearer your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
    "message": "Hello, I need help with my order",
    "session_id": "session_123",
    "context": {
      "user_id": "user_456",
      "order_id": "order_789"
    }
  }'

Response

json
{
  "id": "msg_abc123",
  "session_id": "session_123",
  "role": "assistant",
  "content": "Hello! I'd be happy to help with your order. Could you tell me more about what you need?",
  "created_at": "2025-01-15T10:30:00Z",
  "metadata": {
    "model": "gpt-4",
    "tokens_used": 45
  }
}

Streaming Responses

For real-time responses:

javascript
const response = await fetch('https://api.arcanflows.io/v1/agents/agent_id/chat/stream', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer your_api_key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    message: 'Tell me about your features',
    session_id: 'session_123'
  })
});

const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;

  const chunk = decoder.decode(value);
  console.log(chunk); // Print streaming response
}

Workflow Integration

Triggering from Workflows

Use agents in your automation workflows:

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Trigger   │────▶│  AI Agent   │────▶│   Action    │
│  (Webhook)  │     │   Node      │     │(Send Email) │
└─────────────┘     └─────────────┘     └─────────────┘

Agent Node Configuration

json
{
  "node_type": "ai_agent",
  "agent_id": "agent_abc123",
  "input": {
    "message": "{{trigger.data.question}}",
    "context": {
      "customer_id": "{{trigger.data.customer_id}}"
    }
  },
  "output_variable": "agent_response"
}

Form Integration

Connecting Forms to Agents

After form submission, start an agent conversation:

Create or edit a form
Go to Settings > Integration
Select AI Agent
Choose your agent
Configure the handoff message

Use Cases

Lead Qualification: Form captures info, agent qualifies
Support Intake: Form collects details, agent troubleshoots
Onboarding: Form gathers data, agent guides setup

Access Control

Public Access

Anyone can use the agent:

json
{
  "access": "public",
  "rate_limit": {
    "requests_per_minute": 10,
    "requests_per_day": 100
  }
}

Authenticated Access

Only logged-in users:

json
{
  "access": "authenticated",
  "allowed_roles": ["customer", "team_member"]
}

Private (API Only)

Only via API with key:

json
{
  "access": "private",
  "allowed_api_keys": ["key_abc", "key_xyz"]
}

Monitoring Deployed Agents

Analytics Dashboard

Track agent performance:

Metric	Description
Conversations	Total conversations started
Messages	Total messages exchanged
Avg Duration	Average conversation length
Resolution Rate	% issues resolved
Satisfaction	User feedback ratings

Alerts

Set up alerts for:

High error rates
Response time degradation
Usage limits approaching
Unusual activity patterns

Versioning

Managing Agent Versions

Track changes to your agent:

Make changes to your agent
Click Publish to create new version
Previous versions remain accessible
Rollback if needed

Version History

v3 (Current) - 2025-01-15
  - Updated system prompt
  - Added billing tool

v2 - 2025-01-10
  - Added knowledge base

v1 - 2025-01-05
  - Initial release

Next Steps

Workflows - Integrate with automations
Forms - Connect to forms
API Reference - Full API documentation