Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>StorieAINew to Visual Studio Code? Get it now.
StorieAI

StorieAI

Preview

StorieAI

|
6 installs
| (0) | Free
AI-powered Storybook story generator for UI components
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

StorieAI - AI-Powered Storybook Generator

🚀 Transform your component development workflow with intelligent Storybook story generation powered by AI.

StorieAI automatically analyzes your React components and generates comprehensive, professional-quality Storybook stories with realistic mock data, multiple variants, and proper TypeScript integration.

✨ Features

🤖 AI-Powered Story Generation

  • Smart Component Analysis - Understands your component props, types, and dependencies
  • Intelligent Mock Data - Generates realistic data based on prop names and types
  • Multiple Story Variants - Creates default, edge case, and interaction variants automatically

📊 Story Coverage Dashboard

  • Test Coverage Style Analytics - See which components need stories at a glance
  • Directory-Level Insights - Track coverage across your project structure
  • Framework Breakdown - Monitor each React component separately
  • Exportable Reports - Generate coverage reports for team reviews

🔔 Live Change Detection

  • Non-Intrusive Notifications - Smart batching prevents notification spam
  • Component Lifecycle Tracking - Detects new, deleted, and orphaned components
  • Automatic Story Maintenance - Suggests updates when components change
  • Bulk Operations - Handle multiple components efficiently

🎨 Professional Integration

  • VS Code Native UI - Seamless integration with your development environment
  • TypeScript Support - Full type safety and intelligent IntelliSense
  • Multiple Story Formats - Supports both CSF 2.0 and CSF 3.0
  • Framework Agnostic - Currently works with React but in future we plan to make it f/w agnostic

🚀 Quick Start

Installation

  1. Install from the VS Code Marketplace
  2. Open any React + Typescript project
  3. Configure your AI provider (Claude, OpenAI, or AWS Bedrock)

Generate Your First Story

  1. Right-click any component file (.tsx, .ts)
  2. Select "Generate Storybook Story"
  3. Choose your preferred location
  4. Watch the magic happen! ✨

🛠️ Setup & Configuration

AI Provider Setup

StorieAI supports multiple AI providers for intelligent story generation. Choose the one that best fits your needs:

🔥 Claude (Recommended)

Best for: Individual developers, simple setup, fastest performance

  1. Get an API key from Anthropic Console
  2. Open VS Code Command Palette (Ctrl+Shift+P)
  3. Run "StorieAI: Configure AI Provider"
  4. Select "Configure Claude"
  5. Enter your Claude API key (starts with sk-ant-)

🏢 AWS Bedrock (Enterprise)

Best for: Enterprise teams, compliance requirements, existing AWS infrastructure

AWS Bedrock provides enterprise-grade access to Claude with enhanced security, compliance, and cost control. Setup is more involved but offers better governance.

Prerequisites

Before setting up Bedrock, ensure you have:

  • ✅ AWS Account with Bedrock access
  • ✅ Claude models enabled in your AWS region
  • ✅ IAM permissions for Bedrock operations
Step 1: Enable Claude Models in AWS
  1. Sign in to AWS Console → Navigate to AWS Bedrock
  2. Select your region (recommended: us-east-1, us-west-2, or eu-central-1)
  3. Go to "Model access" in the left sidebar
  4. Request access to Anthropic Claude models:
    • Claude 3.5 Sonnet
    • Claude 3 Sonnet
    • Claude 3 Haiku
  5. Wait for approval (usually instant for most accounts)
Step 2: Configure IAM Permissions

Create an IAM policy with the following permissions:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "BedrockInvokeModel",
      "Effect": "Allow",
      "Action": [
        "bedrock:InvokeModel",
        "bedrock:InvokeModelWithResponseStream"
      ],
      "Resource": ["arn:aws:bedrock:*::foundation-model/anthropic.claude-*"]
    },
    {
      "Sid": "BedrockListModels",
      "Effect": "Allow",
      "Action": ["bedrock:ListFoundationModels"],
      "Resource": "*"
    }
  ]
}

Apply this policy to:

  • Your IAM user (if using access keys)
  • Your AWS SSO permission set
  • Your IAM role (if using role-based access)
Step 3: Choose Authentication Method

Option A: AWS Profile (Recommended)

  1. Install AWS CLI if not already installed
  2. Configure your profile:
    aws configure --profile storieai-bedrock
    # Enter your Access Key ID, Secret Access Key, and region
    
  3. Test the configuration:
    aws bedrock list-foundation-models --region us-east-1 --profile storieai-bedrock
    

Option B: Direct Access Keys

  1. Create an IAM user in AWS Console
  2. Attach the Bedrock policy created in Step 2
  3. Generate access keys for the user
  4. Keep keys secure - you'll enter them in VS Code
Step 4: Configure StorieAI
  1. Open VS Code Command Palette (Ctrl+Shift+P)
  2. Run "StorieAI: Configure AI Provider"
  3. Select "Configure AWS Bedrock"
  4. Choose authentication method:
    • AWS Profile: Select from detected profiles or enter manually
    • Access Keys: Enter AWS Access Key ID and Secret Access Key
  5. Select region: Choose the region where you enabled Claude models
  6. Choose model: Pick from available Claude models in your region
Bedrock Setup Troubleshooting

"Access denied to AWS Bedrock"

  • Verify IAM permissions include bedrock:InvokeModel
  • Check that Bedrock is enabled in your selected region
  • Ensure your user/role has the correct policy attached

"Claude model not available"

  • Confirm model access is requested and approved in Bedrock console
  • Check you're using the correct region
  • Wait a few minutes after model approval

"Profile not found"

  • Run aws configure list-profiles to see available profiles
  • Ensure AWS CLI is installed and configured
  • Try using "default" profile or create a new one

"Invalid AWS credentials"

  • Check access keys are correct and haven't expired
  • Verify the IAM user has programmatic access enabled
  • Test credentials with AWS CLI first

🤖 OpenAI (Alternative)

Best for: Developers familiar with OpenAI, when Claude is unavailable

  1. Get an API key from OpenAI Platform
  2. Run "StorieAI: Configure AI Provider"
  3. Select "Configure OpenAI"
  4. Enter your OpenAI API key (starts with sk-)

Extension Settings

Configure StorieAI in your VS Code settings:

{
  "storieai.aiProvider": "claude",
  "storieai.storyFormat": "CSF3",
  "storieai.storyPath": "src/stories",
  "storieai.autoUpdate": true,
  "storieai.generateVariants": true
}
Setting Description Default
storieai.aiProvider AI provider (claude/openai/bedrock) claude
storieai.storyFormat Story format (CSF2/CSF3) CSF3
storieai.storyPath Default story directory src/stories
storieai.autoUpdate Auto-detect component changes true
storieai.generateVariants Generate multiple story variants true

📖 Usage Guide

🎯 Component Analysis

StorieAI automatically analyzes your components to understand:

  • Props and Types - TypeScript interfaces, PropTypes
  • Import Dependencies - Local types, components, and library usage
  • Component Structure - Framework patterns and best practices
  • Context Relationships - How components relate to each other

🎨 Story Generation Examples

Before StorieAI (Manual)

// Lots of manual work, often incomplete
export const Default = {
  args: {
    user: { name: "User" }, // Generic data
    onEdit: () => {},
  },
};

After StorieAI (AI-Generated)

import type { Meta, StoryObj } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { FaUser } from "react-icons/fa";
import { UserCard } from "./UserCard";

const meta: Meta<typeof UserCard> = {
  title: "Components/UserCard",
  component: UserCard,
  parameters: { layout: "centered" },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: { type: "select", options: ["small", "medium", "large"] },
    },
    theme: { control: { type: "object" } },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    user: {
      id: "user-123",
      name: "Sarah Johnson",
      email: "sarah.johnson@company.com",
      avatar: "https://example.com/avatar.jpg",
      role: "admin",
    },
    theme: {
      colors: { primary: "#007bff", secondary: "#6c757d" },
      spacing: { medium: 16 },
    },
    onEdit: action("userEdited"),
  },
};

export const SmallSize: Story = {
  args: { ...Default.args, size: "small" },
};

export const LoadingState: Story = {
  args: { ...Default.args, isLoading: true },
};

📊 Coverage Dashboard

Access the coverage dashboard anytime by clicking the StorieAI button in your status bar:

  • 📈 Project Overview - Total components vs. components with stories
  • 📁 Directory Analysis - See which folders need attention
  • 🎯 Missing Components - One-click story generation for components without stories
  • 📊 Export Reports - Generate markdown reports for team sharing

🔔 Live Change Notifications

StorieAI intelligently tracks your component changes:

  • 🆕 New Components - Suggests story generation for new components
  • 🗑️ Deleted Components - Offers to clean up orphaned story files
  • ⚠️ Orphaned Stories - Detects when stories lose their components

🎯 Commands

Command Description Shortcut
Generate Storybook Story Generate story for current/selected component Ctrl+Shift+S G

🔧 Supported Frameworks

React

  • ✅ Function components with TypeScript
  • ✅ Class components with PropTypes
  • ✅ Hooks and Context API
  • ✅ JSX and TSX files

🚀 Performance

  • ⚡ Fast Analysis - Sub-2 second component analysis
  • 🧠 Smart Caching - Avoids re-analyzing unchanged files
  • 📊 Efficient Context - Intelligent import resolution with depth limits
  • 🔄 Background Processing - Non-blocking story generation

🛡️ Privacy & Security

  • 🔒 Secure Storage - API keys stored in VS Code's secure credential store
  • 🏠 Local Processing - Component analysis happens locally
  • 🌐 Minimal Data Transfer - Only essential context sent to AI providers
  • 🔐 No Data Retention - AI providers don't store your code
  • 🏢 Enterprise Ready - AWS Bedrock provides additional compliance and data governance

🆘 Troubleshooting

Common Issues

"AI provider configuration is invalid"

  • Claude/OpenAI: Check your API key format (Claude: sk-ant-, OpenAI: sk-)
  • Bedrock: Verify IAM permissions and model access in AWS console
  • Try reconfiguring: Command Palette → "StorieAI: Setup AI Configuration"

"Component analysis failed"

  • Ensure your component has proper TypeScript types
  • Check for syntax errors in the component file
  • Verify all imports are resolvable

"Story generation is slow"

  • Check your internet connection
  • Bedrock users: Verify you're using the closest AWS region
  • Review the component complexity (very large components take longer)

AWS Bedrock Specific Issues

"Access denied to AWS Bedrock"

  • Check IAM permissions include required Bedrock actions
  • Ensure Bedrock is available in your selected region
  • Verify model access is approved in Bedrock console

"Profile credentials not working"

  • Test with: aws bedrock list-foundation-models --profile your-profile
  • Ensure AWS CLI is properly configured
  • Try using access keys as alternative

"Model not found in region"

  • Verify Claude models are enabled in Bedrock console
  • Check you're using a supported region
  • Some models may not be available in all regions

"Dashboard stats might be incorrect"

  • The way we index (co-relate a component with it's corresponding storybook) currently is that we assume a storybook naming follows the convention <component_name>.stories.(tsx|ts), we will slowly improve upon that.
  • If a single file contains multiple components, we only consider the first found component. We do plan to add support for multiple components in further releases.

🙏 Acknowledgments

  • Storybook - The amazing component development platform
  • Anthropic - Claude AI that powers intelligent generation
  • AWS Bedrock - Enterprise-grade AI platform
  • VS Code - The extensible editor that makes this possible
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft