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
- Install from the VS Code Marketplace
- Open any React + Typescript project
- Configure your AI provider (Claude, OpenAI, or AWS Bedrock)
Generate Your First Story
- Right-click any component file (
.tsx
, .ts
)
- Select "Generate Storybook Story"
- Choose your preferred location
- 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
- Get an API key from Anthropic Console
- Open VS Code Command Palette (
Ctrl+Shift+P
)
- Run "StorieAI: Configure AI Provider"
- Select "Configure Claude"
- 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
- Sign in to AWS Console → Navigate to AWS Bedrock
- Select your region (recommended:
us-east-1
, us-west-2
, or eu-central-1
)
- Go to "Model access" in the left sidebar
- Request access to Anthropic Claude models:
- Claude 3.5 Sonnet
- Claude 3 Sonnet
- Claude 3 Haiku
- Wait for approval (usually instant for most accounts)
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)
- Install AWS CLI if not already installed
- Configure your profile:
aws configure --profile storieai-bedrock
# Enter your Access Key ID, Secret Access Key, and region
- Test the configuration:
aws bedrock list-foundation-models --region us-east-1 --profile storieai-bedrock
Option B: Direct Access Keys
- Create an IAM user in AWS Console
- Attach the Bedrock policy created in Step 2
- Generate access keys for the user
- Keep keys secure - you'll enter them in VS Code
- Open VS Code Command Palette (
Ctrl+Shift+P
)
- Run "StorieAI: Configure AI Provider"
- Select "Configure AWS Bedrock"
- Choose authentication method:
- AWS Profile: Select from detected profiles or enter manually
- Access Keys: Enter AWS Access Key ID and Secret Access Key
- Select region: Choose the region where you enabled Claude models
- 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
- Get an API key from OpenAI Platform
- Run "StorieAI: Configure AI Provider"
- Select "Configure OpenAI"
- 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
- ⚡ 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