SuperDesign

https://github.com/superdesigndev/superdesign
Admin
SuperDesign is an open-source AI design agent for your IDE that generates UI mockups, components,...
Tokens:30,802
Snippets:412
Trust Score:7.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Publishing Tools

Source: https://github.com/superdesigndev/superdesign/blob/main/deploy_note.md

Installs the necessary command-line tools for publishing VS Code extensions.

```bash
npm install -g @vscode/vsce ovsx
```

--------------------------------

### Initialize CanvasConfig example

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/webview-types.md

Demonstrates a full implementation of the CanvasConfig interface.

```typescript
const config: CanvasConfig = {
    frameSize: { width: 500, height: 400 },
    gridSpacing: 40,
    framesPerRow: 3,
    minZoom: 0.5,
    maxZoom: 2,
    responsive: {
        enableScaling: true,
        minFrameSize: { width: 200, height: 150 },
        maxFrameSize: { width: 1000, height: 800 },
        scaleWithZoom: true
    },
    viewports: {
        desktop: { width: 1280, height: 720 },
        mobile: { width: 375, height: 667 },
        tablet: { width: 768, height: 1024 }
    },
    hierarchy: {
        horizontalSpacing: 100,
        verticalSpacing: 60,
        connectionLineWidth: 2,
        connectionLineColor: '#999999',
        showConnections: true
    }
};
```

--------------------------------

### Execute Bash Commands

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Examples of executing various shell commands including package installation, build tasks, and setting timeouts.

```typescript
// Run npm command
await tool.execute({
    command: 'npm install',
    directory: '.'
});

// Run build
await tool.execute({
    command: 'npm run build',
    description: 'Build the project'
});

// With timeout
await tool.execute({
    command: 'npm test',
    timeout: 60000  // 60 seconds
});
```

--------------------------------

### Install and configure ClaudeCodeProvider

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Commands to install the Claude Code binary and the required VS Code configuration snippet.

```bash
npm install -g @anthropic-ai/claude-code
# or
npm install @anthropic-ai/claude-code
```

```json
{
    "superdesign.claudeCodePath": "claude"
}
```

--------------------------------

### Configure Multiple Providers

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Example of defining multiple providers in the configuration file.

```json
{
    "superdesign.llmProvider": "claude-api",
    "superdesign.anthropicApiKey": "sk-ant-...",
    "superdesign.openaiApiKey": "sk-...",
    "superdesign.openrouterApiKey": "sk-...",
    "superdesign.claudeCodePath": "claude",
    "superdesign.aiModelProvider": "openai",
    "superdesign.aiModel": "gpt-4o"
}
```

--------------------------------

### Install Extension Locally for Testing

Source: https://github.com/superdesigndev/superdesign/blob/main/deploy_note.md

Use this command to test a locally built .vsix file before publishing. Ensure you have Node.js 20+ installed.

```bash
code --install-extension file.vsix
```

--------------------------------

### Execute Edit Tool Examples

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Examples demonstrating how to use the tool to update component props or modify HTML elements.

```typescript
// Update component prop
await tool.execute({
    file_path: 'src/App.tsx',
    old_string: 'const theme = "light"',
    new_string: 'const theme = "dark"'
});

// Replace HTML element
await tool.execute({
    file_path: 'design.html',
    old_string: '<button>Click me</button>',
    new_string: '<button class="primary">Click me</button>'
});
```

--------------------------------

### Install Claude Code CLI

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Commands to install the Claude Code binary globally or locally via npm.

```bash
npm install -g @anthropic-ai/claude-code
# or
npm install @anthropic-ai/claude-code
```

--------------------------------

### Execute Read Tool Examples

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Demonstrates various ways to invoke the read tool, including reading entire files, specific line ranges, or design assets.

```typescript
// Read entire file
const result = await tool.execute({
    filePath: 'src/App.tsx'
});

// Read specific lines
const result = await tool.execute({
    filePath: 'package.json',
    startLine: 10,
    lineCount: 20
});

// Read design file
const result = await tool.execute({
    filePath: '.superdesign/design_iterations/login_1.html'
});
```

--------------------------------

### Initialize DesignFile Object

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/webview-types.md

Example instantiation of a DesignFile object with required properties.

```typescript
const design: DesignFile = {
    name: "login_1.html",
    path: "/workspace/.superdesign/design_iterations/login_1.html",
    content: "<html>...</html>",
    size: 2048,
    modified: new Date(),
    fileType: "html",
    version: "v1",
    generation: 0,
    branchIndex: 0,
    children: ["login_1_1.html", "login_1_2.html"]
};
```

--------------------------------

### Execute Write Operations

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Examples demonstrating file creation and content updates using the tool execution method.

```typescript
// Create new HTML design file
await tool.execute({
    file_path: '.superdesign/design_iterations/navbar_1.html',
    content: '<html>...</html>'
});

// Write theme CSS
await tool.execute({
    file_path: '.superdesign/design_iterations/theme_1.css',
    content: ':root { --primary: #000; }'
});

// Update existing file
await tool.execute({
    file_path: 'src/App.tsx',
    content: 'new content here'
});
```

--------------------------------

### Execute Theme Generation

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Example of invoking the theme generation tool with required design parameters and CSS content.

```typescript
await tool.execute({
    theme_name: 'Neo-Brutalism 90s',
    reasoning_reference: 'Bold, square corners, high contrast, inspired by 90s web design',
    cssSheet: ':root { --primary: oklch(0.6489 0.2370 26.9728); ... }',
    cssFilePath: '.superdesign/design_iterations/theme_90s.css'
});
```

--------------------------------

### Example DesignFilesLoadedMessage Payload

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/webview-types.md

Example object structure for the designFilesLoaded command.

```typescript
{
    command: 'designFilesLoaded',
    data: {
        files: [
            { name: 'design1.html', path: '...', ... },
            { name: 'design2.html', path: '...', ... }
        ]
    }
}
```

--------------------------------

### Glob Tool Usage Examples

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Common patterns for executing file searches using the Glob tool.

```typescript
// Find all TypeScript files
await tool.execute({
    pattern: '**/*.ts'
});

// Find designs
await tool.execute({
    pattern: '.superdesign/design_iterations/**/*.html'
});

// Find with ignore
await tool.execute({
    pattern: '**/*.tsx',
    ignore: 'node_modules/**'
});
```

--------------------------------

### Get or create a provider instance

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Initializes and returns a provider instance, optionally based on a specific type.

```typescript
async getProvider(providerType?: LLMProviderType): Promise<LLMProvider>
```

```typescript
const factory = LLMProviderFactory.getInstance(outputChannel);
const provider = await factory.getProvider(LLMProviderType.CLAUDE_API);
```

--------------------------------

### Design Export Structure

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Example directory structure for exported design iterations and themes.

```text
.superdesign/design_iterations/
├── login_1.html              # Original
├── login_1_1.html            # First iteration
├── login_2.html              # Alternative approach
└── theme_1.css               # Generated theme
```

--------------------------------

### Grep Tool Usage Examples

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Common patterns for executing text content searches using the Grep tool.

```typescript
// Find function declarations
await tool.execute({
    pattern: 'export function \\w+',
    file_type: 'ts'
});

// Find theme colors
await tool.execute({
    pattern: '--primary:.*',
    path: '.superdesign/design_iterations'
});
```

--------------------------------

### Log Level Usage Examples

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/logger-service.md

Demonstrates the appropriate use of DEBUG, INFO, WARN, and ERROR log levels for different operational scenarios.

```typescript
Logger.debug(`File path resolved to: ${absolutePath}`);
Logger.debug(`Provider type: ${providerType}`);
```

```typescript
Logger.info('Extension activated');
Logger.info('Design file created successfully');
```

```typescript
Logger.warn('API key not configured, using fallback');
Logger.warn('File not found, creating new one');
```

```typescript
Logger.error('API request failed: 401 Unauthorized');
Logger.error(`Exception during query: ${error.message}`);
```

--------------------------------

### Configure Local Claude Code Binary

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Configuration for using a local Claude Code binary installation.

```json
{
    "superdesign.llmProvider": "claude-code",
    "superdesign.claudeCodePath": "claude",
    "superdesign.claudeCodeModelId": "claude-sonnet-4-20250514",
    "superdesign.claudeCodeThinkingBudget": 100000
}
```

--------------------------------

### Integrate Logger in CustomAgentService

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/logger-service.md

Implementation example for using the Logger service within a class implementing AgentService.

```typescript
import { Logger } from './services/logger';

export class CustomAgentService implements AgentService {
    private outputChannel: vscode.OutputChannel;
    
    constructor(outputChannel: vscode.OutputChannel) {
        this.outputChannel = outputChannel;
        Logger.info('CustomAgentService constructor called');
    }
    
    async query(prompt: string) {
        Logger.debug(`Executing query: ${prompt}`);
        
        try {
            const result = await this.executeQuery(prompt);
            Logger.info('Query executed successfully');
            return result;
        } catch (error) {
            Logger.error(`Query failed: ${error}`, true);
            throw error;
        }
    }
}
```

--------------------------------

### Log Output Format Example

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/logger-service.md

Standardized log message structure including timestamp, level, and message content.

```text
[2026-08-19T10:30:45.123Z] [INFO] Superdesign extension is now active!
[2026-08-19T10:30:46.456Z] [DEBUG] Creating CustomAgentService...
[2026-08-19T10:30:47.789Z] [WARN] No workspace folder found
[2026-08-19T10:30:48.012Z] [ERROR] Failed to initialize provider: API key missing
```

--------------------------------

### Integrate Logger in Provider Classes

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/logger-service.md

Implementation example for using the Logger service within an LLM provider class.

```typescript
import { Logger } from '../services/logger';

export class ClaudeApiProvider extends LLMProvider {
    async initialize(): Promise<void> {
        Logger.info('Starting Claude API provider initialization...');
        
        try {
            // ... initialization code
            Logger.info('Claude API provider initialized');
        } catch (error) {
            Logger.error(`Initialization failed: ${error}`);
            throw error;
        }
    }
}
```

--------------------------------

### Configure OpenRouter API Key

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Sets the required API key for OpenRouter model access. Must start with 'sk-'.

```json
{
    "superdesign.openrouterApiKey": "sk-..."
}
```

--------------------------------

### Configure OpenAI API Key

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Sets the required API key for OpenAI model access. Must start with 'sk-'.

```json
{
    "superdesign.openaiApiKey": "sk-..."
}
```

--------------------------------

### Configure and initialize Superdesign

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Follow these steps to set up the API provider, initialize the project, and launch the UI components.

```bash
# 1. Configure an API provider
Cmd+Shift+P → Superdesign: Configure Anthropic API Key

# 2. Initialize project
Cmd+Shift+P → Superdesign: Initialize Superdesign

# 3. Open chat
Cmd+Shift+P → Superdesign: Show Chat Sidebar

# 4. Open canvas (optional)
Cmd+Shift+P → Superdesign: Open Canvas View

# 5. Create designs
Type: "Design a modern login form"
```

--------------------------------

### Initialize SuperDesign Project

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Command to set up the required directory structure and configuration files.

```text
Cmd+Shift+P → Superdesign: Initialize Superdesign
```

--------------------------------

### Build from source

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Use these commands to compile the project locally.

```bash
npm install && npm run compile
```

--------------------------------

### Build and Publish Extension (All-in-One)

Source: https://github.com/superdesigndev/superdesign/blob/main/deploy_note.md

A single command to perform the build, VS Code Marketplace publish, and Open VSX Registry publish steps sequentially.

```bash
npm run package && \
npx vsce publish --pat YOUR_VSCE_TOKEN && \
npx ovsx publish -p YOUR_OVSX_TOKEN
```

--------------------------------

### Get comprehensive provider status

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Retrieves the status of all configured providers.

```typescript
async getProviderStatus(): Promise<{
    current: LLMProviderType;
    providers: Array<{
        type: LLMProviderType;
        name: string;
        status: 'ready' | 'error' | 'not_configured';
        error?: string;
    }>;
}>
```

```typescript
const status = await factory.getProviderStatus();
console.log(`Current: ${status.current}`);
status.providers.forEach(p => {
    console.log(`${p.name}: ${p.status}`);
});
```

--------------------------------

### Build and Publish Extension

Source: https://github.com/superdesigndev/superdesign/blob/main/deploy_note.md

Commands to build the extension, publish to VS Code Marketplace, and publish to Open VSX Registry.

```bash
# Build the extension
npm run package

# Publish to VS Code Marketplace
npx vsce publish --pat YOUR_VSCE_TOKEN

# Publish to Open VSX Registry
npx ovsx publish -p YOUR_OVSX_TOKEN
```

--------------------------------

### Development Build Commands

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Standard npm scripts for building and packaging the extension.

```bash
# Install dependencies
npm install

# Type check
npm run check-types

# Lint
npm run lint

# Build
npm run compile

# Package for release
npm run package
```

--------------------------------

### Get current provider

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Retrieves the currently active provider instance.

```typescript
getCurrentProvider(): LLMProvider | null
```

--------------------------------

### Get singleton factory instance

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Retrieves the singleton instance of the LLMProviderFactory.

```typescript
static getInstance(outputChannel: vscode.OutputChannel): LLMProviderFactory
```

```typescript
const factory = LLMProviderFactory.getInstance(outputChannel);
```

--------------------------------

### Initialize SuperDesign Project

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/commands-reference.md

Registers the command to set up the project directory structure and configuration files. Requires an active workspace.

```typescript
vscode.commands.registerCommand('superdesign.initializeProject', async () => {
    await initializeSuperdesignProject();
});
```

--------------------------------

### Execute LS Directory Listing

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Demonstrates basic directory listing and recursive listing using the LS tool.

```typescript
// List design iterations
await tool.execute({
    path: '.superdesign/design_iterations'
});

// List recursively
await tool.execute({
    path: 'src',
    recursive: true
});
```

--------------------------------

### Initialize and query ClaudeCodeProvider

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Instantiate the local binary provider and execute a query with thinking budget and working directory settings.

```typescript
const provider = new ClaudeCodeProvider(outputChannel);
await provider.waitForInitialization();

const messages = await provider.query(
    "Create a responsive navbar",
    {
        thinkingBudgetTokens: 50000,
        cwd: '/workspace/.superdesign'
    }
);
```

--------------------------------

### Project File Size Summary

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/MANIFEST.md

A breakdown of documentation files and their respective sizes in the project.

```text
README.md                9.2 KB  - Index and quick reference
overview.md              8.1 KB  - Architecture overview
agentservice.md         12.4 KB  - Agent service API
llmproviders.md         14.2 KB  - Provider system
tools-reference.md      18.5 KB  - Tools and implementations
configuration.md        13.8 KB  - Settings reference
logger-service.md        9.6 KB  - Logging service
commands-reference.md   12.1 KB  - Commands API
webview-types.md        11.2 KB  - Canvas and webview types
integration-guide.md    15.0 KB  - Integration patterns

Total: ~124 KB
```

--------------------------------

### Get Output Channel

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/logger-service.md

Method signature and usage for accessing the underlying VS Code output channel.

```typescript
public static getOutputChannel(): vscode.OutputChannel
```

```typescript
const outputChannel = Logger.getOutputChannel();
const service = new CustomAgentService(outputChannel);
```

--------------------------------

### createBashTool

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

The createBashTool function initializes a tool instance for executing shell commands. It supports parameters for command configuration, working directory, timeouts, and environment variables.

```APIDOC
## createBashTool

### Description
Executes shell commands within the SuperDesign workspace. This tool is designed for running package managers, build tools, git operations, and file system tasks.

### Parameters
- **command** (string) - Required - Shell command to execute
- **description** (string) - Optional - Brief description of command
- **directory** (string) - Optional - Working directory (relative to root), defaults to workspace
- **timeout** (number) - Optional - Timeout in milliseconds, defaults to 30000
- **capture_output** (boolean) - Optional - Capture stdout/stderr, defaults to true
- **env** (object) - Optional - Environment variables to set

### Return Type
- **command** (string) - Command executed
- **directory** (string) - Working directory used
- **stdout** (string) - Standard output
- **stderr** (string) - Standard error
- **exitCode** (number | null) - Exit code
- **signal** (string | null) - Signal if terminated
- **duration** (number) - Execution time (ms)
- **timedOut** (boolean) - Command timed out
- **processId** (number) - Process ID

### Usage Example
```typescript
await tool.execute({
    command: 'npm install',
    directory: '.'
});
```
```

--------------------------------

### Switch LLM Providers at Runtime

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Demonstrates how to initialize the provider factory and toggle between Claude API and Claude Code providers. Always verify provider status before executing queries to ensure readiness.

```typescript
// Switch providers at runtime
const factory = LLMProviderFactory.getInstance(outputChannel);

// Use Claude API
await factory.switchProvider(LLMProviderType.CLAUDE_API);
const apiProvider = await factory.getProvider();

// Or use Claude Code
await factory.switchProvider(LLMProviderType.CLAUDE_CODE);
const binaryProvider = await factory.getProvider();

// Check status before querying
const status = await factory.getProviderStatus();
if (status.current === 'claude-api' && status.providers[0].status !== 'ready') {
    console.error('Provider not ready:', status.providers[0].error);
}
```

--------------------------------

### View Project Directory Structure

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/overview.md

Displays the organization of source files, including providers, services, tools, and webview components.

```text
src/
├── extension.ts              # Main extension entry point
├── providers/                # LLM provider implementations
│   ├── llmProvider.ts        # Abstract base provider
│   ├── llmProviderFactory.ts # Factory for provider creation
│   ├── claudeApiProvider.ts  # Anthropic Claude API
│   └── claudeCodeProvider.ts # Local Claude Code binary
├── services/                 # Core business logic
│   ├── customAgentService.ts # Agent execution engine
│   ├── chatMessageService.ts # Chat state management
│   ├── claudeCodeService.ts  # Claude Code integration
│   └── logger.ts             # Logging utility
├── tools/                    # AI tool implementations
│   ├── read-tool.ts          # File reading
│   ├── write-tool.ts         # File writing
│   ├── edit-tool.ts          # Text editing
│   ├── bash-tool.ts          # Shell execution
│   ├── glob-tool.ts          # Pattern-based file search
│   ├── grep-tool.ts          # Text content search
│   ├── ls-tool.ts            # Directory listing
│   ├── theme-tool.ts         # Theme generation
│   ├── multiedit-tool.ts     # Batch editing
│   └── tool-utils.ts         # Shared tool utilities
├── types/                    # TypeScript interfaces
│   ├── agent.ts              # Agent service contracts
│   └── context.ts            # Execution context
└── webview/                  # UI components (React)
    ├── App.tsx               # Root webview component
    ├── components/           # React UI components
    ├── hooks/                # Custom React hooks
    └── types/                # Webview type definitions
```

--------------------------------

### Dual Publishing Workflow Steps

Source: https://github.com/superdesigndev/superdesign/blob/main/deploy_note.md

Execute these steps to publish updates to both SuperdesignDev and iganbold publishers, including versioning, committing, tagging, and reverting.

```bash
# 1. Publish to NEW publisher first (SuperdesignDev)
# - Update package.json version (e.g., 0.0.14)
npm run package && \
  npx vsce publish --pat YOUR_VSCE_TOKEN && \
  npx ovsx publish -p YOUR_OVSX_TOKEN

# 2. Prepare OLD publisher (iganbold)
# - Update to iganbold publisher
# - Change displayName to include (DEPRECATED)
# - Swap README with deprecation notice
# - Set version (e.g., 0.0.13)

# 3. Commit and tag for GitHub Actions
git add -A
git commit -m "Update deprecation version 0.0.X for iganbold publisher"
git tag v0.0.X
git push origin main && git push origin v0.0.X

# 4. Wait for GitHub Actions to complete
# Check: https://github.com/superdesigndev/superdesign/actions

# 5. Revert to SuperdesignDev
# - Restore README
# - Update package.json back to SuperdesignDev
# - Update extension.ts
git add -A
git commit -m "Revert to SuperdesignDev publisher for ongoing development"
git push origin main
```

--------------------------------

### Configure Anthropic API Key

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Set the required API key for the claude-api provider, which must start with 'sk-ant-'.

```json
{
    "superdesign.anthropicApiKey": "sk-ant-..."
}
```

--------------------------------

### Initialize and query ClaudeApiProvider

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Instantiate the provider and execute a query with specific tools and streaming callback.

```typescript
const provider = new ClaudeApiProvider(outputChannel);
await provider.waitForInitialization();

const messages = await provider.query(
    "Design a login form",
    {
        maxTurns: 10,
        allowedTools: ['write', 'read', 'generateTheme']
    },
    abortController,
    (msg) => console.log(msg)
);
```

--------------------------------

### superdesign.resetWelcome

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/commands-reference.md

Resets the welcome screen state, allowing it to be displayed again.

```APIDOC
## superdesign.resetWelcome

### Description
Reset the welcome screen to show again.

### Usage
Command Palette: Superdesign: Reset Welcome Screen
```

--------------------------------

### Configure Local LM Studio

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Configuration for connecting to a locally-hosted model via LM Studio.

```json
{
    "superdesign.aiModelProvider": "openai",
    "superdesign.openaiApiKey": "dummy-key",
    "superdesign.openaiUrl": "http://127.0.0.1:1234/v1",
    "superdesign.aiModel": "gpt-4-turbo"
}
```

--------------------------------

### Initialize CustomAgentService

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/agentservice.md

Instantiate the service by providing a VS Code output channel for logging.

```typescript
const outputChannel = vscode.window.createOutputChannel('Superdesign');
const service = new CustomAgentService(outputChannel);
```

--------------------------------

### Run Unit Tests

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Execute specific unit test suites for different components of the project.

```bash
npm run test:core       # Core components
npm run test:tools      # Tool functions
npm run test:read       # Read tool
npm run test:write-edit # Write and edit tools
npm run test:ls-grep-glob # File search tools
```

--------------------------------

### Debugging Procedures

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Instructions for debugging the extension and configuring log levels.

```bash
# Run in debug mode
F5 (or Debug → Start Debugging)

# View logs
View → Output → Select "Superdesign"

# Enable debug logging in code
Logger.setLevel(LogLevel.DEBUG);
```

--------------------------------

### LLMProviderFactory.getInstance

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Retrieves the singleton instance of the LLMProviderFactory.

```APIDOC
## static getInstance(outputChannel: vscode.OutputChannel)

### Description
Get singleton factory instance.

### Parameters
- **outputChannel** (vscode.OutputChannel) - Required - VS Code output channel

### Return
- **LLMProviderFactory** - Singleton instance
```

--------------------------------

### Add and Read Configuration

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Define a new configuration setting in package.json and retrieve its value using the VS Code workspace API.

```json
{
    "superdesign.mySetting": {
        "type": "string",
        "description": "My setting",
        "scope": "application"
    }
}
```

```typescript
const config = vscode.workspace.getConfiguration('superdesign');
const value = config.get<string>('mySetting');
```

--------------------------------

### Configure Extension Dependencies

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Add SuperDesign as a dependency in your package.json to ensure proper activation and extension availability.

```json
{
    "extHost": {
        "activationEvents": [
            "onCommand:superdesign.helloWorld"
        ],
        "extensionDependencies": [
            "SuperdesignDev.superdesign-official"
        ]
    }
}
```

--------------------------------

### Share .superdesign folder via Git

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Use version control to share design iterations across the team.

```bash
git add .superdesign/
git commit -m "Share design iterations"
```

--------------------------------

### Configure command context in package.json

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/commands-reference.md

Define command availability using the when clause to restrict execution based on workspace or configuration state.

```json
{
    "command": "superdesign.openCanvas",
    "when": "workspacePathIsOpen"
}
```

--------------------------------

### Configure Custom Keybindings

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/commands-reference.md

Define custom keyboard shortcuts for Superdesign commands by adding entries to the .vscode/keybindings.json file.

```json
[
    {
        "key": "cmd+shift+d",
        "command": "superdesign.openCanvas"
    },
    {
        "key": "ctrl+shift+d",
        "command": "superdesign.showChatSidebar"
    },
    {
        "key": "cmd+shift+l",
        "command": "superdesign.clearChat"
    }
]
```

--------------------------------

### Integrate CustomAgentService in VS Code Extension

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/agentservice.md

Demonstrates initializing the agent service, handling API key validation, and registering a command to process user design prompts.

```typescript
import * as vscode from 'vscode';
import { CustomAgentService } from './services/customAgentService';

export function activate(context: vscode.ExtensionContext) {
    const outputChannel = vscode.window.createOutputChannel('Superdesign');
    const agent = new CustomAgentService(outputChannel);

    // Check API key
    if (!agent.hasApiKey()) {
        vscode.window.showWarningMessage('Please configure API key');
        return;
    }

    // Execute query
    const disposable = vscode.commands.registerCommand('superdesign.design', async () => {
        const prompt = await vscode.window.showInputBox({
            prompt: 'Describe your design'
        });

        if (!prompt) return;

        try {
            const response = await agent.query(prompt);
            vscode.window.showInformationMessage('Design created!');
        } catch (error) {
            if (agent.isApiKeyAuthError(String(error))) {
                vscode.window.showErrorMessage('API key invalid');
            } else {
                vscode.window.showErrorMessage(`Error: ${error}`);
            }
        }
    });

    context.subscriptions.push(disposable);
}
```

--------------------------------

### superdesign.helloWorld

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/commands-reference.md

A test command used to verify that the SuperDesign extension is functioning correctly by displaying an information message.

```APIDOC
## superdesign.helloWorld

### Description
Test command to verify extension functionality. Displays an information message in VS Code.

### Usage
Command Palette: Superdesign: Hello World
```

--------------------------------

### Configure SuperDesign for Teams

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

JSON configuration settings for different team requirements and LLM providers.

```json
{
    "superdesign.llmProvider": "claude-api",
    "superdesign.anthropicApiKey": "sk-ant-...",
    "superdesign.aiModel": "claude-4-sonnet-20250514"
}
```

```json
{
    "superdesign.llmProvider": "claude-code",
    "superdesign.claudeCodePath": "claude",
    "superdesign.claudeCodeThinkingBudget": 100000
}
```

```json
{
    "superdesign.aiModelProvider": "openai",
    "superdesign.openaiUrl": "http://localhost:1234/v1",
    "superdesign.aiModel": "gpt-3.5-turbo"
}
```

--------------------------------

### Tool System Factory Structure

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Overview of available tool factories and their injection point.

```text
Tool Function (factory)
├── createReadTool()
├── createWriteTool()
├── createBashTool()
└── ... (others)

Injected into: CustomAgentService → LLM Query
```

--------------------------------

### Project Workspace Structure

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/overview.md

The directory layout created upon project initialization, including configuration folders and design iteration storage.

```text
workspace-root/
├── .superdesign/
│   ├── design_iterations/    # Generated design files (HTML/SVG)
│   │   ├── {design}_{n}.html # Design iterations
│   │   └── theme_*.css       # Generated theme files
│   └── moodboard/            # Uploaded reference images
├── .cursor/rules/
│   └── design.mdc            # Design rules for Cursor
├── CLAUDE.md                 # Claude Code rules
└── .windsurfrules            # Windsurf AI rules
```

--------------------------------

### Define and initialize ViewportConfig

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/webview-types.md

Configures responsive breakpoints using FrameDimensions.

```typescript
export interface ViewportConfig {
    desktop: FrameDimensions;   // Desktop size
    mobile: FrameDimensions;    // Mobile size
    tablet: FrameDimensions;    // Tablet size
}

// Example
const config: ViewportConfig = {
    desktop: { width: 1280, height: 720 },
    mobile: { width: 375, height: 667 },
    tablet: { width: 768, height: 1024 }
};
```

--------------------------------

### Register superdesign.resetWelcome command

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/commands-reference.md

Registers a command to reset the welcome screen state and notify the user via an information message.

```typescript
vscode.commands.registerCommand('superdesign.resetWelcome', () => {
    sidebarProvider.sendMessage({
        command: 'resetWelcome'
    });
    vscode.window.showInformationMessage(
        'Welcome screen has been reset. Refresh the sidebar to see the welcome screen again.'
    );
});
```

--------------------------------

### Logger.initialize()

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/logger-service.md

Initializes the logger and creates the VS Code output channel. This method is idempotent and called automatically on the first log call.

```APIDOC
## Logger.initialize()

### Description
Initializes the logger and creates the output channel named "Superdesign".

### Signature
`public static initialize(): void`

### Example
```typescript
import { Logger } from './services/logger';
Logger.initialize();
```
```

--------------------------------

### Project Directory Structure

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Recommended workspace layout for managing design iterations, themes, and moodboards within the .superdesign directory.

```text
workspace-root/
├── .superdesign/
│   ├── design_iterations/
│   │   ├── v1/           # First version
│   │   │   ├── login_1.html
│   │   │   ├── navbar_1.html
│   │   │   └── theme_1.css
│   │   ├── v2/           # Second version
│   │   │   ├── login_2_1.html  # Iteration of login
│   │   │   └── navbar_2.html
│   │   └── themes/       # Centralized themes
│   │       ├── theme_light.css
│   │       ├── theme_dark.css
│   │       └── theme_colorful.css
│   └── moodboard/        # Reference images
│       ├── inspiration_login.png
│       └── color_palette.png
├── src/                  # Your source code
└── designs_final/        # Exported/finalized designs
```

--------------------------------

### Initialize Logger

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/logger-service.md

Method signature and usage for initializing the logger and output channel.

```typescript
public static initialize(): void
```

```typescript
import { Logger } from './services/logger';

Logger.initialize();
```

--------------------------------

### Run Integration Tests

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Execute integration test suites for agent workflows and LLM providers.

```bash
npm run test:agent     # Full agent workflow
npm run test:llm       # LLM provider tests
```

--------------------------------

### Initialize and Use CustomAgentService

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Instantiate the agent service within a VS Code extension context to process design requests via commands.

```typescript
import * as vscode from 'vscode';
import { CustomAgentService } from 'superdesign';

export function myExtension(context: vscode.ExtensionContext) {
    const outputChannel = vscode.window.createOutputChannel('My Extension');
    const agent = new CustomAgentService(outputChannel);
    
    // Use the agent
    const disposable = vscode.commands.registerCommand('myext.design', async () => {
        const prompt = await vscode.window.showInputBox({
            prompt: 'Design request'
        });
        
        if (prompt) {
            try {
                const response = await agent.query(prompt);
                console.log('Design generated:', response);
            } catch (error) {
                vscode.window.showErrorMessage(`Error: ${error}`);
            }
        }
    });
    
    context.subscriptions.push(disposable);
}
```

--------------------------------

### Initialize Write Tool

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Factory function to instantiate the write tool within a given execution context.

```typescript
export function createWriteTool(context: ExecutionContext) {
    return tool({
        description: 'Write content to a file in the SuperDesign workspace...',
        parameters: z.object({
            file_path: z.string(),
            content: z.string(),
            create_dirs?: z.boolean()
        }),
        execute: async (params) => ToolResponse
    });
}
```

--------------------------------

### Apply Minimal Theme

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Reduces rendering overhead by switching to a minimal CSS theme.

```css
# Use theme_minimal.css instead of theme_full.css
```

--------------------------------

### Execute Agent Queries

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/agentservice.md

Demonstrates performing both simple and streaming queries using the CustomAgentService implementation.

```typescript
const service = new CustomAgentService(outputChannel);

// Simple query
const response = await service.query("Design a login form");

// With streaming
await service.query(
    "Create a dashboard layout",
    [],
    { model: 'claude-3-5-sonnet' },
    new AbortController(),
    (message) => console.log(message)
);
```

--------------------------------

### createReadTool

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

The Read tool allows the agent to read the contents of a file within the SuperDesign workspace, supporting text, images, PDFs, and binary files.

```APIDOC
## createReadTool

### Description
Reads the contents of a file within the SuperDesign workspace. Supports reading specific line ranges and various file types including text, images, and PDFs.

### Signature
`createReadTool(context: ExecutionContext)`

### Parameters
- **filePath** (string) - Required - Path to file (relative or absolute within workspace)
- **startLine** (number) - Optional - Starting line number (1-based), default: 1
- **lineCount** (number) - Optional - Number of lines to read, default: 1000
- **encoding** (string) - Optional - File encoding, default: utf-8

### Return Type: FileReadResult
- **content** (string) - File content (truncated if large)
- **filePath** (string) - Original file path
- **fileType** ('text' | 'image' | 'pdf' | 'binary') - Type of file
- **mimeType** (string) - MIME type if detected
- **lineCount** (number) - Total lines in file
- **isTruncated** (boolean) - Whether content was truncated
- **linesShown** ([number, number]) - [startLine, endLine] shown
- **size** (number) - File size in bytes

### Constraints
- Maximum file size: 10 MB
- Default read limit: 1000 lines
- Maximum line length: 2000 characters

### Error Responses
- **File not found**: Path doesn't exist
- **Path is a directory**: Path points to directory
- **File too large**: Size exceeds 10 MB
- **Invalid path**: Contains `..` or escapes workspace
```

--------------------------------

### Create Deprecation README

Source: https://github.com/superdesigndev/superdesign/blob/main/deploy_note.md

Replace the existing README.md with a deprecation notice, directing users to the new official extension.

```bash
# Save your current README
mv README.md README_ORIGINAL.md

# Create deprecation README
cat > README.md << 'EOF'
# ⚠️ THIS EXTENSION HAS BEEN DEPRECATED

## 🚨 Important Notice

This extension has moved to a new publisher account. Please uninstall this version and install the new official version:

### 👉 **[Install the New Official Extension](https://marketplace.visualstudio.com/items?itemName=SuperdesignDev.superdesign-official)**

[... rest of deprecation message ...]
EOF
```

--------------------------------

### Create a New Tool

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Define a new tool using the ai library and register it within the CustomAgentService.

```typescript
import { tool } from 'ai';
import { z } from 'zod';

export function createMyTool(context: ExecutionContext) {
    return tool({
        description: 'My tool description',
        parameters: z.object({ /* ... */ }),
        execute: async (params) => { /* ... */ }
    });
}
```

```typescript
// In getTools() method
tools.push(createMyTool(context));
```

--------------------------------

### createWriteTool

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

The createWriteTool function initializes the file writing tool, allowing users to write content to specific paths within the workspace.

```APIDOC
## createWriteTool

### Description
Creates or overwrites files in the SuperDesign workspace.

### Signature
`createWriteTool(context: ExecutionContext)`

### Parameters
- **file_path** (string) - Required - Path to file (relative or absolute within workspace)
- **content** (string) - Required - File content to write
- **create_dirs** (boolean) - Optional - Create parent directories if missing (Default: true)

### Return Type
- **file_path** (string) - Original path provided
- **absolute_path** (string) - Resolved absolute path
- **is_new_file** (boolean) - True if file was created
- **lines_written** (number) - Number of lines written
- **bytes_written** (number) - Number of bytes written

### Error Responses
- **Target is a directory**: Path points to directory
- **Invalid path**: Contains `..` or escapes workspace
- **Permission denied**: Cannot write to path
```

--------------------------------

### Register superdesign.helloWorld command

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/commands-reference.md

Registers a test command that displays an information message in the VS Code window.

```typescript
vscode.commands.registerCommand('superdesign.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World from superdesign!');
});
```

--------------------------------

### Configure OpenAI GPT-4

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Configuration for using OpenAI's GPT-4 model.

```json
{
    "superdesign.aiModelProvider": "openai",
    "superdesign.openaiApiKey": "sk-...",
    "superdesign.aiModel": "gpt-4o"
}
```

--------------------------------

### Configure API Key

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Executes the configuration command to set the required API key.

```typescript
// Solution: Run configuration command
vscode.commands.executeCommand('superdesign.configureApiKey');
```

--------------------------------

### Archive Old Designs via CLI

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Moves completed design iterations to the archive directory to improve project performance.

```bash
mv .superdesign/design_iterations/old/* .superdesign/archive/
```

--------------------------------

### Define IDE rule files

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Configuration content for Cursor, Claude Code, and Windsurf rule files.

```text
description: Use this rule when asked to do any frontend or UI design
```

```text
Contains design workflow and style guidelines
```

```text
Design system and component generation rules
```

--------------------------------

### List available providers

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Returns an array of all available providers with their metadata.

```typescript
getAvailableProviders(): { type: LLMProviderType; name: string; description: string }[]
```

```typescript
const providers = factory.getAvailableProviders();
// [
//   { type: 'claude-api', name: 'Claude API', description: '...' },
//   { type: 'claude-code', name: 'Claude Code Binary', description: '...' }
// ]
```

--------------------------------

### Publish Regular Update to SuperdesignDev

Source: https://github.com/superdesigndev/superdesign/blob/main/deploy_note.md

Use this command to update the version in package.json, publish to the SuperdesignDev publisher, and then publish to Open VSX.

```bash
# Edit package.json version
npm run package && \
npx vsce publish --pat YOUR_TOKEN && \
npx ovsx publish -p YOUR_OVSX_TOKEN
```

--------------------------------

### LLMProviderFactory.getProvider

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Retrieves or initializes a specific LLM provider instance.

```APIDOC
## async getProvider(providerType?: LLMProviderType)

### Description
Get or create a provider instance.

### Parameters
- **providerType** (LLMProviderType) - Optional - Provider to get; uses config if omitted

### Return
- **Promise<LLMProvider>** - Initialized provider instance
```

--------------------------------

### Execute batch theme generation

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Iterates through a theme configuration array to generate and save CSS files using the themeTool.

```typescript
const themes = [
    { name: 'Light', primary: '#000', background: '#fff' },
    { name: 'Dark', primary: '#fff', background: '#000' },
    { name: 'Colorful', primary: '#ff0080', background: '#ffcc00' }
];

for (const theme of themes) {
    await themeTool.execute({
        theme_name: theme.name,
        cssSheet: generateCss(theme),
        cssFilePath: `.superdesign/design_iterations/theme_${theme.name.toLowerCase()}.css`
    });
}
```

--------------------------------

### Configure Claude Code Thinking Budget

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Set the token budget for extended reasoning capabilities in Claude Code.

```json
{
    "superdesign.claudeCodeThinkingBudget": 50000
}
```

--------------------------------

### Project File Organization

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Directory structure of the source code and generated workspace files.

```text
src/
├── extension.ts              # Main entry point
├── providers/                # LLM provider implementations
├── services/                 # Business logic
├── tools/                    # AI-accessible tools
├── types/                    # TypeScript interfaces
└── webview/                  # React UI components
```

```text
workspace/.superdesign/
├── design_iterations/        # Generated HTML/SVG designs
├── moodboard/               # Reference images
└── (theme files)            # CSS variables and themes
```

--------------------------------

### loadDesignFiles

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/webview-types.md

Request design files from the extension.

```APIDOC
## loadDesignFiles

### Description
Requests the extension to load design files into the webview.

### Request
```json
{
    "command": "loadDesignFiles"
}
```

### Response
```json
{
    "command": "designFilesLoaded",
    "data": {
        "files": [
            {
                "name": "string",
                "path": "string",
                "content": "string",
                "size": "number",
                "modified": "date",
                "fileType": "string"
            }
        ]
    }
}
```
```

--------------------------------

### LLMProviderFactory.getAvailableProviders

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Lists all available LLM providers.

```APIDOC
## getAvailableProviders()

### Description
List all available providers and their descriptions.

### Return
- **Array** - Array of provider information objects containing type, name, and description
```

--------------------------------

### Configure Custom AI Model Provider

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Select the secondary AI model provider for custom agent configurations.

```json
{
    "superdesign.aiModelProvider": "openai"
}
```

--------------------------------

### LS (Directory Listing)

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

The LS tool allows users to list the contents of a directory, including metadata. It supports recursive listing and the ability to show hidden files.

```APIDOC
## LS (Directory Listing)

### Description
Lists directory contents with metadata. Supports recursive listing and hidden file visibility.

### Parameters
- **path** (string) - Required - Directory to list
- **recursive** (boolean) - Optional - Recurse into subdirectories
- **show_hidden** (boolean) - Optional - Show hidden files

### Usage Example
```typescript
await tool.execute({
    path: 'src',
    recursive: true
});
```
```

--------------------------------

### Testing Commands

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/README.md

Commands to execute the test suite or specific test modules.

```bash
# Run all tests
npm test

# Individual test suites
npm run test:core
npm run test:tools
npm run test:agent
```

--------------------------------

### Configure Claude Code Binary Path

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Specify the path to the local claude binary executable.

```json
{
    "superdesign.claudeCodePath": "claude"
}
```

--------------------------------

### Configure Anthropic Claude API

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Minimal configuration for using Anthropic's Claude API.

```json
{
    "superdesign.llmProvider": "claude-api",
    "superdesign.anthropicApiKey": "sk-ant-...",
    "superdesign.aiModel": "claude-4-sonnet-20250514"
}
```

--------------------------------

### Define design workflows

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Outline the design lifecycle in the project README.

```text
1. Create rough design
2. Get feedback in code review
3. Refine based on comments
4. Export to production
```

--------------------------------

### Configure OpenRouter

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Configuration for using OpenRouter to access various models.

```json
{
    "superdesign.aiModelProvider": "openrouter",
    "superdesign.openrouterApiKey": "sk-...",
    "superdesign.aiModel": "anthropic/claude-3-7-sonnet-20250219"
}
```

--------------------------------

### Execute MultiEdit Operation

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/tools-reference.md

Demonstrates applying sequential text replacements to a specific file.

```typescript
await tool.execute({
    file_path: 'src/styles.css',
    edits: [
        {
            old_string: 'color: blue',
            new_string: 'color: #000'
        },
        {
            old_string: 'font-size: 16px',
            new_string: 'font-size: 14px'
        }
    ]
});
```

--------------------------------

### Configure LLM Provider

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/configuration.md

Select the primary LLM provider between Anthropic API or local Claude Code binary.

```json
{
    "superdesign.llmProvider": "claude-api"
}
```

--------------------------------

### LLMProviderFactory.getProviderStatus

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Retrieves the status of all configured providers.

```APIDOC
## async getProviderStatus()

### Description
Get comprehensive status of all providers.

### Return
- **Object** - Status object with current provider and all providers' status
```

--------------------------------

### Define LLMProviderOptions interface

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/llmproviders.md

Configuration options for LLM queries.

```typescript
export interface LLMProviderOptions {
    maxTurns?: number;               // Maximum conversation turns
    allowedTools?: string[];         // List of enabled tools
    permissionMode?: 'acceptEdits' | 'prompt' | 'deny';
    cwd?: string;                    // Working directory for tools
    customSystemPrompt?: string;     // Override system prompt
    thinkingBudgetTokens?: number;   // Extended thinking budget
    resume?: string;                 // Resume from previous session
    [key: string]: any;              // Custom options
}
```

--------------------------------

### Update API Key Settings

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/integration-guide.md

Instructions for updating the API key via the settings menu.

```text
// Solution: Update key
// Settings → search "superdesign.anthropicApiKey" → update
```

--------------------------------

### Load Design Files Request

Source: https://github.com/superdesigndev/superdesign/blob/main/_autodocs/webview-types.md

Message sent from the webview to request design files from the extension.

```typescript
postMessage({
    command: 'loadDesignFiles'
});
```
Tokens:
Raw