Skip to main content

Building with AI Agents

Vibe is designed so AI agents can develop and ship a complete app end-to-end — scaffold the project, write the code, build it, create the app, deploy it, and iterate — with exactly one human action in the entire workflow: clicking Approve in the browser during vibe login.

That's it. From a fresh machine to a live URL, the agent handles everything else: installing Node, installing the CLI, scaffolding the framework, wiring the SDK, building, creating the app, deploying, and iterating on subsequent changes.

The agent autonomy contract#

StepWho does it
Install Node.js / npmAgent (via nvm, no sudo)
Install @facilio/vibe-cli and @facilio/vibe-sdkAgent
Scaffold the project (any framework)Agent
vibe login — one-time OAuth approvalUser clicks "Approve" in browser once
vibe app create --name "..." (non-interactive)Agent
Write the source code (HTML/JS/React/Vue/…)Agent
Discover connectionSlug / actionSlug / payload shapes via the MCP catalogAgent
npm run build && vibe deployAgent
Iterate ("change the button color", "add a section")Agent — no further login / app create needed

After vibe login, the agent reports the live URL to the user and is ready to take further requests.

The llms.txt reference#

Hand this URL to any AI agent and it has the complete build-and-deploy guide for Vibe:

https://facilio.com/developers/docs/vibe/llms.txt

It covers:

  • The four-step workflow (login → app create → build → deploy)
  • Hard constraints (index.html in the build output root, static-only, browser-cookie auth, executeAction is the only data path)
  • Node bootstrap via nvm with no sudo
  • CLI install with fallback to npx when global install fails
  • SDK setup for both bundlers and plain HTML
  • The getCurrentUser() → vibe.login() gating pattern
  • The executeAction(connectionSlug, actionSlug, payload) data path and the MCP catalog as source of truth
  • End-to-end React + Vite example
  • Minimal vanilla-HTML example
  • Pre-deploy checklist

Open llms.txt — the full document.

One-prompt recipes#

Claude (Claude Code, Claude.ai, Claude API)#

Read https://facilio.com/developers/docs/vibe/llms.txt
Build me a Facilio Vibe dashboard that lists my assets grouped by site.Use React + Vite. Wire SDK auth (getCurrentUser → login fallback),call vibe.executeAction('facilio-cmms', 'list-assets'), and group theresult by siteId. When done, run `npm run build && vibe deploy` andprint the live URL.
I'll click "Approve" in the browser when vibe login opens it — that'sthe only thing I'll do.

For ongoing work, create a Claude Project and add https://facilio.com/developers/docs/vibe/llms.txt as a knowledge source. Every conversation in that project has Vibe context built in.

ChatGPT (web, GPT-4 / GPT-5, Custom GPTs)#

Read https://facilio.com/developers/docs/vibe/llms.txt
Build a Facilio Vibe app: a vendor portal showing open workorders forthe signed-in user. Use plain HTML + the SDK from CDN — no bundler.
Ship it: write index.html and app.js into a dist/ folder, writevibe.json, run `vibe login`, then `vibe app create --name "Vendor Portal"`,then `vibe deploy`. Print the live URL when done.

You can also create a Custom GPT with the URL added to its configuration so every conversation has SDK context.

Cursor / VS Code (any MCP-aware IDE)#

@url https://facilio.com/developers/docs/vibe/llms.txt
Add a new Vibe app to my workspace: a one-page tool that lets atechnician check in/out of a workorder. Use the MCP catalog athttps://mcp.facilio.com/mcp to discover the right action slugs.Scaffold with Vite + React, wire the SDK, build, and deploy.

Or drop llms.txt into your project root — Cursor automatically includes it as context.

Lovable#

Read https://facilio.com/developers/docs/vibe/llms.txt
Build a Facilio Vibe dashboard widget showing a bar chart ofwork orders grouped by status. Use Vue 3 + Vite. Follow the SDKpatterns from the documentation — the app runs at its ownsubdomain and uses browser-cookie auth.

Discovering Facilio actions via MCP#

Agents shouldn't invent connectionSlug / actionSlug strings. The authoritative catalog lives at:

https://mcp.facilio.com/mcp

Any MCP-aware client (Claude Desktop, Claude Code, Cursor, ChatGPT with MCP, custom agents) can connect and discover:

  • Every available connection (e.g. facilio-cmms)
  • Every action under each connection (e.g. list-assets, create-workorder)
  • The input schema for the action's payload
  • The response schema so the agent knows how to parse the result

Agent workflow:

  1. User asks for "a dashboard showing my assets."
  2. Agent queries the MCP server, finds facilio-cmms → list-assets.
  3. Agent reads the action's input/output schema.
  4. Agent writes vibe.executeAction('facilio-cmms', 'list-assets', {...}) with the correct payload.
  5. Agent parses the response using the documented shape.

This is why Vibe + MCP works for agents: there's a deterministic source of truth for both what's available and how to call it.

Tips for better results#

  1. Always include the llms.txt URL — https://facilio.com/developers/docs/vibe/llms.txt.
  2. Name the framework you want — "React + Vite", "plain HTML", "Vue 3", etc. The bundler / build output is the most error-prone step.
  3. Be specific about the data — "list assets grouped by site" beats "show me data". The agent can then resolve the right MCP action.
  4. Let the agent run vibe login itself, and warn the user once: "A browser tab will open — click Approve to finish signing in. That's the only thing I need from you."
  5. For iteration prompts, agents only need to re-run npm run build && vibe deploy. No more login or app create.

Reference#

On This Topic