Ship Mobile Screens 10x Faster with This Free Expo AI Workstation

#webdev #ai #workstations #reactnative

⚡ Introducing JSXDock: The Instant React Native & Expo UI Workstation

If you have ever built mobile apps with React Native and Expo, you know the routine: configuring react-native-reanimated spring physics, setting up gesture handlers, adding tactile expo-haptics, and tracking down dependency package names for npx expo install.

It takes time away from what actually matters — shipping your app.

That is why I created JSXDock: a lightweight, privacy-first AI workstation built specifically for React Native and Expo developers to synthesize production-grade TypeScript components in seconds.

💡 What is JSXDock?

JSXDock is a free, web-based UI agent workstation designed for React Native developers, indie hackers, and learners. Instead of writing boilerplate code or searching through documentation for complex gestures and layout state, you simply describe what you need — or pick a preset — and get instant, copy-paste-ready .tsx code paired with exact Expo CLI installation commands.

🔥 Key Features

🤖 Multi-Model AI Routing: Dynamically switch between Claude 3.5 Sonnet (for complex animations and logic), Llama 3.3 70B (for rapid layouts), and DeepSeek R1 (for deep state reasoning).
⚡ Native Expo Package Integration: First-class support for Expo Reanimated 3, Expo Haptics, Expo Image, Linear Gradient, Lucide Icons, and Expo Router.
🎨 TypeScript First: Outputs strongly typed, production-ready React Native .tsx code with modern imports and modular structure.
🔒 100% Client-Side Privacy: Your OpenRouter API key is stored strictly in your browser's localStorage. There are no backend proxy servers — your prompts and keys go straight to OpenRouter.
💸 Completely Free: No signups, paywalls, or hidden subscription tiers. You only pay for exact API usage on your own key.
🧩 One-Click Presets: Instantly kickstart complex UI components like gesture-driven swipe cards, animated bottom sheets, and glassmorphic dashboard cards.

🚀 How It Works (3 Simple Steps)

Configure Engine & Modules: Pick your target LLM model and check off the Expo capabilities your component needs.
Describe Your Component: Type out your UI specifications or click a preset prompt.
Copy & Run: Copy the output directly into your React Native codebase and run the auto-generated npx expo install CLI command in your terminal.

💻 Built by DIGITAL GHOST

JSXDock was crafted to eliminate the friction in mobile UI prototyping and help developers turn ideas into native mobile screens faster than ever.

👉 View Project & Launch JSXDock

Check out more tools, projects, and insights at digitalghost.blog.

Top comments (3)

Svg/icons • Oct 4

Since Lucide is a first-class module, do you give the model rules for icon semantics, stroke consistency and accessibility, or does it choose purely from prompt context?

Digital Ghost • Oct 5

You can strengthen JSXDock today by upgrading the system prompt. Here's a drop-in replacement for the systemPrompt in generateComponent():

const lucideRules = features.includes('lucide-react-native') ? `
LUCIDE ICON RULES (strict):
- Import icons individually: import { Heart, X } from 'lucide-react-native';
- Default props: size={20}, strokeWidth={2}, color="currentColor" unless a hero/illustrative icon needs size 32+.
- Keep strokeWidth CONSISTENT across all icons in the same component (do not mix 1.5 and 2.5).
- Semantic mapping (prefer these when the meaning matches):
  like/favorite=Heart, save=Bookmark, dismiss/close=X, share=Share2,
  settings=Settings, search=Search, AI/magic=Sparkles, add=Plus, delete=Trash2,
  chevron/expand=ChevronRight, back=ArrowLeft, notification=Bell.
- Accessibility:
  * Interactive icons MUST have accessibilityRole="button" and accessibilityLabel.
  * Decorative icons MUST have accessibilityElementsHidden={true} and importantForAccessibility="no".
  * Wrap touch icons in Pressable/TouchableOpacity with min 44x44 hit area.
- Never fabricate icon names. Only use icons that exist in lucide-react-native.
` : '';

const systemPrompt = `You are an elite Expo and React Native software engineer.
Generate a complete, production-grade TypeScript React Native component based on the user request.
Selected Expo Capabilities/Packages to use if applicable: ${features.join(', ')}.
${lucideRules}

Your response MUST follow this exact markdown structure:
### CODE
\`\`\`tsx
// Complete TypeScript React Native / Expo component code here
\`\`\`
### SETUP
\`\`\`bash
npx expo install ${features.join(' ')}
\`\`\``;

Digital Ghost • Oct 5

Great question — and a fair one to press on, because "first-class module" can mean very different things.

Right now, the honest answer is: mostly prompt context. When you toggle Lucide in the dependency matrix, it gets injected into the system prompt as a selected capability, and the model is instructed to produce production-grade RN/Expo TypeScript using those packages. There are no hard-coded rules yet for:

Icon semantics — which icon to pick for which meaning (Heart vs Bookmark vs Star for "save", etc.)

Stroke consistency — enforcing a fixed strokeWidth, size, and color across every icon in a component

Accessibility — accessibilityLabel, accessibilityRole, decorative vs. meaningful icon distinction, minimum hit target sizes

So today it's LLM judgment informed by the prompt and training data — which for common patterns (heart for like, X for close) is usually solid, but not guaranteed.

What's on the roadmap is turning those into enforced rules in the system prompt template. Something like:

When using Lucide icons:
- Default to strokeWidth={2}, size={20} unless a larger hero icon is required.
- Every interactive icon MUST have accessibilityRole="button" and
  accessibilityLabel. Decorative icons use accessibilityElementsHidden.
- Prefer semantic mapping: Heart=like, Bookmark=save, X=dismiss,
  Share2=share, Sparkles=AI/magic.

That shifts Lucide from "available dependency" to "opinionated module with rules," which is the direction I want to take it. Appreciate you asking — it's a gap worth closing

I'm working on the update now, please contact me x404GGxproton.me