ARKO

A security tool developers actually open.

Brand and product UI for DevSecAI's AI security extension, built from zero inside a 300-pixel sidebar.

Year: 2025 to 2026
Role: Brand lead
Team: The founder, one developer, me
Company: DevSecAI, UK
Shipped: VS Code and Cursor

Antigravityagent

1plan add export endpoint

2write src/routes/export.ts

3⚠︎ route has no auth check

✓ requireAuth added

VS Codesession.ts

1import session from "express-session"

3app.use(session({

4 secret: "changeme",

secret: env.SESSION_SECRET,

5 cookie: { secure: false },

cookie: { secure: true },

6}))

Cursorexport.ts

1import { db, SQL } from "../db"

3export async function exportOrders(req, res) {

4 const team = req.query.team

5 const sql = `SELECT * FROM orders WHERE team='${team}'`⚠︎ injection

const rows = await db.query(SQL.byTeam, [team])

6 log.debug("auth", req.headers.authorization)⚠︎ token in logs

log.debug("export", { user: req.user.id })

7 res.set("Access-Control-Allow-Origin", "*")⚠︎ open CORS

res.set("Access-Control-Allow-Origin", APP_ORIGIN)

8 return res.json(rows)

Windsurffiles.ts

14https.get(url, { rejectUnauthorized: false })

https.get(url)

15fs.readFile(req.params.path)

fs.readFile(safePath(req.params.path))

Claude Codeterminal

1> add CSV export for orders

2● edited src/routes/export.ts

3 3 findings on this change

✓ 3 of 3 fixed

Launch visual for devsecai.ioMove over an editor

Security tooling that developers ignore is not security tooling.

The product thesis. Everything else followed from it.

DevSecAI moved from a heavy dashboard into the editor. The bet: read the architecture, then give one obvious next action.

Inside the editor

ARKO maps the architecture, models the threats, scores the risk and walks you to the fix. This is the flow, replayed.

ai-chat.ts, ARKO by DevSecAI, Cursor

Scanning

YOUR HACKABLE SCORE

%

HACKABLE

0% SECURE100% EXPOSED

Scanning your codebase

SCANIn progress

Summarising

Threat Model

Discovery

Validation

Threat Model

Pending

Vulnerabilities

TSai-chat.ts

TSauth.ts

{}package.json

src›routes›TSai-chat.ts

1
import express from "express"
2
import OpenAI from "openai"
3
import { db } from "../db"
4
5
const router = express.Router()
6
const openai = new OpenAI({ apiKey: "sk-proj-8Rk2...Qf7T" })
7
8
router.post("/api/chat", async (req, res) => {
9
  const { userId, message } = req.body
10
11
  // look up the user before we answer
12
  const user = await db.query(
13
    "SELECT * FROM users WHERE id = '" + userId + "'"
14
  )
15
  if (!user.rows.length) return res.status(404).end()
16
17
  const prompt = "You are a support assistant. " + message
18
19
  const reply = await openai.chat.completions.create({
20
    model: "gpt-4o-mini",
21
    messages: [{ role: "user", content: prompt }],
22
  })
23
24
  res.json({ reply: reply.choices[0].message.content })
25
})
26
27
export default router

main00

Ln 1, Col 1Spaces: 2UTF-8TypeScript

Four decisions

Two limits shaped all of it: 300 pixels of width, and developers who close panels they do not trust.

The screens

The whole product lives in one sidebar, from sign-in to a clean score.

01 Welcome and sign in

AI-powered security for modern development

Ship fast without
shipping vulnerabilities

DevSecAI scans your codebase for security issues, builds a threat model specific to your app, and gives you plain-English fixes you can apply in one click.

WHAT YOU GET

Threat Modelling

AI maps your app's attack surface and worst-case scenarios

Vulnerability Scanning

Finds real issues in your code, not just regex matches

Fix

One-click fix instructions you paste into your AI assistant for each finding

HOW IT WORKS

1Sign in and open your project

2Click Run Scan

3Review findings and apply fixes

Free tier includes 1 project with a 72-hour scan cooldown. Upgrade anytime for more projects and unlimited scans.

06 Plan and scans

02 Hackable Score

03 Scan phases

04 Next action

05 Threat model

Threat Model

All addressed

3 severe · 5 potential risks

What could go wrong if someone targets your app? We've identified the most serious risks and the ones most likely to be exploited.

Severe Risks (3)

Worst-case scenarios that could cause serious harm

Complete Customer Data BreachAddressed

AI Model Poisoning and Supply Chain AttackAddressed

Infrastructure Takeover via Container EscapeAddressed

Potential Risks (5)

More likely to be exploited - worth fixing first

IDOR-Based Data ExposureAddressed

Malicious File Upload AttackAddressed

JWT Token ManipulationAddressed

WebSocket HijackingAddressed

Credential Stuffing and Account TakeoverAddressed

The mark

Built on a grid from one arch and one stem, then drawn to hold at every size.

ARCH R 19.6 / 14.4STEM 5.0

Colour

A dark editor palette with one green that means safe. Click a colour to copy it.

Hackable Score

Lower is safer. Five bands, one colour each, the same everywhere.

arko hackable score82%

0 to 30Secure

31 to 50Low risk

51 to 70Caution

71 to 85Elevated

86 to 100Critical

What shipped

One designer, from the name to the Marketplace listing.

Plugin

Shipped to VS Code and Cursor, February 2026

Brand

Name, logo system, type, colour and icons, from zero

Product UI

The whole sidebar, from sign-in to fixes

Website

devsecai.io, designed and built

Sales material

Data sheets, high-level designs, carousels, the Marketplace listing

“He sat in on threat modeling workshops, asked the right questions, and translated AI security concepts into design that developers and CISOs both trust.”

Charlie BanyardFounder and CISO, DevSecAI

Next projectITHIL →Start the project