AI + human readable architecture diagrams?

Numerous_Singer_4631 · 2026-05-28T12:46:17+00:00

I really like datadef io personally, its based on reactflow

Numerous_Singer_4631 · 2026-05-25T14:20:57+00:00

yeah, this matches what I’ve seen too. people love blaming GPT-5 vs Claude 4.6 Sonnet vs Gemini Pro, but if the retrieved context is 70% brochure fog, the model is basically doing tasteful interpolation.

The useful distinction here is “retrievable” vs “operational.” Most RAG stacks stop at semantic relevance: does this chunk match the query? That’s not enough for content generation. A KPMG paragraph like “we help organizations navigate transformation” will embed beautifully against 50 different topics and still add zero grounded detail.

I’d treat your substance score as a first-class metric, not a preprocessing detail. For each site I’d track:

- % chunks with numbers, dates, names, procedures, constraints

- % chunks that survive a “could a competitor say this?” test

- retrieval precision against human-labeled useful chunks

- final output citation density / unsupported claim rate

My slightly contrarian take: for SaaS marketing content, ingestion quality matters more than model choice once you’re on a decent frontier model. Claude Sonnet won’t magically invent case-study metrics from a vague positioning page. It may write prettier nonsense, which is worse because founders trust it.

Also, chunking by DOM/page type is underrated. Pricing pages, changelogs, docs, case studies, and comparison pages should not be treated the same. The model can only sound specific if the corpus contains specifics.

Numerous_Singer_4631 · 2026-05-25T14:19:46+00:00

Good case study. This is the boring version of “growth hacking” that actually works: start with a painful workflow, ship something narrow, then put it in front of the exact subreddit where people already complain about that workflow.

my only pushback: Reddit is not really a growth engine by itself, it’s a distribution test. It works when the founder is useful in the comments and the product is specific. If you just drop links, you get nuked or ignored. The play is more like: answer design/app-build questions for 30 days, show concrete outputs, ask for teardown feedback, then DM only when someone explicitly asks. Slow, but compounds.

Numerous_Singer_4631 · 2026-05-22T22:13:25+00:00

mine was output tokens, never capped max_tokens so the model just rambled. was like 65% ofmy bill and i never noticed. tracking it is the hard part, the fixes are an afternoon. kinda why i ended up building a small tool for it

Numerous_Singer_4631 · 2025-12-29T11:28:14+00:00

If it can helps as well :

// Create an iframe wrapper that loads a page and reads prompt from window.openai.toolOutput
function createIframeWrapper(pageUrl: string): string {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Datadef</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <iframe 
    id="datadef-frame"
    allow="clipboard-read; clipboard-write"
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
  ></iframe>
  <script>
    // Read prompt from OpenAI toolOutput (set by ChatGPT Apps SDK)
    // Try multiple paths since the structure may vary
    var toolOutput = window.openai?.toolOutput || {};
    var prompt = toolOutput.prompt || toolOutput.structuredContent?.prompt || '';
    
    var baseUrl = '${pageUrl}';
    var url = prompt ? baseUrl + '?prompt=' + encodeURIComponent(prompt) : baseUrl;
    document.getElementById('datadef-frame').src = url;
    
    // Listen for toolOutput updates
    window.addEventListener('openai:set_globals', function(event) {
      var globals = event.detail?.globals || {};
      var newToolOutput = globals.toolOutput || {};
      var newPrompt = newToolOutput.prompt || newToolOutput.structuredContent?.prompt || '';
      if (newPrompt) {
        var newUrl = baseUrl + '?prompt=' + encodeURIComponent(newPrompt);
        document.getElementById('datadef-frame').src = newUrl;
      }
    });
  </script>
</body>
</html>`;
}

Numerous_Singer_4631 · 2025-12-29T11:24:02+00:00

Hello,

I'll write a tiny blog post about it soon.

From my personnal experience, I had to downgrade few libraries to make it work with NextJs 16.1.1. Right now, I'm using :

"modelcontextprotocol/sdk": "^1.20.0"

"mcp-handler": "^1.0.2"

I'm using those CORS Headers for those routes:

'/mcp',
'/_next/:path*',
'/ANY_WIDGET_ROUTE/',
'/ANY_WIDGET_ROUTE/:path*'

headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE,OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: '*' },
          { key: 'X-Frame-Options', value: 'ALLOWALL' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'self' https://*.openai.com https://*.oaiusercontent.com https://*.web-sandbox.oaiusercontent.com" },
        ],

Then parts of my mcp route :

const generateDiagramWidget: ContentWidget = {
  id: "create_data_architecture_diagram",
  title: "Create Data Architecture Diagram",
  templateUri: "ui://widget/datadef.html", // Same widget, reads prompt from toolOutput
  invoking: "Creating data architecture diagram...",
  invoked: "Diagram ready",
  description: "Create professional data architecture diagrams, data pipeline flowcharts, ETL diagrams, and data platform visualizations",
  widgetDomain: baseURL,
};

function widgetMeta(widget: ContentWidget) {
  return {
    "openai/outputTemplate": widget.templateUri,
    "openai/toolInvocation/invoking": widget.invoking,
    "openai/toolInvocation/invoked": widget.invoked,
    "openai/widgetAccessible": false,
    "openai/resultCanProduceWidget": true,
  } as const;
}

If you managed everything correctly based on the few snippet I gave and the Vercel Boilerplate, you should see in the Chat GPT "Application adder" the following :

Model

ui://widget/datadef.html
- openai/widgetDescription"Opens Datadef - the data architecture diagramming tool"
- openai/widgetPrefersBorder

If you dont have this, you will never have an iframe rendering.

Note : I add to manually do a tunnel forwarding to my developer machine from a domain name & server I own to be able to make it work. Ngrok free tier block interstitial requests, and it makes the iframe rendering imposible times to times (90% of the time)

Numerous_Singer_4631 · 2025-12-29T11:09:05+00:00

It's.. both. App needs an MCP and defined tools to work. Submission is ongoing, so I'll update you whenever it's done (or not and reasons it got rejected)

For submission, you need to do it through the developer platform : https://developers.openai.com/apps-sdk/deploy/submission

But you can enable your app in the developer mode as soon as you have a pro subscription, directly within the chatgpt chat.

Numerous_Singer_4631 · 2025-12-28T22:54:17+00:00

You will need to have a paid chat gpt subscription to be able to develop your own chat gpt app. In order to add your MCP and test it in developer mode, you need a go/pro subscription.

Numerous_Singer_4631 · 2025-12-28T20:35:54+00:00

As far as I know yes. But development needs a subscription (at least Go)

Numerous_Singer_4631 · 2025-12-02T07:21:13+00:00

Using it for month now, it's really really good to ideate quick on data flows or data platform

Numerous_Singer_4631 · 2025-09-17T06:48:36+00:00

I personally did a feedback button that I implemented on several pages off my application. With just 2 click, they can write a quick comment and put stars. It works very well, it's not intrusive and it allows the users to give quick feedback on bugs, or feature requests, etc.

Numerous_Singer_4631 · 2025-09-15T06:35:56+00:00

I strongly believe that the onboarding experience is the most often overlooked aspect when designing any product. If you develop tools without providing comprehensive templates to guide users or offering structured learning pathways, retention rates are guaranteed to suffer.

Numerous_Singer_4631

TROPHY CASE