Using the Refine Console

The Console is where you build your application. Chat with the AI, see live previews, edit code, and export when ready.

Console Layout

The Console has two main areas:

Left side: Your conversation with the AI. This is the primary way to build and modify your app.

Right side: Tabs for Preview, Editor, Plan, and Settings.

AI Chat

The chat panel is your main interface for building.

How it works

Iterating

Keep the conversation going to refine your app:

Add a search box that filters by name or email

Make the role column a dropdown with options: admin, user, viewer

For simple changes, the AI executes directly. For bigger changes, it may ask clarifying questions first.

Each message builds on the previous state.

Attachments

You can attach files to your messages:

• Screenshots of designs you want to match
• Data samples showing expected format
• Error messages for debugging

Rating responses

After each AI response, you can rate it with thumbs up/down. This helps improve the model.

Preview Tab

The Preview tab shows a live, interactive version of your application.

Features

• Live updates — Changes appear as the AI generates them
• Interactive — Click buttons, fill forms, navigate pages
• Viewport switching — Toggle between mobile, tablet, and desktop views

Viewport options

Editor Tab

The Editor tab shows the generated code.

What you can do

• Read — Understand what the AI generated
• Edit — Modify code directly
• Navigate — Browse the file structure

Editing code

Changes you make in the Editor are saved to your project. This is useful for:

• Fine-tuning styles
• Adding custom logic
• Fixing edge cases the AI missed

Code structure

The generated project follows standard Refine patterns:

src/
├── App.tsx           # Main app component
├── pages/            # Page components
├── components/       # Reusable UI components
├── providers/        # Data and auth providers
└── index.tsx         # Entry point

Plan Tab

The Plan tab shows what the AI will build before it starts.

How it works

After you answer the clarifying questions, the AI creates a plan with:

• Phases — Grouped tasks (e.g., "Phase 1: Core UI")
• Tasks — Specific things the AI will build
• Order — What gets built first

Review the plan, then press Execute to start building.

During execution

As the AI works, the Plan tab shows:

• Which tasks are complete
• What's currently being built
• What's coming next

Settings Tab

The Settings tab manages your project configuration.

Integrations

Connect data sources to your project:

1. Open Integrations
2. Select a provider (Supabase, REST API)
3. Follow the connection flow

You can connect or switch integrations anytime without starting a new project.

→ See Supabase Integration or REST API Integration for details.

Secrets

Store sensitive values like API keys and tokens:

1. Click Add Secret
2. Enter a name (e.g., STRIPE_API_KEY)
3. Enter the value
4. Click Save

Secrets are:

• Encrypted at rest
• Available in your generated code as environment variables
• Required when connecting to authenticated APIs

Version History

Refine automatically saves versions as you build.

Rollback

If something goes wrong:

1. Open the chat panel
2. Find the rollback option in the toolbar
3. Select a previous version
4. Your app reverts to that state

Publish & Export

When you're ready to share your app:

→ See Publish & Export for detailed instructions.

Keyboard Shortcuts

Tips for Effective Building

Be specific

❌ "Make it look better"

✅ "Change the table header to have a blue background (#2563eb) and white text"

Build incrementally

Don't try to build everything in one prompt. Start simple, then iterate:

1. "Create a user table with name and email"
2. "Add a status column with badge styling"
3. "Add filters for status and date range"
4. "Add the ability to edit users inline"

Use the Editor for small fixes

If you need to change a color or fix a typo, edit directly in the Editor. Save your tokens for structural changes.

Check Preview on mobile

Many internal tools are used on tablets. Test the mobile viewport before publishing.

Next Steps

• Prompting Guide — Get better results from the AI
• Publish & Export — Ship your application
• Troubleshooting — Common issues and fixes