You want to try an interface idea without setting up a React project first. OGAD (Off Grid AI Desktop) can generate a component with a local model and preview it beside the conversation. Start with a small interaction, revise it in chat, and export a project when you want to continue in your editor.
Download OGAD for Mac or Windows | Desktop releases
What would you like to do with Off Grid AI?
Have a feature or use case you would like us to support? Tell us what you want to do and which device you use.
Write to support@offgridmobileai.co, join our Slack community, or talk to us on Reddit.
This is useful for a filterable list, a tabbed panel, or a form with local state. You can see the behavior before deciding how it should fit into a larger application.
What can you preview without internet?
OGAD bundles React, ReactDOM, and the compiler used by its preview. A component that uses those basics without extra packages can run locally after setup. The workflow is part of the free desktop core on supported Mac and Windows computers.
Extra package imports change that. The preview can load additional packages from a CDN, so importing an icon library or UI package can require internet. Ask for ordinary HTML elements, inline styling, and React state for the first offline version.
The released canvas contains separate bundled-runtime and external-package paths.
Give the model a clear interaction
Try:
Create a React component named App with a filterable list of six sample books. Add a text search box and a toggle to show only unread books. Keep all data in the component. Use React state and inline styles, with no imports beyond React, no external assets, and no network calls. Return one fenced jsx code block with a default export. This is a demo, not a saved library.
The request defines a testable result. It does not imply a database, sign-in, or persistent data storage.
Getting started
- Select a downloaded local model suited to code in Models > Text.
- Send the component request in Chat.
- Open the artifact card, or use Open canvas from the reply menu.
- Try the search and filter in Preview.
- Inspect Code and request a focused correction when needed.
If the preview reports that no component was found, ask for a component named App or a default export. If it reports a package-loading failure, remove the extra import for an offline version.
What should you check in the interaction?
Search for an existing title, a partial match, and a value that matches nothing. Check the empty-result state. Turn the unread filter on and off while a search is active so you can see whether the controls work together.
Give a revision request with the expected behavior:
Keep both filters active together. Show "No matching books" when neither condition is met. Do not add packages. Return the complete updated component.
Repeat the earlier checks after each change. The preview shows what the code does; it does not certify that the behavior matches your intent.
Check the combined state, not each control alone
A search field and a filter can each work separately while failing together. For the sample book list, choose one known unread title and one known read title. Then try these combinations:
| Action | What to inspect |
|---|---|
| Search for the unread title with the filter off | The intended title appears |
| Turn unread-only on without clearing the search | The same unread title remains |
| Search for the read title with unread-only on | It should be excluded by the filter |
| Clear the search with unread-only still on | All sample unread books become available again |
These are checks against the generated sample data. Read that data first rather than assuming the model used a particular title or status.
This gives you a better correction request than “the filters are broken.” You can name the exact combination that failed and ask for the expected result. Keep both controls in the test after each revision.
Decide what the prototype proves
A working preview can show that the component responds to sample input and that the interaction is worth developing. It does not prove that real data, account access, or backend errors have been handled.
Before export, decide what should remain a demo. Keep the sample-data label clear and avoid implying that a book is saved permanently when it only exists in component state. If you add persistence later, test saving and reloading as a separate task.
Use the local preview to resolve the interaction before taking on the larger project. That is the useful shortcut: you can discuss and correct the behavior while the code and its generating conversation are still side by side.
How do you continue in a code editor?
Select Download. A React artifact exports as a ZIP containing a Vite project, source files, and a README. Extract it, inspect the code and package list, then follow the README if you want to run it locally.
Installing the exported project's dependencies can require internet and a Node.js environment. An offline in-app preview does not mean the exported project already contains installed dependencies.
The downloaded prototype is a starting point. Review its state handling, accessibility, and integration needs before adding it to a production application.
Get OGAD, generate one small React interaction, and check its main and empty states before you export it.
Top comments (0)