Build a Generative UI AI App in Under 5 Minutes with Thesys C1

Thesus C1: Generative UI for AI Applications

Key Concepts:

• LLMs (Large Language Models): Powerful AI models like GPT, Claude, and Gemini that drive modern AI applications.
• Middleware: Software that connects different applications or systems, in this case, LLMs and front-end UIs.
• Generative UI: User interfaces created dynamically by AI, adapting to model outputs in real-time.
• JSObject-based UI Schema: A structured data format (JavaScript Object Notation) used by C1 to define and transmit UI elements.
• Tool Calls: The ability of an LLM to interact with external APIs, databases, or connectors to retrieve and utilize information.
• SDK (Software Development Kit): A set of tools and libraries that developers can use to build applications for a specific platform or technology.

1. The Problem with Current AI App UX

The video highlights a significant issue in the current AI application landscape: the user experience (UX) hasn’t kept pace with the advancements in Large Language Models (LLMs). While models like GPT, Claude, and Gemini are becoming increasingly sophisticated, most AI apps still rely on text-heavy interfaces – text input and text output. This leads to user drop-off due to the unintuitive, overwhelming, and non-adaptive nature of these interfaces. Developers often resort to simple chat interfaces for ease of development, but these are often a suboptimal user experience, especially when dealing with semi-structured data which requires significant “glue code” for rendering. The core problem is that the UI struggles to keep up with the evolving capabilities of the underlying model.

2. Introducing Thesus C1: A Generative UI API

Thesus C1 is presented as a solution to this problem. It’s an API middleware designed to augment LLMs, enabling them to respond with rich, interactive UIs in real-time instead of plain text. C1 acts as a bridge between the LLM and the front-end, functioning as a “generative UI API.” It’s compatible with various LLMs and UI frameworks including Versal AI SDK, Copilot Kit, and AGUI, and adapts to different form factors while maintaining brand consistency.

3. C1 in Action: Examples and Comparisons

The video demonstrates C1’s capabilities with several examples:

• Stock Chart Visualization: A prompt requesting a chart of top-performing stocks resulted in an interactive graph with trend lines using C1, compared to a simple text output from a standard AI app.
• Interactive Shopping Agents: C1 enables the creation of adaptive, on-brand shopping agents without requiring templates or vendor lock-in.
• Q2 Revenue Analysis: A prompt asking for Q2 revenue by region yielded a dynamic pie chart and bar graph with interactive elements (hovering for values, clicking for details) when using C1, versus a text-based response from ChatGPT.
• Product Category Trend Analysis: C1 dynamically updated the chart layout to display product category trends over time when prompted, demonstrating its ability to adapt to changing queries without manual UI adjustments.

These examples clearly illustrate C1’s ability to transform raw AI output into actionable and intuitive visualizations.

4. Technical Implementation & Workflow

The video outlines a two-step integration process:

1. Backend Update: Modify the backend endpoint to point to the Thesus API, providing your API key and selecting a desired LLM (e.g., GPT-5, Claude).
2. Frontend Integration: Install the C1 SDK and update the app’s logic to render and display the interactive, real-time responses received from C1.

A one-line command (npx create-c1-app) is provided for quickly spinning up a test project.

The technical workflow involves:

1. The backend sends model responses through the C1 API.
2. C1 parses the data, applies system and UI rules.
3. C1 emits a JSObject-based UI schema.
4. This schema is streamed to the front-end.
5. The C1 React SDK renders the UI in real-time, handling streaming updates, error boundaries, state management, and callback wiring.

C1 also supports “tool calls,” allowing the LLM to query external resources and render structured outputs automatically.

5. Setting Up a Demo Project

The video provides a step-by-step guide to setting up a demo project:

1. Prerequisites: Ensure Git and Node.js are installed.
2. Account Creation: Sign up for a free Thesus account (link in description) to receive up to 5 million free tokens.
3. API Key Generation: Generate an API key from the Thesus console.
4. Repository Cloning: Clone the example repository using git clone.
5. Navigation & Dependency Installation: Navigate to the template directory using cd and install dependencies with npm install.
6. API Key Configuration: Set the API key in the environment file.
7. Project Execution: Run the project using npm rundev.

The demo project is a sales copilot built with Next.js and GPT.

6. Key Arguments & Benefits

The central argument is that C1 significantly improves the UX of AI applications by moving beyond text-based interactions. The presenter supports this with:

• Demonstrated Visualizations: The clear contrast between C1-powered interfaces and traditional text outputs.
• Efficiency Gains: C1 can ship rich interactive AI apps 10 times faster.
• Cost Reduction: Front-end maintenance costs can be cut by over 80%.
• Improved User Experience: Leading to better user retention and engagement.

7. Notable Quote

“That’s the beauty of C1. It adapts to the query automatically.” – The presenter, emphasizing C1’s dynamic and adaptive UI generation.

8. Data & Statistics

• 5 Million Free Tokens: Thesus offers up to 5 million free tokens for new users.
• 10x Faster App Development: C1 claims to enable 10 times faster development of rich interactive AI apps.
• 80%+ Reduction in Maintenance Costs: C1 promises over 80% reduction in front-end maintenance costs.

9. Logical Connections

The video logically progresses from identifying the problem of poor AI app UX, to introducing C1 as a solution, demonstrating its capabilities with concrete examples, explaining the technical implementation, and finally, highlighting the benefits and providing resources for getting started. The comparisons between C1-powered apps and traditional AI apps consistently reinforce the value proposition.

Conclusion

Thesus C1 presents a compelling approach to improving the user experience of AI applications. By acting as a generative UI middleware, it allows developers to move beyond text-heavy interfaces and deliver dynamic, interactive, and visually appealing experiences. The ease of integration, coupled with the potential for significant efficiency gains and cost reductions, makes C1 a promising tool for anyone building the next generation of AI-powered applications. The free token offering provides a low-risk opportunity to explore its capabilities.