Building Deploy Mode: One-Click Workflow to Production API

From Design to Deployment in One Step

We implemented a Deploy mode in XGen that takes a workflow designed on the canvas and ships it to a production environment. The goal was to make anything built on the canvas immediately available as an API endpoint.

Deploy Mode Toggle UX

An "Edit" / "Deploy" toggle sits in the top-right corner of the canvas editor. Switching to Deploy mode disables node editing and brings up the deployment configuration panel.

type EditorMode = 'edit' | 'deploy';

interface DeployConfig {
  endpointPath: string;        // /api/v1/workflow/xxx
  authRequired: boolean;
  rateLimit: number;           // requests per minute
  timeout: number;             // seconds
  enableLogging: boolean;
  enableCaching: boolean;
  cacheTTL?: number;
  description: string;
  version: string;
}

Deployment Preview Panel

API documentation is generated automatically before deployment. You can review the endpoint URL, request/response format, and authentication method before going live.

const DeployPreview: React.FC<{ config: DeployConfig }> = ({ config }) => (
  <div className="space-y-4">
    <Section title="엔드포인트">
      <CodeBlock language="bash">
        {`POST https://api.xgen.plateer.com${config.endpointPath}`}
      </CodeBlock>
    </Section>
    
    <Section title="요청 예시">
      <CodeBlock language="json">
        {JSON.stringify({
          input: { query: "사용자 질문" },
          parameters: { temperature: 0.7 }
        }, null, 2)}
      </CodeBlock>
    </Section>
    
    <Section title="설정">
      <ConfigRow label="인증 필요" value={config.authRequired ? '예' : '아니오'} />
      <ConfigRow label="Rate Limit" value={`${config.rateLimit} req/min`} />
      <ConfigRow label="타임아웃" value={`${config.timeout}초`} />
    </Section>
  </div>
);

Version Management

Each deployment automatically increments the version number, and you can roll back to any previous version. Per-version traffic splitting (canary deployments) was on the roadmap, but for now only a single active version is supported.

Deployment Status Monitoring

A dashboard provides real-time visibility into call volume, average response time, and error rate for deployed workflows. We're also considering an automatic rollback mechanism that kicks in when the error rate exceeds a configured threshold.

The Value of One-Click Deployment

Previously, deploying a workflow meant filing a request with a backend engineer. Now a single button click on the canvas produces a live API. That simplicity has been a significant productivity boost for the team.