Cursor + Kognitos: A Developer's Guide to Governed AI Apps

Cursor has changed how developers write code. You describe what you want, and the AI generates components, wires up state management, and scaffolds entire pages in seconds. For frontend velocity, nothing comes close.

But here is the uncomfortable truth that every enterprise engineering team discovers eventually: generating code fast is not the same as building governed applications. The moment your Cursor-built prototype touches real invoices, real approval chains, or real compliance requirements, you hit a wall that no code-generation tool can solve alone.

The business logic layer — the rules that determine whether an invoice gets approved, which exceptions require human review, and how every decision is recorded for auditors — demands a fundamentally different approach. Hardcoding those rules in JavaScript means every policy change requires a developer, a pull request, and a deployment. Worse, there is no audit trail that a compliance officer can actually read.

This guide shows you how to pair Cursor and Kognitos into an architecture where each tool does what it does best. Cursor owns the pixels. Kognitos owns the logic. The result is a production-grade enterprise application that is fast to build, easy to govern, and impossible to outgrow.

Why Cursor Alone Is Not Enough for Enterprise

Cursor AI is extraordinary at what it does. It generates clean React components from natural language prompts. It refactors code, writes tests, and handles boilerplate with remarkable accuracy. For building user interfaces, dashboards, and data visualizations, Cursor delivers a productivity leap that is hard to overstate.

The gap appears when you need your application to make business decisions. Consider an invoice approval workflow. The frontend needs to display the invoice, show the approval status, and let the user take action. That part is straightforward — Cursor can scaffold it in minutes.

But behind that interface sits a web of business rules: invoices over $5,000 require VP approval; vendors without a W-9 on file are automatically held; duplicate invoices within 30 days trigger a fraud review. These rules change constantly. Finance updates the threshold. Legal adds a new compliance check. A new vendor category requires a different approval chain.

When those rules live in your JavaScript codebase, every change becomes an engineering task. You need a developer to update the logic, a reviewer to approve the PR, a QA cycle to verify nothing broke, and a deployment to push it live. That process takes days or weeks — for what is fundamentally a business policy change, not a software engineering problem.

The deeper issue is auditability. When an auditor asks "why was this $47,000 invoice approved automatically?" you need more than a git blame. You need a human-readable trace that shows which rule fired, what data it evaluated, and who authorized the policy. Cursor-generated code does not produce that trace, because code-generation tools are designed for developer productivity, not regulatory compliance.

This is not a criticism of Cursor. It is a recognition that governed AI applications require a separation of concerns that mirrors how enterprises actually operate: engineers own the technology, and business teams own the policies.

The Architecture: Cursor Owns Visualization, Kognitos Owns Logic

The architecture is deliberately simple. Your application has two layers, and each layer has a clear owner.

The Visualization Layer — built and maintained with Cursor — handles everything the user sees and interacts with. React components, routing, state management, styling, form validation, and API integration code. This is where Cursor's AI-assisted development delivers maximum value. You iterate fast, ship beautiful interfaces, and use every productivity feature Cursor offers.

The Logic Layer — powered by Kognitos — handles everything the business cares about. Approval rules, compliance checks, exception routing, escalation policies, and audit logging. These are written in plain English using the Kognitos platform, not in JavaScript. Business stakeholders can read, modify, and approve these rules directly.

The two layers communicate through the Kognitos REST API. Your Cursor-built frontend sends a request — "evaluate this invoice for approval" — and receives a structured response containing the decision, the reasoning, and a complete audit trace.

Here is what the data flow looks like:

User submits invoice in React UI (built with Cursor)
        │
        ▼
Frontend sends POST to Kognitos API
        │
        ▼
Kognitos evaluates English-as-Code procedures:
  ├─ Check vendor W-9 status
  ├─ Apply approval threshold rules
  ├─ Run duplicate detection
  └─ Log full decision trace
        │
        ▼
API returns structured response:
  { decision, trace, exceptions, auditId }
        │
        ▼
React UI renders result with audit trail

This separation means that when Finance changes the approval threshold from $5,000 to $10,000, they update the English procedure on Kognitos. No code change. No PR. No deployment. No risk of breaking the UI. The developer documentation provides full API reference and integration patterns for this architecture.

Tutorial: Build a Governed Invoice Approval App

Let us walk through building a complete invoice approval application using Cursor for the frontend and Kognitos for the business logic. By the end of this tutorial, you will have a working app where invoices are evaluated against governed rules, exceptions are routed to human reviewers, and every decision produces a compliance-grade audit trail.

Step 1: Define Business Rules in English on Kognitos

Before writing a single line of frontend code, define your business logic on the Kognitos platform. Log in to your Kognitos workspace and create a new procedure called evaluate invoice for approval.

Here is an example procedure written in English as Code:

the invoice is the input

check if the vendor of the invoice has a valid W-9 on file
if the vendor does not have a valid W-9
  set the decision to "hold"
  set the reason to "Vendor missing W-9 documentation"
  stop

check if a duplicate invoice exists for the same vendor within 30 days
if a duplicate invoice exists
  set the decision to "review"
  set the reason to "Potential duplicate invoice detected"
  escalate to the fraud review team
  stop

if the amount of the invoice is greater than 50000
  set the decision to "requires-vp-approval"
  set the reason to "Invoice exceeds VP approval threshold"
  notify the VP of Finance
else if the amount of the invoice is greater than 5000
  set the decision to "requires-manager-approval"
  set the reason to "Invoice exceeds manager approval threshold"
else
  set the decision to "auto-approved"
  set the reason to "Invoice meets all criteria for automatic approval"

log the decision with the full audit trace

Notice what this procedure achieves. Every rule is readable by a non-technical stakeholder. A finance director can review this procedure and confirm it matches company policy — without needing an engineer to translate code into business language. When the VP approval threshold changes from $50,000 to $75,000, the finance team edits the English text directly. The change takes effect immediately with full version history.

Step 2: Get API Credentials

Navigate to your Kognitos workspace settings and generate an API key for your application. You will receive two values:

• API Base URL — the endpoint for your Kognitos workspace (e.g., https://api.kognitos.com/v1)
• API Key — a bearer token that authenticates your application

Store these in your environment variables. Never commit API keys to your repository.

# .env.local
REACT_APP_KOGNITOS_API_URL=https://api.kognitos.com/v1
REACT_APP_KOGNITOS_API_KEY=your-api-key-here

Step 3: Scaffold the React UI with Cursor

Open Cursor and use its AI capabilities to generate the invoice approval interface. You might prompt Cursor with something like: "Create a React component for an invoice approval dashboard with a submission form, a status display, and an audit trail viewer."

Cursor will generate the component structure. Here is a simplified version of what your InvoiceApproval component looks like after Cursor scaffolds it:

import { useState } from 'react';
import { submitInvoice } from '../api/kognitos';

export function InvoiceApproval() {
  const [invoice, setInvoice] = useState({
    vendorId: '',
    amount: '',
    description: '',
    invoiceNumber: ''
  });
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await submitInvoice(invoice);
      setResult(response);
    } catch (err) {
      setResult({ decision: 'error', reason: err.message });
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="invoice-approval">
      <form onSubmit={handleSubmit}>
        <input
          placeholder="Vendor ID"
          value={invoice.vendorId}
          onChange={e => setInvoice({...invoice, vendorId: e.target.value})}
        />
        <input
          type="number"
          placeholder="Amount"
          value={invoice.amount}
          onChange={e => setInvoice({...invoice, amount: e.target.value})}
        />
        <input
          placeholder="Invoice Number"
          value={invoice.invoiceNumber}
          onChange={e => setInvoice({...invoice, invoiceNumber: e.target.value})}
        />
        <textarea
          placeholder="Description"
          value={invoice.description}
          onChange={e => setInvoice({...invoice, description: e.target.value})}
        />
        <button type="submit" disabled={loading}>
          {loading ? 'Evaluating...' : 'Submit for Approval'}
        </button>
      </form>

      {result && <DecisionDisplay result={result} />}
    </div>
  );
}

The critical detail: this component contains zero business logic. It does not know what the approval threshold is. It does not check for duplicate invoices. It does not validate vendor compliance status. All of that lives on Kognitos. The React component is purely a visualization and interaction layer — exactly what Cursor is designed to build.

Step 4: Wire the API Call

Create an API integration module that connects your Cursor-built frontend to the Kognitos logic layer. This is a thin client — its only job is to send invoice data and return the structured response.

const API_URL = process.env.REACT_APP_KOGNITOS_API_URL;
const API_KEY = process.env.REACT_APP_KOGNITOS_API_KEY;

export async function submitInvoice(invoice) {
  const response = await fetch(`${API_URL}/procedures/evaluate-invoice/run`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      inputs: {
        invoice: {
          vendorId: invoice.vendorId,
          amount: parseFloat(invoice.amount),
          invoiceNumber: invoice.invoiceNumber,
          description: invoice.description,
          submittedAt: new Date().toISOString()
        }
      }
    })
  });

  if (!response.ok) {
    throw new Error(`Evaluation failed: ${response.statusText}`);
  }

  return response.json();
}

This pattern keeps your frontend completely decoupled from business rules. When Kognitos adds a new compliance check — say, OFAC sanctions screening — your frontend code does not change at all. The new check runs server-side, and the response structure remains consistent.

Step 5: Handle Responses and Traces

The Kognitos API returns a structured response that includes the decision, the reasoning, any exceptions that require human attention, and a complete audit trace. Build a component to display this information clearly.

export function DecisionDisplay({ result }) {
  const statusColors = {
    'auto-approved': '#16a34a',
    'requires-manager-approval': '#d97706',
    'requires-vp-approval': '#dc2626',
    'hold': '#991b1b',
    'review': '#7c3aed',
    'error': '#ef4444'
  };

  return (
    <div className="decision-display">
      <div
        className="decision-badge"
        style={{ backgroundColor: statusColors[result.decision] }}
      >
        {result.decision.replace(/-/g, ' ').toUpperCase()}
      </div>

      <p className="decision-reason">{result.reason}</p>

      {result.auditId && (
        <div className="audit-info">
          <span>Audit ID: {result.auditId}</span>
          <span>Evaluated: {new Date(result.evaluatedAt).toLocaleString()}</span>
        </div>
      )}

      {result.trace && (
        <details className="audit-trace">
          <summary>View Full Audit Trace</summary>
          <ol>
            {result.trace.map((step, i) => (
              <li key={i}>
                <strong>{step.rule}</strong>
                <span>{step.result}</span>
                <time>{step.timestamp}</time>
              </li>
            ))}
          </ol>
        </details>
      )}

      {result.exceptions?.length > 0 && (
        <div className="exceptions">
          <h4>Pending Exceptions</h4>
          {result.exceptions.map((ex, i) => (
            <div key={i} className="exception-card">
              <p>{ex.description}</p>
              <span>Routed to: {ex.assignedTo}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

The audit trace is the critical differentiator. Every step of the evaluation — vendor check, duplicate detection, threshold comparison — is recorded with timestamps and the exact rule text that was executed. When an auditor reviews this transaction six months from now, they see a plain-English explanation of every decision, not a stack trace or a log file full of cryptic identifiers.

What You Get: Audit Trails, Exception Handling, and Compliance

When you separate visualization from logic using this architecture, you unlock three capabilities that are impossible to achieve with code generation alone.

Complete Audit Trails

Every invoice evaluation produces a tamper-proof audit record. The record includes which version of the English procedure was executed, what data was evaluated, which rules matched, what decision was rendered, and when it happened. This is not a developer log — it is a compliance artifact that satisfies SOX Section 404, SOC 2 Type II, and HIPAA audit requirements. The Kognitos platform stores these traces immutably, so they cannot be retroactively altered.

Conversational Exception Handling

When the Kognitos procedure encounters something it cannot resolve — a vendor not found in the system, an invoice amount that seems anomalous, a missing purchase order reference — it does not crash or return a generic error. It pauses execution and asks a human for guidance.

The question arrives in Slack or Microsoft Teams, phrased in plain English: "Invoice #4892 from Acme Corp for $23,450 references PO #7721, but no matching purchase order exists. Should I approve, hold, or escalate?" The designated reviewer responds directly in the channel. Kognitos resumes the workflow with the human's input and records the interaction as part of the audit trail.

Over time, repeated exceptions of the same type are automatically recognized. Kognitos suggests promoting a one-time decision into a permanent rule — turning institutional knowledge into executable policy. This is the core principle behind conversational exception handling.

Zero-Deployment Policy Changes

When your CFO decides that invoices under $2,500 no longer need any approval, the change happens on Kognitos. A business user edits the English procedure. The change takes effect immediately. Your Cursor-built frontend does not need to be touched, rebuilt, or redeployed. There is no risk of introducing a regression in the UI because the UI was never involved in the policy decision.

This is the operational advantage of separating concerns at the architecture level rather than trying to make a single codebase handle both visualization and governance.

Beyond Invoices: Where This Pattern Applies

The Cursor + Kognitos architecture is not limited to invoice approval. Any enterprise workflow where the frontend is simple but the business logic is complex benefits from this separation.

• Customer onboarding — Cursor builds the intake forms and status dashboards; Kognitos runs KYC checks, sanctions screening, and risk scoring with full audit trails.
• Insurance claims processing — Cursor renders the claims portal; Kognitos evaluates coverage rules, detects fraud patterns, and routes exceptions to adjusters.
• HR compliance workflows — Cursor creates the employee self-service UI; Kognitos enforces leave policies, benefits eligibility rules, and regulatory reporting requirements.
• Procurement approvals — Cursor provides the requisition interface; Kognitos applies budget controls, preferred vendor rules, and multi-level approval chains.

In every case, the pattern is the same: let the code-generation tool maximize frontend velocity, and let the governed platform handle everything that needs to be auditable, explainable, and modifiable by non-developers. Explore the full range of possibilities in the Better Together series.

Getting Started

If you are already building with Cursor, integrating Kognitos into your architecture takes less than a day. Here is the recommended path:

1. Identify your business logic hotspots — find the if-else chains, the approval rules, and the compliance checks that currently live in your codebase. These are your migration candidates.
2. Write those rules in English on Kognitos — translate each hardcoded rule into a plain-English procedure. Have a business stakeholder review and approve the English version.
3. Replace hardcoded logic with API calls — swap out your JavaScript rule engine for Kognitos API calls. Your Cursor-built frontend remains unchanged except for the data source.
4. Deploy and iterate — from this point forward, business rule changes happen on Kognitos without touching your codebase. Your developers focus on building better user experiences while business teams own their policies.

The Kognitos developer portal provides API documentation, SDKs, and integration guides to get you started. For a walkthrough tailored to your specific use case, book a demo with the Kognitos team.

The era of shipping ungoverned AI-generated code to production is ending. Enterprise applications demand more — and now you have an architecture that delivers speed without sacrificing control.