StorieAI - AI-Powered Storybook Generator

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

Download the extension, plugin your own AI provider and you are good to go.

** AI can make mistakes hence human review is encouraged. Our goal is to get you into Storybook fast and not spend weeks writing stories.

** At present extension works best with atomic typed components. In future we plan to support components that encompass business logic like fetching data from backend.

📊 Story Coverage Dashboard

Once you download the extension, click the "StorieAI" status bar item to view your dashboard.

• Story Coverage - See which components need stories, delete orphaned stories and analyze components that have stories.
• Storybook Setup - Setup storybook and run/stop the storybook server right from the dashboard.
• AI Configuration - Quickly setup and switch between many AI providers that we support.

🚀 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, .jsx)
2. Select "Generate Storybook Story"
3. Choose your preferred location
4. Watch the magic happen! ✨

** You can one-click generate stories directly from dashboard also.

🛠️ 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. Click the "StorieAI" status bar item to and go to AI Configuration tab.
3. Select "Claude" and enter your API key (starts with sk-ant-) and select desired model.
4. Click Save Configuration and then Set As Active Provider

🏢 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 Opus 4
   • Claude Sonnet 4
   • Claude 3.7 Sonnet
   • Claude 3.5 Sonnet v2
5. Wait for approval (usually instant for most accounts)

Step 2: Configure IAM Permissions

Create an IAM policy with the following permissions or you can use the prebuilt AmazonBedrockFullAccess policy:

{
  "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 not present create one.
• Select your IAM user and click Create access key
• Save your credentials temporarily somewhere and move to step 3.

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. Keep keys secure - you'll enter them in VS Code in step 4.

Step 4: Configure StorieAI

1. Click the "StorieAI" status bar item and go to AI Configuration tab.
2. Select "AWS Bedrock"
3. Choose authentication method:
   • AWS Profile: Select from detected profiles
   • Access Keys: Enter AWS Access Key ID and Secret Access Key
4. Select region: Choose the region where you enabled Claude models
5. 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. Click the "StorieAI" status bar item to and go to AI Configuration tab.
3. Select "OpenAI" and enter your API key (starts with sk-) and select desired model.
4. Click Save Configuration and then Set As Active Provider

🎨 Story Generation Example

Before StorieAI

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

After StorieAI

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
• 🎯 Missing Components - One-click story generation for components without stories
• ⚠️ Orphaned Stories - Detects when stories lose their components

🎯 Commands

🔧 Supported Frameworks

React

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

🛡️ 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)

"Dashboard stats are approximate"

• 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 component found. We do plan to add support for multiple components in further releases.

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

🙏 Acknowledgments

• Storybook - The amazing component development platform
• Anthropic - Claude AI that powers intelligent generation
• AWS Bedrock - Enterprise-grade AI platform
• OpenAI - The one that started it all.
• VS Code - The extensible editor that makes this possible