Skip to content

secredoai/secredo-studio

BranchesTags

Repository files navigation

Secredo Studio - Community

A local-first visual security development workbench with an embedded Claude Code terminal. Edit real projects with AI assistance by selecting rendered elements or highlighting code and issuing precise instructions.

Secredo Studio - Community Node.js License

Repobeats analytics

Secredo Studio - Community Interface

Security Scanning

Secredo Studio - Community includes a security scanning system powered by an MCP server with comprehensive vulnerability reference data.

Security analysis is developer-invoked and reference-backed. Secredo Studio - Community does not automatically enforce policy or replace SAST/DAST tools.

At a Glance

Category Count Description
CVE Advisories 25,000+ GitHub Security Advisories across major ecosystems (npm, pip, Maven, Go, Cargo, etc.)
CWE Classifications 969 Full MITRE weakness taxonomy with descriptions and mitigations
Security Patterns 1,967 Code patterns from Semgrep, Bandit, and curated rules
OWASP Cheat Sheets 109 Expert guidance on authentication, XSS, SQL injection, etc.
ASVS Requirements 278 Application Security Verification Standard checklist

How to Scan

From the File Browser:

  • Right-click any file → Full Security Scan (patterns + dependencies)
  • Right-click → Scan for... → Code Patterns (XSS, SQL injection, secrets)
  • Right-click → Scan for... → Dependencies (CVEs) (package.json, requirements.txt)

From the Code Editor:

  • Select code → Right-click → Scan for Security Issues
  • Keyboard: Cmd+Shift+S

Ask Claude directly:

  • "Scan this file for security issues"
  • "Check my package.json for vulnerable dependencies"
  • "What's CWE-79?"

Supported Ecosystems

Ecosystem Files Examples
npm package.json React, Express, lodash
pip/PyPI requirements.txt, pyproject.toml Django, Flask, requests
Maven pom.xml Spring, Log4j, Jackson
Go go.mod Kubernetes libs, Docker
Cargo Cargo.toml Rust crates
RubyGems Gemfile Rails, Devise
Composer composer.json Laravel, Symfony
NuGet *.csproj .NET packages

Update Security Database

Click 🛡️ Update DB in the terminal panel header to fetch the latest:

  • GitHub Security Advisories
  • CWE definitions
  • OWASP Cheat Sheets
  • Semgrep rules

Or run manually:

cd mcp-servers/security
npm run update-db

Features

Visual Editing

  • Element Selection - Click any element in the live preview to select it
  • Direct AI Instructions - Type what you want Claude to do with selected elements
  • Live Preview - See changes instantly as Claude edits your code
  • Vite/React Support - Full support for Vite projects with HMR

Code Editor (Monaco)

  • VS Code Experience - Monaco editor with full IntelliSense
  • Tabbed Editing - Open multiple files in tabs
  • Emmet Support - Expand abbreviations like div.container>ul>li*3
  • Prettier Formatting - Auto-format HTML, CSS, JavaScript, TypeScript
  • Code to Claude - Select code, right-click "Send to Claude"
  • Security Scan - Right-click "Scan for Security Issues" to detect vulnerabilities
  • Syntax Highlighting - HTML, CSS, JS, JSX, TypeScript, JSON, Python, and more
  • Live Reload - Editor updates in real-time when Claude modifies files

Workspace

  • Embedded Claude Terminal - Full Claude Code CLI in your browser
  • File Browser - Navigate and edit project files with upload/download
  • Collapsible Panels - Click panel labels to collapse/expand
  • Resizable Panels - Drag borders to customize your workspace layout
  • Auto-Refresh - Files automatically reload when changed
  • Responsive Preview - Test at Desktop, Tablet, and Phone sizes

Project Templates

  • New Project Button - Start projects with pre-configured templates
  • Vite + React - Modern React setup with HMR
  • Vite + React + Tailwind - React with Tailwind CSS v4
  • Static HTML/CSS/JS - Simple static website
  • Custom - Describe what you want and Claude builds it

Session Management

  • Save Snapshots - Save project state with optional description and NOTES.md
  • Load Snapshots - View timestamps and descriptions, choose "Continue Session" or "Fresh Start"
  • Prompt Counter - Visual indicator of context usage (persists across page refreshes)
    • Green (1-5) → Yellow (6-10) → Orange (11-15 + "save soon") → Red/glowing (16+ "SAVE PROGRESS")
  • CLAUDE.md - Click the prompt counter to update project context and reset counter
  • Restart Server - Restart Vite or get instructions to restart Secredo Studio - Community
Code Editor with Security Scanning

Installation

Prerequisites

  • Node.js 18+ - Download Node.js
  • Claude Code CLI - Must be installed and authenticated 
    npm install -g @anthropic-ai/claude-code
claude auth

Global Install (Recommended)

git clone https://github.com/secredoai/secredo-studio.git
cd secredo-studio
npm install
npm link

Now run from any project folder:

cd /path/to/your/website
secredo-studio

Local Install

git clone https://github.com/secredoai/secredo-studio.git
cd secredo-studio
npm install
npm start

Enter your project path when prompted, then open http://localhost:3000

Usage

Visual Element Editing

  1. Click Select in the preview panel
  2. Click any element in your website
  3. Type an instruction: "make this blue", "add padding", "center this"
  4. Press Enter - Claude edits the code

Code Editing

  1. Open files from the file browser (creates tabs)
  2. Edit with full Monaco editor features
  3. Select code → Right-click → Send to Claude
  4. Type what you want done with that code

Snapshots (Session Management)

Save and restore project states - useful for managing Claude's context limits or creating checkpoints:

  1. Click Save in the terminal panel header
  2. Enter an optional description
  3. Claude creates .snapshots/[timestamp]/ with files and NOTES.md

To restore:

  1. Click Load in the terminal panel header
  2. Select a snapshot from the list
  3. Choose Continue Session (restore + read notes) or Fresh Start (restore only)

Keyboard Shortcuts

Shortcut Action
Cmd+S Save file
Cmd+F Find
Cmd+H Replace
Cmd+/ Toggle comment
Shift+Alt+F Format with Prettier
Cmd+Shift+C Send selection to Claude
Cmd+Shift+S Scan selection for security issues
Tab Expand Emmet abbreviation

Security MCP Server Details

The security database is powered by an MCP (Model Context Protocol) server that Claude can query directly.

MCP Tools

Tool Description
check_code_snippet Scan code for known vulnerability patterns
audit_dependencies Audit package.json/requirements.txt for CVEs
check_dependency Check if a specific package has known CVEs
search_advisories Search GitHub Advisory Database
get_cwe_info Look up CWE details by ID
get_secure_pattern Get secure coding pattern for a vulnerability type
search_cheatsheets Search OWASP guidance by keyword
get_cheatsheet Get full OWASP cheat sheet content
search_asvs Search ASVS security requirements
list_patterns List all security patterns

Data Sources

Source License Description
GitHub Advisory Database CC-BY-4.0 25,000+ verified CVE advisories
CWE - MITRE Public Domain 969 weakness classifications
Semgrep Rules LGPL-2.1 1,922 security patterns for 20+ languages
OWASP Cheat Sheets CC-BY-SA 4.0 109 security guidance documents
OWASP ASVS CC-BY-SA 4.0 278 verification requirements
Bandit Apache-2.0 31 Python security patterns

Manual Setup

The security MCP server is automatically configured. To manually add:

claude mcp add secredo-security node /path/to/secredo-studio/mcp-servers/security/index.js --scope user

Full Database Rebuild

To completely rebuild from source:

cd mcp-servers/security/data/sources

# Download sources
curl -L -o cwe_latest.xml.zip "https://cwe.mitre.org/data/xml/cwec_latest.xml.zip"
unzip -o cwe_latest.xml.zip

git clone --depth 1 https://github.com/semgrep/semgrep-rules.git
git clone --depth 1 https://github.com/OWASP/CheatSheetSeries.git
git clone --depth 1 https://github.com/PyCQA/bandit.git
git clone --depth 1 https://github.com/github/advisory-database.git

curl -L -o asvs.csv "https://raw.githubusercontent.com/OWASP/ASVS/master/4.0/docs_en/OWASP%20Application%20Security%20Verification%20Standard%204.0.3-en.csv"

# Run ingestion
cd ../..
npm run ingest

Configuration

Environment variables (optional):

PORT=3000         # HTTP server port
WS_PORT=3001      # App WebSocket port
TERM_WS_PORT=3002 # Terminal WebSocket port
VITE_PORT=5173    # Vite dev server port

How It Works

┌─────────────────────────────────────────────────────────┐
│                    Browser (localhost:3000)             │
├──────────────┬──────────────────┬───────────────────────┤
│  File Tree   │   Monaco Editor  │    Live Preview       │
│              │   (with tabs)    │   (iframe/Vite)       │
├──────────────┴──────────────────┴───────────────────────┤
│              Claude Code Terminal (xterm.js)            │
└─────────────────────────────────────────────────────────┘
         │                              │
         ▼                              ▼
   WebSocket (PTY)              HTTP Proxy (Vite)
         │                              │
         ▼                              ▼
   Claude Code CLI              Vite Dev Server
  1. HTTP Server - Serves UI and proxies Vite for same-origin access
  2. PTY Terminal - Spawns Claude Code in a pseudo-terminal
  3. WebSocket Bridge - Connects browser terminal to PTY process
  4. File Watcher - Detects changes and triggers live reload

Supported Projects

  • Static HTML/CSS/JS - Works out of the box
  • Vite/React - Auto-detected, runs dev server with HMR
  • Any web project - If Claude Code can edit it, Secredo Studio - Community can preview it

Security Notes

  • Local Use Only - Designed for local development
  • Path Sandboxing - File operations restricted to project directory
  • No Auth - Don't expose to public networks

Troubleshooting

Claude Code not starting

npm install -g @anthropic-ai/claude-code
claude auth

Port conflicts

secredo-studio --kill  # Kills processes on ports 3000-3002

Native module errors

npm rebuild

Safari WebSocket issues Use Chrome or Firefox. Safari has WebSocket compatibility issues with the terminal connection.

Citation

Secredo Studio - Community by SecredoAI (Tim Meyers)
https://github.com/secredoai/secredo-studio

@software{secredo-studio2025,
  author = {Meyers, Tim},
  title = {Secredo Studio - Community},
  year = {2025},
  publisher = {GitHub},
  url = {https://github.com/secredoai/secredo-studio}
}

License

AGPL-3.0 License - see LICENSE file

Philosophy

Secredo Studio - Community is built around three principles:

  • Local-first execution — All code runs on your machine with inspectable state
  • Developer-in-the-loop AI — Deterministic assistance where you control intent and verification
  • Standards-grounded security — Reasoning backed by CWE, OWASP, and public advisory databases

The goal is not to replace existing tools, but to provide a transparent workbench where intent, execution, and verification happen together.

Acknowledgments

Uses Claude Code for AI-assisted development (bring your own Claude subscription).

Secredo Studio - Community is an independent open-source project and is not affiliated with or endorsed by Anthropic.

Secredo Studio - Community is designed for development and analysis workflows and should be evaluated and governed appropriately before use in production environments.

About

Self-hosted community edition security development workbench. Bring your own Claude.

secredo.ai

Resources

Readme

License

View license
Activity

Stars

1 star

Watchers

0 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages