# A Problem You Never Knew About

Source: https://www.youtube.com/watch?v=w3pmfaczpLc
Recap page: https://rapidrecap.app/video/w3pmfaczpLc
Generated: 2025-11-11T09:31:41.864+00:00

---
## Quick Overview

Theysys C1 is an API middleware that augments Large Language Models (LLMs) to respond with interactive, adaptive UI components like charts, forms, and lists instead of raw text, fundamentally changing how AI applications are built and experienced across various frameworks like Vercel AI SDK.

**Key Points:**
- Theysys C1 acts as middleware, augmenting LLMs like Claude and GPT-5 to output structured UI specification objects (C1 DSL) instead of plain text.
- The C1 API is OpenAI compatible, allowing integration with any framework supporting the OpenAI SDK, including guides for Vercel AI SDK, LangChain, and others.
- The system supports generating various dynamic UI components, including dashboards with charts, interactive forms, data tables, and media galleries, which adapt responsively to different screen sizes.
- When a user prompts the AI, the backend calls the C1 API, which returns the C1 DSL, and the frontend UI renders the corresponding interactive component using the C1Component.
- The demonstration shows C1 generating an analytics dashboard with interactive tabs (Overview, Sales, Users) and a detailed contact form with various input types.
- The video highlights that C1 SDK handles streaming updates and error boundaries, ensuring a smooth user experience even with dynamic content updates.

![Screenshot at 01:15: The main Thesys landing page showing the promise: "Make AI apps respond with UI" via C1 middleware augmenting LLMs to generate real-time interactive UI instead of text.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-01-15.png)

**Context:** This video introduces Thesys C1, a new approach to building AI applications that moves beyond purely text-based responses from Large Language Models (LLMs) like OpenAI's GPT-5 and Anthropic's Claude. The core concept is transforming the raw model output into structured, interactive User Interface (UI) elements, effectively turning the AI into a Generative UI assistant.

## Detailed Analysis

The video demonstrates Thesys C1, an API middleware designed to bridge the gap between LLM output and rich, interactive user interfaces. Instead of returning verbose text, the C1 API, which is compatible with the OpenAI SDK endpoint, returns a UI Specification Object (C1 DSL) when called by the backend. This DSL dictates which UI component (like charts, forms, or lists) should be rendered. The demonstration shows C1 handling various requests: summarizing a PDF, comparing iOS vs. Android (resulting in a comparison table), generating complex data visualizations like bar charts showing F1 driver wins, and creating fully functional, responsive contact forms with different input types (text, radio buttons, checkboxes). The system supports streaming responses and framework integration, specifically showing examples using the Vercel AI SDK. The workflow involves the user prompt going to the backend, the backend calling the C1 API, C1 returning the DSL, and the frontend UI rendering the appropriate component using the C1 SDK. The overall goal is to make AI apps significantly more interactive and user-friendly than traditional text-only chat interfaces.

### C1 Introduction & Core Functionality

- C1 is API middleware augmenting LLMs like GPT-5 and Claude
- LLMs respond with interactive UI in real-time instead of text
- C1 returns a UI specification object (C1 DSL) based on the model selected.

### Demonstrated Use Cases

- PDF summarization showing key lab findings in a table format
- Comparison of iPhone vs. Android outputting a detailed Markdown table
- Generating an F1 driver wins chart
- Creating a complex contact form with various input elements.

### Technical Setup & Integration

- Developers must update the backend endpoint URL to point to Thesys (e.g., https://api.thesys.dev/v1/embed) and use the correct API key
- Install the C1 SDK via npm install @thesysai/genui-sdk
- C1 supports tool calling and integration with frameworks like Vercel AI SDK.

### UI Rendering & Interactivity

- The C1 SDK handles rendering the structured response into interactive components like dashboards, forms, and tables
- The system supports streaming updates and maintains interactive elements within the generated UI.

### Code Customization

- Users have control over the implementation, including defining a custom theme with specific color palettes, typography settings, and border radii within the application code.

![Screenshot at 00:05: Demonstration of various AI models available for selection, including GPT-4o, GPT-4.5, and Claude models.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-00-05.png)
![Screenshot at 00:07: Example of the mobile app interface responding to a request with an interactive product card for a Dinnerware Set.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-00-07.png)
![Screenshot at 00:09: User uploading a PDF \('Annual Physical 25.pdf'\) and asking the AI to summarize the results.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-00-09.png)
![Screenshot at 00:11: Output showing key lab findings \(White Blood Cells, Hemoglobin, Fasting Glucose\) presented in a structured table format.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-00-11.png)
![Screenshot at 00:27: Comparison of two different AI outputs side-by-side, one without C1 \(text-only\) and one with C1 \(showing a bar chart visualization\).](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-00-27.png)
![Screenshot at 00:32: Code view showing the comparison between the developer's current implementation and a 'Full Starter' template, highlighting missing features like conversation history and tool calling in the current setup.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-00-32.png)
![Screenshot at 01:11: Diagram illustrating the C1 architecture flow: Mobile UI sends Query to Backend, Backend calls C1 GenUI API \(using LLMs like OpenAI/Anthropic\), and C1 returns a Response via GenUI SDK to the UI.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-01-11.png)
![Screenshot at 01:49: Display of the Thesys documentation showing various integration frameworks supported, including Vercel AI SDK and LangChain.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-01-49.png)
![Screenshot at 02:49: The C1 chat interface responding to a prompt with a fully interactive dashboard featuring a bar chart, switchable tabs \(Overview, Sales, Users\), and a pie chart.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-02-49.png)
![Screenshot at 03:33: Example of a complex, generated contact form containing text inputs, radio buttons, checkboxes, and notification preferences.](https://ss.rapidrecap.app/screens/w3pmfaczpLc/00-03-33.png)