Thesys C1: First-Ever Generative UI API - Build Interactive AI Apps & Agent!

Key Concepts

• Generative UI API: An API that generates user interfaces dynamically based on model outputs.
• Middleware: Software that acts as a bridge between different applications or components.
• Large Language Models (LLMs): Advanced AI models capable of understanding and generating human-like text.
• User Experience (UX): The overall experience a user has when interacting with a product or service.
• UI Bottleneck: A situation where the user interface development hinders the progress of an AI application.
• JSON-based UI Schema: A structured format (JSON) that describes the components and layout of a user interface.
• React SDK: A software development kit for the React JavaScript library, used for building user interfaces.
• Tool Calls: The ability of an AI model to interact with external tools or APIs.

C1 by Thesis: Revolutionizing AI App User Interfaces

This video introduces C1 by Thesis, an API middleware designed to address the limitations of traditional text-based interactions in AI applications. The core problem identified is that while AI models like GPT, Claude, and Gemini are rapidly advancing, their user experience (UX) has not kept pace, leading to user drop-off due to overwhelming and unintuitive text-heavy interfaces.

The UI Bottleneck in AI Development

The transcript highlights that UI development often becomes a bottleneck for AI applications. Hard-coded UI components struggle to adapt to the dynamic and evolving outputs of LLMs. This forces developers to manually update layouts, props, and logic for each new use case, often resulting in a fallback to plain chat interfaces that are "painful to actually use." When models return semi-structured data, developers are left with the task of writing "glue code" to render it, indicating that the UI cannot keep up with the model's capabilities.

C1's Solution: Generative UI in Real-Time

C1 by Thesis acts as a middleware between LLMs and the front-end, functioning as a "generative UI API." It augments LLMs to respond with rich, interactive UIs in real-time, rather than just text. This means dynamic interfaces that visualize data, trends, and insights, making AI outputs more actionable and intuitive for users.

Key Features and Capabilities:

• Real-time Interactive UIs: C1 transforms LLM responses into dynamic and interactive user interfaces.
• Compatibility: Works with any LLM or MCP server and is compatible with UI component libraries like Vercel AI SDK, Copilot Kit, and Agi.
• Adaptability: Seamlessly adapts to any form factor and matches the brand's design system.
• Data Visualization: Enables the creation of graphs, charts, and other visual representations of data directly from AI outputs.
• Shopping Agents: Facilitates the creation of interactive, adaptive, and on-brand shopping agents within apps or websites without templates or vendor lock-in.
• Tool Call Support: Allows LLMs to query APIs, databases, or external connectors and automatically render structured outputs.

How C1 Works: A Technical Overview

The process involves the following steps:

1. Model Response to C1 API: The backend sends model responses through the C1 API.
2. Data Parsing and Rule Application: C1 parses the incoming data and applies system and UI rules.
3. JSON-based UI Schema Emission: C1 emits a JSON-based UI schema.
4. Streaming to Front-end: This schema is streamed to the front-end.
5. Real-time Rendering by React SDK: The C1 React SDK renders the UI in real-time.
6. SDK Responsibilities: The SDK handles streaming updates, error boundaries, state management, and callback wiring, including integrations with custom React components.

Integration and Getting Started

Integrating C1 into an existing AI app is described as a two-step process:

1. Backend Endpoint Update: Update the backend endpoint to point to Thesis.
2. API Key and Model Selection: Add the Thesis API key and select an LLM (e.g., GPT-5).
3. SDK Installation and Logic Update: Install the SDK and update the app's logic to render and display interactive responses.

For experimentation, a test project can be spun up with a single command: npx create C1 app.

Demonstrative Examples

Example 1: Stock Market Chart

• Prompt: "Show me a chart of the top five stocks outperforming the market this year with key trend lines."
• C1 Output: An intuitive graph visualizing trending market opportunities.
• Regular AI App Output: A plain textual prompt output.

Example 2: Sales Copilot

• Scenario: A sales copilot built with Next.js and GPT.
• Prompt: "Show me the Q2 revenue by region."
• C1 Powered App Output: Interactive and dynamic charts, including pie charts and bar graphs that can be interacted with. The chart layouts update dynamically based on further queries (e.g., "Break down this product category and trend over time"), demonstrating the absence of manual UI changes or hard-coded templates.
• ChatGPT Output (for comparison): A simple, non-intuitive paragraph of text.

Benefits and Value Proposition

C1 by Thesis promises significant advantages for AI app developers:

• Faster Development: Ship rich interactive AI apps "10 times faster."
• Reduced Maintenance Costs: Cut front-end maintenance costs by "over 80%."
• Improved User Experience: Leads to better user experiences and higher retention.
• Faster Dev Cycles: Accelerates the development process.

Special Offer and Resources

The video mentions a special offer: up to 5 million free tokens for signing up using a provided link. It also directs viewers to:

• World of AI Newsletter: For weekly updates on the AI space.
• Private Discord: For access to AI tool subscriptions, daily AI news, and exclusive content.
• Second Channel: For more in-depth AI knowledge.
• Twitter: For further engagement.

Conclusion

C1 by Thesis aims to bridge the gap between advanced AI models and intuitive user interfaces. By providing a generative UI API, it empowers developers to create more engaging, actionable, and efficient AI applications, moving beyond the limitations of traditional text-based interactions. The platform offers a streamlined integration process and significant benefits in terms of development speed and cost reduction.