AI-Assisted Development

SWAN now supports AI-assisted development through GitHub Copilot and other AI coding assistants. Build UI components faster with intelligent suggestions that follow SWAN standards.

Overview

We've got multiple AI tools to help you work with SWAN more efficiently:

• SWAN Skill — Teaches AI how to use SWAN components and tokens correctly
• SWAN MCP Server — Provides real-time access to component APIs, props, and usage examples

These tools help AI understand SWAN's components, design tokens, migration paths, and best practices, so you get suggestions when building UI.

We recommend using both the SWAN Skill and the SWAN MCP Server together. The MCP Server alone gives AI real-time access to SWAN data, but without the SWAN Skill, the AI may lack the broader judgment needed to suggest the right approach. For example, if a component doesn't natively support a certain behaviour, an AI without the Skill may suggest workarounds like overriding internal tokens — which is not advised. The SWAN Skill fills in that context, helping AI understand not just what SWAN provides, but how it should and shouldn't be used. Using both together gives you more reliable, standards-aligned suggestions.

What you can do

With AI assistance, you can:

• Discover the right SWAN components for your UI
• Learn about deprecated APIs and recommended alternatives
• Get suggestions for appropriate SWAN components and style keys

Getting Started

For improved AI suggestions (SWAN Skill)

SWAN Skill enhances AI suggestions by providing contextual understanding of SWAN patterns and usage.

• Install skills via vconfig
• Follow the instructions in Add Vista Enterprise Skills
• View the SWAN Skill documentation to understand its capabilities and supported features.
  

For enabling real-time SWAN context (MCP Server)

The SWAN MCP Server gives AI assistants direct access to SWAN’s source of truth. It provides real-time component APIs, props, and examples

Explore SWAN MCP Server

You can integrate the SWAN MCP Server with AI tools such as:

OpenCodeGitHub Copilot

Add the following entry to your ~/.config/opencode/opencode.json under the mcp block:

CopyShare

{
  "swan": {
    "type": "local",
    "command": ["npx", "-y", "@vp/swancp-poc@latest"]
  }
}

{ "swan": { "type": "local", "command": ["npx", "-y", "@vp/swancp-poc@latest"] } }

Add the following to your Copilot MCP configuration:

CopyShare

{
  "servers": {
    "swan": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@vp/swancp-poc@latest"
      ]
    }
  }
}

{ "servers": { "swan": { "type": "stdio", "command": "npx", "args": [ "@vp/swancp-poc@latest" ] } } }

For help locating your MCP configuration file, refer to the GitHub Copilot MCP documentation.

Best Practices

When working with AI assistants on SWAN projects:

• Use both the SWAN Skill and MCP Server: Together, they give AI the full picture: real-time component data and the contextual knowledge of how SWAN should be used correctly.
• Reference SWAN explicitly: Say "using SWAN" to ensure the skill activates
• Review generated code: AI suggestions should follow SWAN patterns, but always verify against our documentation