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