Using DoDo Framework with Claude AI

Claude AI (by Anthropic) can help you scaffold, build, and debug DoDo Framework applications quickly. Below are example prompts for each of the four boilerplate types available in the create-dodo-boilerplates repository.

Start by cloning the appropriate branch, then paste the prompts into your Claude session to extend and customise the app.

SPA — Single Page Application (spa branch)

The spa branch is the foundation for browser-based Single Page Applications. It uses Vite as the build tool, Bootstrap for styling, and DoDo's router with multiple controllers.

Create the boilerplate:

npm init dodo@latest
# When prompted, select: spa
cd my-app
npm run dev

Prompt examples for Claude AI:

# 1. Scaffold a new route and controller
I have a DoDo SPA project (spa branch of create-dodo-boilerplates).
Create a new page called "About". I need:
  - src/controllers/AboutCtrl.js that loads navbar, main content and footer views
  - src/views/pages/about/index.html with a short "About us" section
  - Add the route ['when', '/about', AboutCtrl] to src/conf/$routes.js
  - Add an "About" nav link in src/views/inc/navbar.html after the existing links

# 2. Add a REST API call inside a controller
In my DoDo SPA controller (src/controllers/HomeCtrl.js), add an __init() method that
fetches https://jsonplaceholder.typicode.com/posts and stores the result in this.posts.
Then in the corresponding view render the first 5 posts as Bootstrap cards.

# 3. Add client-side search with dd-model
In my DoDo SPA project, add a live search input at the top of the posts list.
Use dd-model="searchQuery" to bind the input, and dd-if to show only the posts
whose title contains the search string. Update the controller accordingly.

appOne — One Page Application (appOne branch)

The appOne branch is designed for single-controller, no-router applications. The entire logic lives in one HomeCtrl that calls loadSelfview().

Create the boilerplate:

npm init dodo@latest
# When prompted, select: appOne
cd my-app
npm run dev

Prompt examples for Claude AI:

# 1. Convert the placeholder fetch into a real API call
My DoDo appOne project (appOne branch) currently fetches posts from jsonplaceholder.
Replace that with a call to https://api.example.com/items, map the response to
{ id, name, description } objects, store them in this.items, and render them in
src/index.html using dd-foreach="items => item".

# 2. Add a loading spinner
In my appOne DoDo project, show a Bootstrap spinner inside #main while data is being
fetched in __init(). Hide it once the data is loaded and the view is rendered.
Use dd-show to control spinner visibility via this.isLoading.

# 3. Add form with dd-model and submit handler
In my DoDo appOne project, add a form with two fields: name (dd-model="form.name")
and email (dd-model="form.email"). When submitted, validate that both fields are
non-empty, then POST the data to https://api.example.com/contact using this.$httpClient
and display a success or error message.

Desktop App (desktop-electronforge branch)

The desktop-electronforge branch packages a DoDo SPA into a cross-platform desktop application using Electron Forge. The renderer process is a standard DoDo app; main.js manages the Electron window.

Create the boilerplate:

npm init dodo@latest
# When prompted, select: desktop-electronforge
cd my-app
npm run start     # Electron dev mode
npm run make      # Package for distribution

Prompt examples for Claude AI:

# 1. Add a native menu and IPC communication
In my DoDo desktop-electronforge project, add a native application menu in src/main.js
with a "File > Open" item. When clicked, open a native file dialog (dialog.showOpenDialog),
read the selected file with Node's fs module, and send the content to the renderer via
ipcMain/ipcRenderer so the DoDo controller can display it.

# 2. Persist app state to a local JSON file
In my Electron + DoDo app, create a settings module in src/conf/settings.js that
reads and writes a settings.json file in the user's app-data directory using Electron's
app.getPath('userData'). Expose read/write via ipcMain handlers and call them from
the DoDo controller using preload.js contextBridge.

# 3. System tray icon with show/hide toggle
In my DoDo desktop-electronforge app, add a system tray icon (use src/public/icon.png).
The tray context menu should have "Show", "Hide" and "Quit" items that control the
BrowserWindow visibility. Update src/main.js and make sure the window does not close
when the user presses the X button — it should minimise to tray instead.

Chrome Extension (extension-chrome branch)

The extension-chrome branch scaffolds a Manifest V3 Chrome Extension powered by DoDo. It includes separate Vite configs for the action popup, background service worker, content scripts, options page, and the main DoDo app.

Create the boilerplate:

npm init dodo@latest
# When prompted, select: extension-chrome
cd my-app
npm run build:all   # build all entry points
# Then load the dist/ folder as an unpacked extension in chrome://extensions

Prompt examples for Claude AI:

# 1. Inject a content script that highlights keywords
In my DoDo extension-chrome project, update src/content_scripts/content.js to scan the
active page for a list of keywords stored in Chrome's sync storage (chrome.storage.sync).
Wrap each match in a <mark> element. The list of keywords should be editable on the
options page (src/options/) and saved to chrome.storage.sync on submit.

# 2. Communicate between popup and background service worker
In my DoDo Chrome extension, when the user clicks "Analyse Page" in the action popup
(src/action/), send a chrome.runtime.sendMessage to the background service worker
(src/background/). The background should fetch the current tab's URL, call
https://api.example.com/analyse?url=... and return the result to the popup to display.

# 3. Add a badge counter that tracks visits
In my DoDo Chrome extension background service worker, listen to the chrome.tabs.onUpdated
event. Each time a page load completes, increment a counter in chrome.storage.local and
update the extension badge text (chrome.action.setBadgeText) with the current count.
Reset the counter when the user clicks "Reset" in the action popup.