@bravostudioai/react 0.1.29 → 0.1.31

package/README.md

@@ -1,13 +1,14 @@
 # @bravostudioai/react
 
-> Transform your Encore Studio designs into production-ready, type-safe React components in seconds.
+> Stream your Figma designs directly into production-ready, type-safe React components for your MCP apps.
 
 [![npm version](https://img.shields.io/npm/v/@bravostudioai/react.svg)](https://www.npmjs.com/package/@bravostudioai/react)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-18%2B%20%7C%2019%2B-blue.svg)](https://reactjs.org/)
 
-**What you get:**
-- 🎨 Design in Encore Studio → Generate typed React components
+**The Figma → React Pipeline:**
+- 🎨 Design in Figma → Stream to typed React components
+- 🤖 Perfect for MCP (Model Context Protocol) apps
 - 🔒 100% TypeScript with full IntelliSense support
 - 🚀 Zero configuration, instant productivity
 - 📝 Auto-generated documentation for every component
@@ -28,7 +29,7 @@
 
 ## Table of Contents
 
-- [What is Encore Studio?](#what-is-encore-studio)
+- [What is Bravo Studio AI?](#what-is-bravo-studio-ai)
 - [Perfect For](#perfect-for)
 - [Installation](#installation)
 - [Quick Start](#quick-start)
@@ -43,9 +44,9 @@
 
 ## Why This Matters
 
-Stop manually translating designs into code. Stop writing boilerplate. Stop maintaining prop interfaces that fall out of sync with your designs.
+Stop manually translating Figma designs into code. Stop writing boilerplate. Stop maintaining prop interfaces that fall out of sync with your designs.
 
-With `@bravostudioai/react`, you design in Encore Studio and instantly get:
+With `@bravostudioai/react`, you design in Figma and Bravo Studio AI streams them into:
 
 - **Type-safe React components** with full TypeScript interfaces
 - **Intelligent prop detection** that understands your data bindings, forms, buttons, and interactive elements
@@ -54,20 +55,30 @@ With `@bravostudioai/react`, you design in Encore Studio and instantly get:
 - **Self-documenting code** with README files for every component
 - **Zero manual configuration** - the generator understands your design intent
 
-## What is Encore Studio?
+## What is Bravo Studio AI?
 
-Encore Studio is a design-to-code platform that lets you create mobile and web app interfaces visually. This package bridges the gap between your Encore Studio designs and your React application, automatically generating type-safe components from your visual designs.
+**Bravo Studio AI** is a Figma-to-React pipeline that transforms your designs into production-ready components. Design in Figma, and Bravo Studio AI automatically generates type-safe React components with intelligent prop detection, form handling, and event routing.
+
+### The Perfect MCP Companion
+
+This package is optimized for **MCP (Model Context Protocol) applications**, where AI agents need to interact with real, functional UI components. By streaming Figma designs into typed React components, you can:
+
+- Rapidly prototype AI-powered interfaces
+- Let designers iterate without code changes
+- Build MCP apps with production-ready UI in minutes
+- Maintain type safety across your entire AI app stack
 
 ## Perfect For
 
-✅ **Design teams** who want to iterate quickly without waiting for developers
-✅ **Full-stack developers** building prototypes or MVPs fast
-✅ **Product teams** who need to validate designs with real functionality
+✅ **MCP app developers** building AI-powered applications with real UI
+✅ **Design teams** who want to iterate in Figma and see changes instantly
+✅ **Full-stack developers** building prototypes or MVPs at lightning speed
+✅ **Product teams** validating designs with real functionality
 ✅ **Agencies** shipping client projects with tight deadlines
 ✅ **Startups** optimizing for speed without sacrificing code quality
 
 **Not ideal for:**
-❌ Projects without Encore Studio designs
+❌ Projects without Figma designs processed through Bravo Studio AI
 ❌ Teams needing 100% custom, hand-coded components
 
 ## Installation
@@ -83,14 +94,21 @@ npm install @bravostudioai/react
 
 ## Quick Start
 
-### Generate Components from Your Encore Studio App
+### The Figma → React Workflow
+
+1. **Design in Figma** - Create your interface with your team
+2. **Process through Bravo Studio AI** - Your designs get app/page IDs
+3. **Generate React components** - Stream them into your codebase
+4. **Use in your MCP app** - Import and use with full type safety
+
+### Generate Components from Your Bravo Studio AI App
 
 ```bash
 # Generate all pages from an app
-npx encore-lib generate <appId> ./src/components
+npx @bravostudioai/react generate <appId> ./src/components
 
 # Generate a specific page
-npx encore-lib generate <appId> <pageId> ./src/components
+npx @bravostudioai/react generate <appId> <pageId> ./src/components
 ```
 
 This creates a folder structure like:
@@ -108,7 +126,7 @@ src/components/
 ```tsx
 import { PageName } from './components/YourApp/PageName';
 
-function App() {
+function MCPApp() {
   return (
     <PageName
       headline="Welcome to our app"
@@ -122,7 +140,7 @@ function App() {
 }
 ```
 
-That's it. No configuration files. No manual prop mapping. Just clean, typed React components.
+That's it. No configuration files. No manual prop mapping. Just clean, typed React components streamed from Figma.
 
 ## What Gets Generated
 
@@ -293,13 +311,14 @@ Simple, clean props that map directly to your design's data bindings.
 
 ## How It Works
 
-The generator intelligently analyzes your Encore Studio pages and:
+Bravo Studio AI processes your Figma designs and the generator:
 
-1. **Detects data bindings** - Any component tagged with `encore:data` becomes a prop
+1. **Detects data bindings** - Components tagged in Figma become typed props
 2. **Identifies repeating containers** - Lists and sliders become array props with typed items
 3. **Finds forms** - Input groups become typed form data interfaces
 4. **Discovers interactive elements** - Buttons, selects, and inputs get event handlers
 5. **Generates human-readable names** - Component names become `headline`, not `component_01ABC123`
+6. **Streams updates** - Optional live updates when Figma designs change
 
 ## CLI Commands
 
@@ -307,25 +326,25 @@ The generator intelligently analyzes your Encore Studio pages and:
 
 ```bash
 # Generate all pages from an app
-npx encore-lib generate <appId> <outputPath>
+npx @bravostudioai/react generate <appId> <outputPath>
 
 # Generate a specific page
-npx encore-lib generate <appId> <pageId> <outputPath>
+npx @bravostudioai/react generate <appId> <pageId> <outputPath>
 
 # Generate with bundled production data (offline mode)
-npx encore-lib generate <appId> <pageId> <outputPath> --production
+npx @bravostudioai/react generate <appId> <pageId> <outputPath> --production
 ```
 
 ### Download Raw Data
 
 ```bash
 # Download page data for inspection
-npx encore-lib download <appId> <pageId> <targetPath>
+npx @bravostudioai/react download <appId> <pageId> <targetPath>
 ```
 
 ## Environment Variables
 
-Configure the Encore Studio API endpoint:
+Configure the Bravo Studio AI API endpoint:
 
 ```bash
 APPS_SERVICE_URL=https://your-custom-endpoint.com
@@ -360,7 +379,7 @@ Sliders and repeating containers support both modes:
 Bundle your app/page definitions directly into components for offline usage:
 
 ```bash
-npx encore-lib generate <appId> <pageId> ./src/components --production
+npx @bravostudioai/react generate <appId> <pageId> ./src/components --production
 ```
 
 This creates a `data.json` file with all necessary data baked in.
@@ -416,15 +435,25 @@ Full TypeScript support out of the box. Every generated component includes:
 
 ## Developer Experience
 
-This isn't just code generation - it's a complete workflow:
+This isn't just code generation - it's a complete Figma → React pipeline:
 
-1. **Design in Encore Studio** - Use the visual editor, add data bindings with `encore:data` tags
-2. **Run the generator** - One command creates your components
-3. **Import and use** - Type-safe components with IntelliSense support
-4. **Iterate quickly** - Regenerate anytime your design changes
+1. **Design in Figma** - Work with your design team in their native tool
+2. **Process through Bravo Studio AI** - Designs get structured and tagged
+3. **Run the generator** - One command streams your components
+4. **Import and use** - Type-safe components with IntelliSense support
+5. **Iterate quickly** - Regenerate anytime Figma designs change
 
 The generated code is clean, readable, and maintainable. You can read it, understand it, and even modify it if needed.
 
+### Why This Matters for MCP Apps
+
+MCP applications need real UI components that AI agents can reason about and manipulate. By streaming Figma designs into typed React components, you get:
+
+- **Type safety** - AI agents work with strongly-typed interfaces
+- **Rapid iteration** - Designers update Figma, you regenerate
+- **Production quality** - Not prototypes, but real components
+- **Developer-friendly** - Clean code that developers can read and extend
+
 ## Example Output
 
 Here's what the generator creates for a real-world salary calculator:
@@ -469,8 +498,11 @@ Complete documentation with prop descriptions, types, and usage examples.
 
 ## Why Developers Love This
 
-**"No more design-to-code bottleneck"**
-Your designers can iterate in Encore Studio while you work with production-ready components.
+**"Figma to code in seconds, not days"**
+Your designers iterate in Figma while you work with production-ready components. No translation layer.
+
+**"Perfect for MCP apps"**
+AI agents need typed interfaces. This gives you exactly that, streamed from design files.
 
 **"Type safety everywhere"**
 Catch errors at compile time, not runtime. IntelliSense shows you every available prop.
@@ -490,7 +522,7 @@ The generated code looks like code you'd write by hand. Clean, idiomatic React.
 
 **Q: The generated component shows "Failed to load"**
 - Ensure your `appId` and `pageId` are correct
-- Check that you have network access to the Encore Studio API
+- Check that you have network access to the Bravo Studio AI API
 - For offline use, use `--production` flag during generation
 
 **Q: TypeScript errors in generated code**
@@ -499,13 +531,17 @@ The generated code looks like code you'd write by hand. Clean, idiomatic React.
 - Try regenerating the component with the latest package version
 
 **Q: Props not updating the component**
-- Remember that data props need to be defined in Encore Studio with `encore:data` tags
+- Remember that data bindings need to be properly tagged in your Figma design
 - Check the generated README.md for the exact prop names
 - Verify the component is receiving props correctly using React DevTools
 
 **Q: How do I get my App ID and Page ID?**
-- Contact your Bravo Studio team for access credentials
-- IDs are typically found in your Encore Studio project settings
+- Contact your Bravo Studio AI team for access credentials
+- IDs are provided when your Figma designs are processed through Bravo Studio AI
+
+**Q: Can I use this with regular Figma files?**
+- Figma files must be processed through Bravo Studio AI first
+- This adds the necessary metadata and structure for component generation
 
 ### Best Practices
 
@@ -544,10 +580,10 @@ npm update @bravostudioai/react
 
 ## Keywords
 
-`react`, `typescript`, `code-generation`, `design-to-code`, `encore`, `bravo-studio`, `component-generator`, `figma-to-react`, `type-safe`, `no-code`, `low-code`, `design-system`, `ui-components`
+`react`, `typescript`, `code-generation`, `design-to-code`, `figma`, `figma-to-react`, `bravo-studio`, `bravo-studio-ai`, `component-generator`, `type-safe`, `mcp`, `model-context-protocol`, `ai-apps`, `design-streaming`, `design-system`, `ui-components`, `figma-plugin`
 
 ---
 
-**Start building faster. Start with @bravostudioai/react.**
+**Stream Figma designs directly into your MCP apps. Start with @bravostudioai/react.**
 
-Made with ❤️ by the Bravo Studio team
+Made with ❤️ by the Bravo Studio AI team

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bravostudioai/react",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/src/index.d.ts",

package/src/cli/commands/generate.ts

@@ -369,6 +369,8 @@ Arguments:
   appId      The Encore app ID
   pageId     The Encore page ID (optional - if omitted, generates wrappers for ALL pages)
   outputPath Path where the generated TSX file(s) should be saved
+  --production  Generate for production (bundles data)
+  --preseed     Alias for --production (bundles data)
 
 Environment variables:
   APPS_SERVICE_URL  Base URL for the apps service
@@ -379,8 +381,11 @@ Example:
 }
 
 export async function runGenerate(args: string[]) {
-  const isProduction = args.includes("--production");
-  const cleanArgs = args.filter((arg) => arg !== "--production");
+  const isProduction =
+    args.includes("--production") || args.includes("--preseed");
+  const cleanArgs = args.filter(
+    (arg) => arg !== "--production" && arg !== "--preseed"
+  );
 
   if (
     cleanArgs.length < 2 ||

package/src/components.tsx

@@ -1502,7 +1502,12 @@ const TextInputComponent: React.FC<ComponentProps> = ({
   );
 };
 
-const LottieComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
+const LottieComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+  children,
+}) => {
   const style = useEncoreStyle(nodeData.style);
   return (
     <EncoreLinkActionWrapper id={id} nodeData={nodeData}>

package/src/version.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = "0.1.29";
+export const PACKAGE_VERSION = "0.1.31";