Building Agentic UIs: Integrating LLMs into React Components

The era of static chat interfaces is evolving. As Large Language Models (LLMs) become more sophisticated, users expect AI interactions to be deeply integrated into the application's natural workflow, rather than confined to a generic chatbox. This is the concept of the Agentic UI—user interfaces that adapt, generate, and respond intelligently based on AI context.

In this guide, we'll explore how to build these dynamic interfaces using React and the Vercel AI SDK.

What is an Agentic UI?

An Agentic UI goes beyond text generation. Instead of streaming back a markdown response, the AI streams back actual UI components—React components complete with state, interactivity, and styling.

Imagine asking an AI to "show me my sales data for Q3." A traditional chatbot would respond with a bulleted list of numbers. An Agentic UI generates and renders a fully interactive Recharts bar chart directly in the conversation flow.

The Vercel AI SDK and Generative UI

The Vercel AI SDK is currently the standard for building these experiences in the React/Next.js ecosystem. The SDK's ai/rsc (React Server Components) package allows you to seamlessly stream UI state from the server to the client.

Key Concepts

1. Server Actions for AI State: You handle the LLM interaction entirely on the server using Next.js Server Actions. This keeps your API keys secure and leverages the speed of the edge runtime.
2. streamUI function: The core function that communicates with the model (like GPT-4o or Claude 3.5 Sonnet) and defines the tools it can use.
3. Function Calling (Tools): You define tools that the LLM can call. When a tool is triggered, you instruct the server to yield a specific React Component.

Example: Streaming a Weather Component

Here is a conceptual example of how a tool call can render a UI component instead of text:

// server/actions.tsx
import { streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
import { WeatherWidget } from '@/components/weather-widget';

export async function submitUserMessage(userInput: string) {
  'use server';

  const result = await streamUI({
    model: openai('gpt-4o'),
    prompt: userInput,
    text: ({ content }) => <div>{content}</div>,
    tools: {
      getWeather: {
        description: 'Get the current weather for a location',
        parameters: z.object({
          location: z.string(),
        }),
        generate: async function* ({ location }) {
          yield <div>Loading weather for {location}...</div>;
          
          const weatherData = await fetchWeatherFromAPI(location);
          
          return <WeatherWidget data={weatherData} />;
        },
      },
    },
  });

  return result.value;
}

Designing for Intent

When building Agentic UIs, design principles shift. You must design for intent rather than fixed navigation.

• Graceful Degradation: What happens if the AI fails to generate the component or hallucinates a prop? Your components need robust error boundaries and fallback states.
• Micro-Interactions: Provide visual feedback (spinners, skeletons) while the UI is streaming in. The yield keyword in the generate function is perfect for this.
• Context Awareness: Ensure the AI knows what page the user is currently looking at so the generated components are contextually relevant.

Conclusion

Building Generative and Agentic UIs fundamentally changes how we think about frontend architecture. By treating UI components as valid outputs of a language model, we can create hyper-personalized, dynamic software experiences that were impossible just a few years ago.