Build deployable React applications of agentlang apps
npm install @agentlang/ui-builderAgentlang UI Builder๐ Build deployable React applications from AgentLang schemas
A powerful tool that automatically generates complete, production-ready React applications from AgentLang data models. Perfect for rapid application development, prototyping, and building consistent UI frameworks.
- ๐ Automatic Schema Generation: Clones GitHub repositories and generates UI schemas from AgentLang models
- โ๏ธ React App Generation: Creates complete React applications with forms, dashboards, and navigation
- ๐๏ธ Build Pipeline: Complete build process from schema to deployable files
- ๐ฏ CLI Interface: Easy-to-use command-line tool for automation
- ๐ฆ Programmatic API: Use as a library in your own applications
- ๐ง Vite Integration: Built with Vite for fast development and optimized builds
``bash`
npm install @fractl/ui-builder
`bash`Build a complete React app from an AgentLang repository
npx agentlang-build-ui build \
--repo owner/repo-name \
--output ./my-built-app \
--token YOUR_GITHUB_TOKEN
Set your GitHub token:
`bash`
export GITHUB_TOKEN=your_github_token_here
Or create a .env file:
`bash`
GITHUB_TOKEN=your_github_token_here
GITHUB_ORG=your_org_name
GITHUB_REPO=your_repo_name
GITHUB_USERNAME=your_username
#### Build Complete Application
`bash`
agentlang-build-ui build \
--repo owner/repo-name \
--output ./output-directory \
--branch main \
--org your-org \
--username your-username \
--token your-token \
--api-url https://api.example.com
Options:
- -r, --repo : GitHub repository (format: owner/repo) Required-o, --output
- : Output directory for built files Required-b, --branch
- : Git branch to use (default: main)--org
- : GitHub organization (defaults to repo owner)--username
- : GitHub username (defaults to repo owner)--token
- : GitHub personal access token--api-url
- : API URL for the deployed application
#### Generate Schema Only
`bash`
agentlang-build-ui generate-schema \
--repo owner/repo-name \
--branch main
#### Build React App Only
`bash`
agentlang-build-ui build-app
`javascript
import { buildApp, AgentLangBuilder } from '@fractl/ui-builder';
// Simple usage
await buildApp({
repo: 'owner/repo-name',
output: './my-app',
branch: 'main',
});
// Advanced usage with custom options
const builder = new AgentLangBuilder();
await builder.build({
repo: 'owner/repo-name',
output: './my-app',
branch: 'develop',
org: 'custom-org',
username: 'custom-user',
token: 'custom-token',
apiUrl: 'https://api.example.com',
});
`
- Clones the specified GitHub repository
- Installs dependencies
- Uses AgentLang runtime to analyze data models
- Generates comprehensive UI schemas
- Creates React components based on generated schemas
- Builds forms, dashboards, and navigation
- Optimizes for production with Vite
- Produces static HTML, CSS, and JavaScript files
- Ready for deployment to any static hosting service
- Includes all necessary assets and dependencies
``
@fractl/ui-builder/
โโโ src/
โ โโโ cli.ts # Command-line interface
โ โโโ index.ts # Main exports
โ โโโ app/ # React application
โโโ schema-generator/ # AgentLang schema generation
โโโ dist/ # Built output
โโโ package.json
You need a GitHub Personal Access Token with the following permissions:
- repo - Access to private repositoriesread:org
- - Read organization information
Your AgentLang repository should contain:
- AgentLang schema files
- package.json with dependenciesui-spec.json
- Optional for custom UI configurations
The build process generates:
``
output-directory/
โโโ index.html # Main HTML file
โโโ assets/ # Compiled CSS and JavaScript
โ โโโ index-[hash].js # Main application bundle
โ โโโ index-[hash].css # Styles
โ โโโ [hash].js # Vendor libraries
โโโ favicon.ico # Application icon
The generated files can be deployed to:
- Netlify: Drag and drop the output directory
- Vercel: Connect your repository and set build output
- GitHub Pages: Push to gh-pages branch
- AWS S3: Upload files to S3 bucket
- Any static hosting service
#### GitHub Authentication Failed
`bash`
Error: GitHub token is required
Solution: Set your GITHUB_TOKEN environment variable or use --token option.
#### Repository Not Found
`bash`
Error: Repository not found
Solution: Check repository name and ensure you have access permissions.
#### Build Failed
`bash`
Error: React app build failed
Solution: Ensure the schema generation completed successfully and ui-schema.ts exists.
#### Output Directory Not Empty
`bash`
Error: Output directory is not empty
Solution: Use an empty directory or clear the existing contents.
Enable verbose logging:
`bash`
DEBUG=* agentlang-build-ui build --repo owner/repo --output ./app
`bashClone the repository
git clone https://github.com/fractl-dev/ui-builder.git
cd ui-builder
$3
`bash
Build CLI and React app
npm run build:allBuild only CLI
npm run build:cliBuild only React app
npm run build-app
`๐ Examples
$3
`bash
Build a simple app
agentlang-build-ui build \
--repo my-org/my-data-model \
--output ./my-app
`$3
`bash
Build with custom configuration
agentlang-build-ui build \
--repo my-org/complex-model \
--branch develop \
--output ./production-app \
--org enterprise-org \
--username enterprise-user \
--api-url https://api.enterprise.com
`$3
`yaml
GitHub Actions example
name: Build AgentLang App
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm install -g @fractl/ui-builder
- run: |
agentlang-build-ui build \
--repo ${{ github.repository }} \
--output ./dist \
--token ${{ secrets.GITHUB_TOKEN }}
- uses: actions/upload-artifact@v3
with:
name: built-app
path: ./dist
``We welcome contributions! Please see our Contributing Guide for details.
This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation: GitHub Wiki
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- AgentLang - The core language
- @agentlang/ui - React UI components
- Fractl Studio - Development environment
---
Built with โค๏ธ by the Fractl Team