C1 by Thesys

What is C1 by Thesys?

C1 by Thesys is an API middleware designed to transform Large Language Model (LLM) responses into live, adaptive user interfaces in real-time. Instead of the traditional plain text output, C1 generates structured UI components such as forms, tables, charts, and layouts. These components can then be rendered directly using the C1 React SDK, providing a dynamic and interactive user experience.

Key Features:

• Real-time UI Generation: Transforms LLM responses into interactive UI components instantly.
• LLM Compatibility: Supports multiple LLMs, including OpenAI and Anthropic, ensuring flexibility.
• Customizable UI: Integrates with Crayon's UI library, allowing extensive customization, including themes, tokens, and components.
• Tool Calls Support: Connects to data sources via tool calls, fetching results from databases, documents, and APIs.
• Custom Components: Enables the use of custom React components with unique logic and styling.
• Configurable Actions: Allows setting up actions, callbacks, and workflows that C1 executes out of the box.

How does C1 by Thesys work?

C1 operates as an API layer on top of LLMs, building adaptive UIs in real-time. It leverages the C1 React SDK to turn responses from your model into live interfaces. The integration process involves three simple steps:

1. Change URL: Configure your AI requests to use the Thesys endpoint.
2. Integrate SDK: Incorporate the C1 React SDK into your project.
3. Customize UI (Optional): Tailor the UI components to match your brand and application requirements.

The code example below demonstrates how to integrate C1 with Node.js and OpenAI:

const { OpenAI } = require('openai');

// Create OpenAI client with Thesys endpoint
const client = new OpenAI({
  apiKey: process.env.THESYS_API_KEY,
  baseURL: 'https://api.thesys.dev/v1/embed'
});

// Now use the client for your AI requests
const response = await client.chat.completions.create({
  model: '<model-name>',
  messages: [
    { role: 'user', content: 'Hello, world!' }
  ]
});

Who is C1 by Thesys for?

C1 is designed for teams building AI-native applications such as software agents, copilots, and other tools where use cases evolve rapidly. It is particularly useful when static UIs are insufficient. It adapts to logic, state, and user behavior, allowing LLMs to shape both output and interaction.

• Developers: Reduce frontend overhead and accelerate development.
• Product Teams: Build dynamic, task-specific interfaces efficiently.
• AI-Native Teams: Perfect for teams who require a quicker time to market and lower development costs.

Why choose C1 by Thesys?

C1 by Thesys offers several advantages over traditional UI development methods:

• Faster Time to Market: Teams can build AI frontends 10x faster.
• Lower Development Costs: Reduces development costs by up to 80%.
• Higher Engagement: Users find C1 responses more engaging compared to static text.
• Enterprise-Grade Security: Compliant with GDPR, SOC2, and ISO27001, with zero data retention and private deployment options.
• Flexibility: Works with any AI stack, is fully customizable, and supports all tool calls and custom React components.

How to use C1 by Thesys?

Using C1 involves integrating the API into your AI application and leveraging the React SDK for rendering UI components. Here’s a more detailed breakdown:

1. Set Up Your Environment:

   • Ensure you have Node.js and npm (Node Package Manager) installed.
   • Create a new React application using create-react-app or your preferred setup.

2. Install the C1 React SDK:

   • Add the necessary dependencies to your React project using npm or yarn.

3. Configure the API Endpoint:

   • Update your AI requests to use the C1 API endpoint.

4. Render UI Components:

   • Use the C1 React SDK to render the structured UI components generated by the API.

5. Customize Components (Optional):

   • Customize the UI components to match your brand and application’s design system.

What is the difference between C1 by Thesys and vibe-coding tools?

C1 by Thesys differs significantly from vibe-coding tools like Lovable or Bolt. While tools like Lovable or Bolt assist in designing the UI before the app goes live by turning prompts into mockups or code, C1 builds and displays the actual interface while the app is running, tailoring it to each user and situation.

Use Cases for Generative UI

C1 by Thesys can be applied across various industries and use cases:

• Data Analytics: Create interactive charts, graphs, and dashboards on the fly.
• E-commerce: Build dynamic product interfaces and personalized shopping experiences.
• EdTech: Develop adaptive learning interfaces that respond to student needs in real-time.
• Search: Enhance search interfaces with interactive components for filtering and exploration.

Conclusion

C1 by Thesys offers a transformative approach to building AI-native applications. By enabling real-time UI generation, it reduces development time, lowers costs, and enhances user engagement. Whether you're building copilots, software agents, or dynamic data visualizations, C1 provides the tools and flexibility needed to create intelligent, context-aware frontends. With its support for multiple LLMs, extensive customization options, and enterprise-grade security, C1 is well-positioned to be a key component in the future of AI application development.