apps

Name: apps
Availability: InStock
Author: Mako

Manage React apps in the Mako workspace with live preview and editing.

11|6|Updated Nov 15, 2025

Search Tags:#workflow #react #duckdb #bindings #apps #live-preview #app-sdk

Ready to run

npx skills add https://github.com/mako-ai/mako --skill apps-mako-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: apps
Source: https://github.com/mako-ai/mako/tree/main/api/src/agent-skills/apps
Command: npx skills add https://github.com/mako-ai/mako --skill apps-mako-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Apps enable developers to work on React projects directly in the browser, rendering live in a tab so changes reflect instantly without a traditional build step.

Core Features & Use Cases

Live preview of React apps in a workspace tab, with editable source files and immediate feedback.
Dependency management and integration with the Mako app SDK (useQuery / useDuckDB) for real-time data bindings.
Materialized data paths and parquet bindings to support fast analytics inside the browser.

Quick Start

Open an app with create_app to scaffold a React + TypeScript project, edit files in the default entrypoint src/App.tsx, then view the live preview.

Frequently Asked Questions about apps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I live preview a React app in the browser without a build step?▼

Live previewing a React app in the browser without a build step is done by loading it into a workspace tab, where source files reflect changes immediately. You can edit the default entrypoint like src/App.tsx and see updates render instantly.

How do I bind workspace data to a React app using DuckDB?▼

Binding workspace data to a React app using DuckDB involves creating data bindings and materializing parquet bindings. You can use the app SDK hooks like useQuery and useDuckDB to query and connect data directly within your app.

What is the best way to scaffold a TypeScript React project for live editing?▼

Scaffolding a TypeScript React project for live editing is best done by creating an app, which sets up the project structure automatically. You can then edit files in the default entrypoint src/App.tsx and view the live preview instantly.

Can I manage dependencies for React apps within the Mako workspace?▼

Yes, you can manage dependencies for React apps within the Mako workspace. The workflow supports adding dependencies and integrating them with the app SDK to support real-time data bindings and analytics inside the browser.

How do I inspect the state of a live React app?▼

Inspecting the state of a live React app is accomplished by opening and identifying the app within the Mako workspace. This workflow enables reading app state to monitor and manage real-time editing behavior.