The new Konnect Dev Portal Toolkit extension for Visual Studio Code gives you a live, portal-accurate preview of your content right beside the file you are editing. You watch a page take shape exactly as it will appear to your developers, as you type, without ever leaving your local editor.
Konnect has always let you preview content in the Konnect web application, rendered in your portal's real context before you publish. The extension brings that same experience out of your browser, onto your local machine in VS Code. From there, it takes the idea a step further. Pair the extension with [the Konnect MCP server](https://developer.konghq.com/konnect-platform/konnect-mcp/)the Konnect MCP server and you can hand the same author-and-preview loop to an AI agent that builds, brands, validates, and visually verifies portal content on its own. The two work together or entirely on their own: the extension gives you local previews in VS Code, the Konnect MCP gives an agent the same author-and-preview capabilities, and neither one depends on the other.
This post walks through what the extension does, how to set it up, and how the Konnect MCP server turns local previews into a full agent-driven authoring workflow.
The Konnect Dev Portal Toolkit is a free extension published by Kong Inc. on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=konghq.vscode-konnect-dev-portal-toolkit)Visual Studio Code Marketplace (ID konghq.vscode-konnect-dev-portal-toolkit) and on Open VSX.
[Konnect Developer Portals](https://konghq.com/products/kong-konnect/features/developer-portal)Konnect Developer Portals are how teams publish API documentation, guides, and other content to the developers who consume their APIs. Portal pages are authored in MDC (Markdown Components), an extension of Markdown that lets you embed and configure rich components inside otherwise plain content. MDC is what makes a portal page more than a wall of text, and it is also the part that is hardest to get right without seeing it rendered. The set of available components, along with the portal customization guide, lives in the Konnect Dev Portal documentation at [portaldocs.konghq.com](https://portaldocs.konghq.com/)portaldocs.konghq.com.
That focus on portal content carries through to how the extension behaves. It activates only when you open a .md or .mdc file, so it stays out of your way until you are actually working on portal content.
Open a portal content file, trigger the preview, and a panel opens beside your editor. From there it follows along with your work, keeping pace as you type and showing the page in its current state. There is no publish step in between, and no separate browser tab to keep refreshing.
What makes this preview genuinely useful, rather than merely convenient, is that it is not a generic Markdown renderer. Your content renders inside an embedded view of your selected portal, in the real portal context, so the styling matches your portal and the components render the way they will once published. This is the difference between guessing how something will look and knowing.
A portal holds two kinds of content, and the extension previews both. (For more on how portals structure content, see [pages and content](https://developer.konghq.com/dev-portal/pages-and-content/)pages and content in the Konnect documentation.)
pages by default) and can be nested in subdirectories. The preview derives the page path from the file path, so pages/getting-started/overview.md previews as /getting-started/overview, and pages/home.md previews as the portal root, /. The result is that you preview a page exactly as it will appear at its real location in the portal.snippets by default) and use a flat structure, with no subdirectories. They are reusable fragments that pages pull in, and to make them render correctly in context, the extension can automatically inject all snippets into the preview. This behavior is controlled by kong.konnect.devPortal.injectSnippets and is on by default, so a page that references a snippet shows that snippet rendered rather than missing.There are three ways to open the preview, so it fits whatever you happen to be doing:
And when you want to force a fresh render, a companion Refresh Portal Preview command is there to do it.
Getting to that first preview is a short sequence of one-time steps.
kpat_. Use a token from the Konnect organization that owns the Dev Portal you want to preview. Run Configure Konnect Personal Access Token (PAT) and paste your token. It is stored through VS Code SecretStorage, which uses the operating system keychain, not in plain text in your settings. If you ever need to clear your credentials, Delete Access Token removes the token and the stored portal selection. [See here for instructions on creating a Konnect PAT.](https://developer.konghq.com/konnect-api/#personal-access-tokens)See here for instructions on creating a Konnect PAT.pages and snippets directory names, set kong.konnect.devPortal.pagesDirectory and kong.konnect.devPortal.snippetsDirectory to match your layout.Nuxt.mdc) extension for proper syntax highlighting, completions, and formatting while you author MDC. When you have a portal selected, the Konnect Dev Portal Toolkit can sync settings so that Comark offers completions backed by your portal's actual component metadata. That means the component suggestions you see while typing reflect what your portal really supports.kongctl is not available, the extension falls back to the API, so the CLI is an enhancement rather than a requirement.A few additional settings round out the experience, all under the kong.konnect.devPortal.* namespace: autoOpenPreview, readyTimeout, debug, and showMDCRecommendation, along with the kong.konnect.kongctl.* settings for the CLI path and timeout.
So far, everything keeps a human in the loop, which is exactly what you want when you are hand-authoring content and reviewing it as you go. But a growing amount of work now happens through coding agents, and the Konnect MCP server lets an agent take part in that same loop.
The Konnect MCP is a server you connect from an MCP-compatible client, such as Claude, Cursor, or Copilot, using a Konnect PAT. Connection and setup instructions live in its [documentation](https://developer.konghq.com/konnect-platform/konnect-mcp/)documentation, so this post focuses instead on what it unlocks once connected.
The short version is that your agent stops guessing at MDC from training data and starts asking the portal what is true. That matters for more than page copy: the same access lets an agent help brand your developer portal, apply customizations, and build page content that stays consistent with your design system.
Note: The Konnect MCP server can perform actions against the Konnect API using the credentials you provide. Depending on the permissions of those credentials, this may include modifying or deleting resources. For safety, use credentials with the minimum required permissions and review any AI-suggested actions before executing them.
To make all of that reliable, the Konnect MCP documents a recommended sequence for an agent to follow, and that sequence is what keeps the output correct and on-brand:
Steps 3 through 6 are what make this useful for branding and customization, not just copywriting. Because the design tokens come from the portal's theme, an agent can style content with the right colors, spacing, and typography rather than hardcoding values that drift from your brand. Components such as a page hero or a full-width page section can be built to match the portal's look from the start, so a new page reads as part of the portal rather than something pasted in.
The final step in that sequence is where the loop closes. Given MDC content and a target portal, the Konnect MCP generates a live preview URL that renders the content fully styled in the real portal context. Generating it requires a Konnect PAT configured for the MCP client. The URL is temporary and single-use: it is consumed on first visit and then expires. Because of that, a capable agent loads it deliberately.
It sets the browser viewport before navigating, so the page loads once at the intended width, and it waits for full hydration before taking a screenshot and comparing the result against the target. To test responsive behavior, it resizes the viewport in place rather than requesting another URL, since the existing page is already loaded, and it only requests a new preview URL when the MDC content itself changes. If the comparison shows something off, it adjusts the MDC, formats and validates again, generates a fresh URL, and repeats.
Navigating the URL, capturing screenshots, and comparing them does require a browser automation tool. [Playwright MCP](https://github.com/microsoft/playwright-mcp)Playwright MCP and [Vercel's agent-browser](https://github.com/vercel-labs/agent-browser)Vercel's agent-browser are two examples suitable for agents. And if no browser tool is available, the agent can simply return the preview URL for a user to open manually.
The Konnect MCP documentation calls out three concrete use cases that this loop supports:
The first of these is the most striking in practice: point an agent at a design you want to match and let it work toward that target. A prompt to start it off might look like this:
I'd like to create a new Dev Portal page that matches the visual layout, styling, branding, and look and feel of this URL:
<INSERT_URL_HERE>. The page should be built using the Konnect Developer Portal's MDC components and design system, ensuring that it is responsive and accessible across different devices and screen sizes. Pay very close attention to the font treatments, layouts, backgrounds and colors, and both the desktop and mobile viewports.Use the MCP server to understand the MDC language, available components, and how you can customize them, then iterate and do visual verification with the preview URL to make sure the rendered page closely matches the source URL above. You can use Agent Browser, Playwright MCP, or another browser tool alongside the preview URL to do visual comparisons and help you iterate to a final version that is as close as possible to the source URL.
From there the agent follows the sequence above. It learns the syntax and components, builds the page with your design tokens, validates the result, generates a preview URL, screenshots it, compares it against the source, and refines until the two line up.
All of this complements the extension's local preview rather than replacing it. The extension is the human-in-the-loop tool; the Konnect MCP is the agent-facing surface for the same work, producing preview URLs a person can review afterward. Both render content in the real portal context rather than approximating it.
When the content is ready, you publish it the way you manage the rest of your portal: pages, snippets, and customizations can be kept in version control as declarative configuration and published through your existing CI/CD pipeline, such as where [kongctl](https://developer.konghq.com/kongctl/)kongctl applies the changes to Konnect with its plan, apply, and sync commands.
The common thread is closing the distance between writing content and knowing it is right.
For one person at a keyboard, this means faster authoring and fewer publish-and-check cycles. You see components render as you type, with your portal's styling, instead of publishing only to discover a mistake. And because component completions and validation are backed by your portal's real metadata, you spend less time chasing prop names and syntax errors.
At team scale, branding and customization stay consistent because design tokens come from the portal theme rather than being copied by hand, so heroes, full-width sections, and ordinary copy all sit on the same visual system. Reviews get easier because a preview URL is a real, styled page anyone can open, not a diff that reviewers have to imagine rendered. And because the Konnect MCP follows a documented workflow, content and customization work can be built into automated pipelines that author, validate, preview, and verify without a person driving each step.
Install the Konnect Dev Portal Toolkit from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=konghq.vscode-konnect-dev-portal-toolkit)VS Code Marketplace or from Open VSX, configure your PAT, select a portal and region, and open a content file to see the preview. For the available MDC components and the portal customization guide, see [portaldocs.konghq.com](https://portaldocs.konghq.com/)portaldocs.konghq.com. To connect an agent to the Konnect MCP, see the docs at [developer.konghq.com/konnect-platform/konnect-mcp](https://developer.konghq.com/konnect-platform/konnect-mcp/)developer.konghq.com/konnect-platform/konnect-mcp.
**1. What is the Konnect Dev Portal Toolkit?**
The Konnect Dev Portal Toolkit is a free VS Code extension published by Kong that provides real-time, portal-accurate previews of MDC (Markdown Components) content. It renders pages using your actual portal styling and components, so you see exactly how content will appear to developers before you publish.
**2. What is MDC and why does it matter for developer portals?**
MDC (Markdown Components) extends standard Markdown by letting you embed and configure rich, interactive components inside otherwise plain content. It is the authoring format for Konnect Dev Portal pages, enabling elements like heroes, tabbed sections, and API reference blocks that go beyond what basic Markdown supports.
**3. How do I set up the Konnect Dev Portal Toolkit in VS Code?**
Install the extension from the VS Code Marketplace or Open VSX, configure a Konnect Personal Access Token (PAT), and select the portal you want to preview against. Optionally set custom page and snippet directory paths if your repository uses a non-default layout. The extension activates only on `.md` or `.mdc` files.
**4. What is the Konnect MCP server and how does it relate to the extension?**
The Konnect MCP server is a separate tool that gives AI agents access to your portal's components, design tokens, and live preview URLs. While the VS Code extension provides local previews for human authors, the MCP server enables agent-driven authoring workflows — letting AI build, brand, validate, and visually verify portal content autonomously.
**5. Can AI agents author Konnect Dev Portal content?**
Yes. When connected to the Konnect MCP server, an AI agent can read component metadata, apply your portal's design tokens, author MDC content, validate syntax, and generate live preview URLs to visually verify the result. The agent follows a documented workflow that keeps output consistent with your portal's branding and component catalog.
**6. How does the live preview URL work for agents?**
The Konnect MCP server generates a temporary, single-use preview URL that renders MDC content in the real portal context. A capable agent loads this URL in a browser tool, captures a screenshot, and compares it against the target design. If adjustments are needed, the agent regenerates the URL with updated MDC content and iterates until the output matches.
**7. Do the VS Code extension and Konnect MCP server depend on each other?**
No. The extension and the MCP server work together or entirely on their own. The extension gives human authors local previews in VS Code. The MCP server gives AI agents the same author-and-preview capabilities. Neither one requires the other to function.
**8. How do I publish portal content after previewing it locally?**
Content is published through your existing CI/CD pipeline using kongctl, Kong's declarative CLI for Konnect. Pages, snippets, and portal customizations are kept in version control as declarative configuration, and kongctl applies changes to Konnect with its plan, apply, and sync commands.
kongctl was built with the modern development stack in mind. Developers working in a terminal want the ability to query systems quickly to verify state, behaviors, and capabilities. Coding harnesses need well defined tools and accurate schemas for
What You'll Build To explore the new integration, I'll build a realistic API platform workflow using Konnect, Kong Gateway, and Insomnia. By the end of this tutorial, I'll have: A Konnect Control Plane (KongAir Dev) A local Kong Gateway Data Pl
Quality is at the core of every product we build. To move fast without compromising on quality, we rely on an extensive set of test suites that tell us quickly whether a change has caused a regression. Those suites are large enough that a single ful
Built on top of Kong API Gateway, the Kong AI Gateway is designed to address key challenges in enterprise AI adoption. Modern AI applications rarely rely on a single model; instead, they orchestrate multiple GenAI providers, agent frameworks, Age
Bridging the API (and API access) gap between AI coding tools, agents, and the APIs that they “eat” Data might be the fuel for AI. But APIs are the proper way to package that “fuel” as AI-ready “food” is through the API. AI coding tools can do a lot
The new Kong Konnect Dev Portal is now generally available for all users! In March, we announced the public beta version of our reimagined Dev Portal. We set out to fully address the needs of the modern API consumer as well as the needs of the moder
APIs are the lifeblood of disruption . . . when leveraged correctly. The best, most disruptive businesses are able to harness API growth as a strategic opportunity. But how? With an API platform that drives innovation, faster delivery, and top-tier