Open Intelligent UI 實測：AI 生成介面的體驗與本機執行指南

Artificial intelligence has changed the way by which developers are making applications, which range from code generation and debugging tasks to assisting clients in searching for information and automating various tasks.

However, AI applications can provide more than just answers. The applications can also give information through interfaces which contain elements needed to realize the tasks of users.

This is where generative UI comes in. It allows AI-powered applications to generate or assemble user interfaces, making it possible to turn a natural-language request into something users can explore, customize, and interact with.

For developers, this opens up new possibilities for building AI assistants, interactive dashboards, planning tools, and applications that adapt their interfaces to different requests.

I wanted to see how Open Intelligent UI handled different requests, what the generated interfaces looked like, and whether the results were genuinely interactive. After testing three prompts, I decided to share my experience alongside a practical guide to running the demo locally.

In this article, I'll explain the basics of generative UI, introduce OpenUI, and walk you through setting up and exploring the Open Intelligent UI demo.

TL;DR

Generative UI lets AI-powered applications create interfaces that help users do more with an answer. Instead of receiving only text, users can interact with structured content, forms, tables, maps, and other UI components.

Here's what you can explore with Open Intelligent UI and the tools behind it:

• Open-source demo: Run the Open Intelligent UI repository locally and experiment with AI-generated interfaces.
• Interactive experiences: Build AI-powered interfaces with components suited to different tasks.
• Multiple model options: Use supported models through OpenUI Cloud, including eligible free models.
• A free starting point: The published OpenUI Cloud plan offers 3,000 OpenUI Cloud API calls per month, subject to its current terms.

You can run the demo locally with Node.js, an OpenUI Cloud API Key, and a few terminal commands. I'll also share my hands-on results, so you can see what the experience looks like.

What Is Generative UI, and Why Does It Matter?

Most AI chat interfaces follow a familiar pattern: you ask a question, and the model replies with text. That works well for explanations, brainstorming, and quick answers, but some tasks are easier to handle through an interface.

Imagine asking an AI to compare React, Vue, and Svelte. A written explanation can cover their differences, but an interactive table could let you scan strengths and weaknesses more easily.

Generative UI is an approach where AI generates or assembles a user interface in response to a request. The interface can include structured content and interactive components that make the answer easier to explore and use.

The exact result depends on the system, its available components, and the model powering it. Some implementations generate interface descriptions that a renderer turns into UI components; others rely on predefined tools and component libraries.

The goal is to make the response fit the task.

This approach can be useful in several daily scenarios:

• Travel planning: Display destinations, maps, photos, and an itinerary that users can edit.
• Data comparison: Present products, frameworks, or services in a structured table.
• Forms and planning tools: Let users choose options, adjust settings, and build a result around their preferences.
• AI assistants for business applications: Give users controls and structured information that help them complete a task within an existing workflow.

Generative UI doesn't automatically make every AI answer better. A simple factual question may need only a sentence or two. The value becomes clearer when the user needs to compare options, adjust inputs, explore information, or take the next step.

That's what I wanted to explore with Open Intelligent UI: how generative UI works when you can interact with the results yourself.

What Is OpenUI?

OpenUI is an open standard for generative UI that helps developers build AI-powered applications with rich, structured, and interactive interfaces.

OpenUI provides tooling for turning AI-generated responses into UI components that users can explore and interact with. OpenUI Gateway provides access to supported AI models through a common API.

To see how this works in practice, you can explore the Open Intelligent UI repository. It contains an open-source demo application that you can run locally, experiment with using your own prompts, and adapt to explore generative UI in practice.

It's worth distinguishing the two names: OpenUI refers to the broader tooling and platform, while Open Intelligent UI is a demo application.

What Can You Explore With Open Intelligent UI?

Open Intelligent UI gives developers a hands-on way to explore how AI can turn natural-language prompts into interactive user interfaces. You can experiment with different requests and see how the demo presents information based on the task.

Here are a few examples of what you can explore:

• Interactive travel planners: Generate an itinerary with destinations, photos, and a map that users can explore.
• Technology comparisons: Present information about frameworks, tools, or products in a structured table with strengths, weaknesses, and recommendations.
• Forms and planning tools: Create interfaces with input fields, dropdowns, checkboxes, and buttons that let users customize their choices.
• Structured AI responses: Organize information into layouts that are easier to scan and interact with than a long text response.
• Different interface patterns: Experiment with prompts to see how the generated interface changes depending on the information users need and the actions they want to take.

The results depend on the prompt, the model, and the tools and components supported by the application.

Choosing a Model for Open Intelligent UI

The model you choose affects how well Open Intelligent UI follows your prompt and generates a useful interface. Model capabilities, response speed, and cost can all influence the results, so it's worth checking compatibility before settling on one.

OpenUI Gateway gives developers access to different models through a common API. You can choose a model that fits your budget and experiment with different options as your application evolves. Check the OpenUI Gateway models list for available models and their capabilities.

You can also connect a locally running LLM through Ollama. The Open Intelligent UI demo supports Ollama through its OpenAI-compatible Chat Completions endpoint, allowing you to experiment with local models instead of relying on OpenUI Gateway for model inference.

Free Models Worth Exploring

At the time of my test, the free-model options I identified included:

google/gemini-3.6-flash-free
google/gemini-3.5-flash-free
google/gemini-3.1-pro-free
google/gemini-3.1-flash-lite-free

Privacy note: OpenUI Gateway's documentation states that requests sent to free models may be used for model training. Avoid submitting sensitive or confidential information when experimenting with these models, and review the current data-handling terms before using them.

I chose google/gemini-3.6-flash-free for my experiment because I wanted to try OpenUI without adding a separate paid model API key.

However, there's an important detail worth knowing before you choose a model.

A model being available through the gateway doesn't guarantee that it supports every feature used by a particular application. The Open Intelligent UI demo uses the Responses API and gateway-hosted tools, including image search, so compatibility needs to be checked with the actual application.

For my experiment, the free model was a practical starting point. If you encounter errors or some features don't work as expected, check the model's supported capabilities and the application's logs before assuming the whole project is broken.

How to Run Open Intelligent UI Locally: My Hands-On Test

Let's get the demo running.

I chose the existing Open Intelligent UI project so I could explore its generated interfaces without building a separate application from scratch.

Step 1: Create a Thesys Account and Get Your API Key

First, visit the Thesys Console and create an account or sign in.

From the console, open the AI Gateway setup and generate an API key. This key allows your local application to make requests through OpenUI Cloud.

The OpenUI Gateway Free plan includes 3,000 API calls per month. Each generated response uses an API call, while model-token charges depend on the model you choose. Some eligible models have no token charges, although usage limits may apply. Check the current pricing and credits documentation before getting started.

Keep your API key private. You'll add it to a local environment file, so there's no reason to put it in your source code or publish it in a repository.

Step 2: Clone the Open Intelligent UI Repository

You'll need Git and Node.js installed on your machine. The repository's README specifies Node.js 24, so check your version before proceeding.

Open a terminal and run:

git clone https://github.com/thesysdev/open-intelligent-ui.git

Move into the project directory:

cd open-intelligent-ui

Install the dependencies:

npm install

This installs the packages the application needs to run. Depending on your internet connection and package cache, the installation may take a little time.

Step 3: Configure Your API Key and Model

Create a .env.local file in the project's root directory. The repository includes a .env.example file you can use as a reference, but the local configuration should be saved in .env.local.

Add the following lines:

THESYS_API_KEY=YOUR_THESYS_API_KEY
THESYS_MODEL=YOUR_MODEL

Replace YOUR_THESYS_API_KEY with the key you generated in the Thesys Console and YOUR_MODEL with the model you chose.

The two variables have different jobs:

• THESYS_API_KEY authenticates your requests to the gateway.
• THESYS_MODEL tells the application which model to use.

The second variable is optional in the project configuration, but setting it explicitly makes your chosen model clear. If you want to try another model later, you can change its ID here, provided that the model is available and compatible with the application's API and tools.

Optional: Connect a Local Model With Ollama

If you prefer to run a model locally, you can configure the demo to use Ollama instead of OpenUI Gateway.

First, install Ollama, download a model supported by your setup, and make sure the Ollama service is running. For example, you can download a model using:

ollama pull qwen3.8:27b

Then update your .env.local file with the Ollama configuration:

MODEL_PROVIDER=ollama
OLLAMA_MODEL=qwen3.8:27b
OLLAMA_BASE_URL=http://localhost:11434/v1

These settings select Ollama as the model provider, specify the local model, and configure the OpenAI-compatible API base URL.

Restart the development server after changing your environment variables. Check Ollama's OpenAI compatibility documentation for the latest configuration details.

Local inference means the model runs on your machine, so the available performance depends on your hardware and the model you select.

Make sure .env.local stays out of Git commits and public repositories.

Step 4: Start the Application

With your environment file saved, run:

npm run dev

Once the development server starts, open http://localhost:3000 in your browser.

You should see the demo's chat-style interface, ready for you to enter a prompt.

If you've changed the environment variables while the server is running, stop it with Ctrl+C and start it again.

If the interface loads but sending a prompt fails, check the terminal output and browser developer console for errors. An API key issue, model compatibility problem, or failed tool call may prevent a response from being generated.

Step 5: Try Some Prompts

I tested three prompts covering different use cases: visual trip planning, technology comparisons, and an interactive form.

Here's what I asked the demo to generate in each case.

Prompt 1: Plan a trip

Plan a one-day trip in San Francisco. Show the stops in order, include photos and an interactive map, and make the itinerary editable.

I wanted to see whether the demo could combine a useful itinerary with visual context and an interactive map. The editable itinerary was also important because travel plans are much more useful when you can adjust them to suit your needs.

Prompt 2: Compare frontend frameworks

Compare React, Vue, and Svelte for a beginner building a small web application. Show the comparison in an interactive table with strengths, weaknesses, and a recommendation.

This prompt explored a different kind of task: presenting information in a structured format. I wanted to see how the generated UI would organize the comparison and whether the result would be easier to explore than a conventional text response.

Prompt 3: Build a weekend-trip planner

Create an interactive weekend-trip planner with a destination field, a budget selector, a trip-duration selector, and a button to generate a suggested itinerary.

These prompts cover three different needs: displaying visual information, comparing technologies, and generating an interface with form controls. Your results may vary depending on the model and the features supported by the application.

The screenshots below will give you a closer look at each result.

What I Loved About Open Intelligent UI

My experience with Open Intelligent UI was genuinely positive. The generated interfaces looked clean and polished, and the response time was pretty quick. I was impressed by the quality of the results, especially considering that I was using a free model for my test.

The interaction itself was another big plus. I could click buttons, check boxes, change dropdown selections, and explore the map in the travel-planning interface. Being able to try the generated components directly made the experience feel much more engaging.

I also appreciated how the interface could take different forms depending on the request. A trip itinerary benefits from photos and a map, a framework comparison works well as a table, and a weekend planner needs fields and selectors. The demo gave me a chance to see those different layouts without having to design each one manually.

For a demo that you can run locally and experiment with yourself, it was a genuinely rewarding introduction to generative UI.

Who Is Open Intelligent UI For?

Open Intelligent UI is worth exploring if you want to see how generative UI works in a real application and experiment with AI-generated interfaces without building everything from scratch.

It may be useful for:

• Frontend developers who want to explore how AI-generated responses can become interactive tables, forms, maps, and other UI components.
• Full-stack developers looking for a starting point to experiment with generative UI in a web application.
• AI application builders exploring ways to make conversational experiences more interactive and task-oriented.
• Product teams and technical founders who want to prototype AI-powered planning tools, comparison interfaces, or interactive assistants.
• Developers learning generative UI who want to study an existing implementation and experiment with their own prompts.

The repository gives you a working starting point, but adapting it to your own application will depend on your requirements, the model you choose, and the components and tools your experience needs.

📌 If you find this useful, consider starring the GitHub repo; it helps the project grow and signals support for open‑source infrastructure.

⭐ Star Open Intelligent UI on GitHub

Frequently Asked Questions

1. What is Open Intelligent UI?

→ Open Intelligent UI is an open-source demo application from Thesys that lets developers explore generative UI in practice. You can run it locally, send prompts, and see how an AI-powered application can present responses through interactive interfaces.

2. What can you do with Open Intelligent UI?

→ You can experiment with prompts that generate different interface experiences, such as travel itineraries with maps, framework comparisons, and forms with interactive controls. It's a useful starting point for understanding how generative UI works and exploring ideas for your own AI-powered applications.

3. Can I run Open Intelligent UI locally?

→ Yes. You can clone the Open Intelligent UI repository, install its dependencies with npm install, configure your .env.local file with your OpenUI Cloud API Key and preferred model, and start the development server with npm run dev. Follow the repository's README for the latest prerequisites and setup instructions.

4. How is generative UI different from a regular AI chatbot?

→ A conventional AI chatbot generally presents its answers as text, sometimes with links or basic formatting. Generative UI can also produce or assemble interfaces such as interactive tables, forms, maps, and controls, allowing users to explore information and adjust options directly.

5. Is generative UI suitable for production applications?

→ It can be, depending on the use case and implementation. Before deploying a generative UI experience, test the generated components, validate important information, handle failed requests, and consider accessibility, security, privacy, performance, and API costs.

Final Thoughts

Open Intelligent UI offers developers a practical way to explore generative UI through an existing, open-source application. You can run it locally, experiment with prompts, and see how AI-generated interfaces respond to different tasks.

If you're interested in building more interactive AI-powered experiences, take a look at the Open Intelligent UI repository on GitHub, run it locally, and experiment with prompts related to your own projects.

What would you build with Open Intelligent UI?

Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hadil Ben Abdallah