DEV Community

Soumya Debnath
Soumya Debnath

Posted on

I built an open-source AI compliance agent platform — here's how the Gemini Computer Use integration works

#nextjs #ai #typescript #webdev

Compliance is one of those problems that sounds boring until you're a week away from a SOC 2 audit and your team is drowning in spreadsheets, manual screenshots, and frantic Slack threads.

I built CertiFlow AI to solve this — an open-source agentic GRC (Governance, Risk, Compliance) platform where AI agents continuously verify your controls so you never have to manually chase evidence again.

In this post I'll walk through the most interesting technical decisions, especially the Gemini Computer Use agent integration and the SSE architecture for real-time agent status.

GitHub: itsoumya-d/certiflow-ai

The Core Idea: Agents That Actually Do the Work

Most compliance tools are glorified checklists. You still have to go verify things manually and upload proof. CertiFlow flips this — the agents do the verification and evidence collection for you.

Here's what the agent execution loop looks like:

// lib/agents/computer-use.ts
export async function executeComplianceWorkflow(workflowId: string) {
  const workflow = getWorkflow(workflowId);

  // Gemini Computer Use agent navigates and verifies
  const result = await gemini.generateContent({
    model: 'gemini-2.0-flash',
    contents: [{
      role: 'user',
      parts: [{
        text: workflow.prompt,
      }]
    }],
    tools: [{ computerUse: {} }]  // Enables Computer Use
  });

  return parseVerificationResult(result);
}
Enter fullscreen mode Exit fullscreen mode

The key insight: Gemini's Computer Use lets the agent actually navigate UIs — it can open the AWS console, check S3 bucket settings, screenshot the result, and return a structured verdict. No API keys for every service needed; it works the same way a human auditor would.

Real-Time Agent Status with SSE

I wanted the dashboard to show live agent activity — which agents are running, what they've checked, their current status. WebSockets felt like overkill for this one-directional data flow, so I used Server-Sent Events.

The API route (/api/agents/status) streams updates using the Web Streams API built into Next.js 14:

// app/api/agents/status/route.ts
export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      const encoder = new TextEncoder();

      // Subscribe to agent events
      agentEventEmitter.on('status', (event) => {
        const data = `data: ${JSON.stringify(event)}\n\n`;
        controller.enqueue(encoder.encode(data));
      });
    }
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

On the client, the AnimatedScoreRing component subscribes and updates in real time:

// components/AnimatedScoreRing.tsx
useEffect(() => {
  const eventSource = new EventSource('/api/agents/status');

  eventSource.onmessage = (event) => {
    const update = JSON.parse(event.data);
    setAgentStatuses(prev => ({
      ...prev,
      [update.agentId]: update.status
    }));
    setScore(calculateScore(agentStatuses));
  };

  return () => eventSource.close();
}, []);
Enter fullscreen mode Exit fullscreen mode

The score ring animates smoothly as agents complete their checks — it genuinely feels alive.

Role-Based Access with NextAuth.js

Compliance tools need proper access control. Auditors should see everything but not change anything. Regular users can upload evidence but not manage agents. I used NextAuth.js with a custom credentials provider:

// app/api/auth/[...nextauth]/route.ts
export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        const user = await validateUser(credentials);
        if (!user) return null;
        return { id: user.id, email: user.email, role: user.role };
      }
    })
  ],
  callbacks: {
    jwt({ token, user }) {
      if (user) token.role = user.role;
      return token;
    },
    session({ session, token }) {
      session.user.role = token.role;
      return session;
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

Then the RoleGate component handles conditional rendering:

<RoleGate allowedRoles={['admin']}>
  <AgentControls />  // Only admins see this
</RoleGate>
Enter fullscreen mode Exit fullscreen mode

Built-In Compliance Workflows

CertiFlow ships with four pre-built workflows you can run immediately — AWS S3 encryption checks, IAM policy audits, CloudTrail logging verification, and access control reviews. The prompt engineering here matters: you want structured, auditable output rather than free text.

What's Next

The platform is working and open for contributions. The most valuable additions would be more compliance frameworks (SOC 2 Type II, ISO 27001, HIPAA, PCI DSS), a custom workflow builder, CI/CD integration, and Slack/Teams alerts when a control drifts.

If this is useful to you, a ⭐ on GitHub goes a long way, and PRs for new workflows are very welcome.

GitHub: itsoumya-d/certiflow-ai

Questions about the Gemini Computer Use integration, the SSE architecture, or the RBAC design? Drop them in the comments.

Top comments (0)