Building Intent-Based UIs: The Future of frontend Development

// Traditional Route Mapping
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/analytics/reports/new" element={<CreateReport />} />
<Route path="/settings/billing" element={<BillingSettings />} />

// intent-contract.ts
import { z } from 'zod';

export const IntentActionSchema = z.enum([
  'VIEW_ANALYTICS',
  'GENERATE_REPORT',
  'TRIGGER_WORKFLOW',
  'MODIFY_SETTINGS'
]);

export const IntentPayloadSchema = z.object({
  action: IntentActionSchema,
  confidence: z.number().min(0).max(1),
  parameters: z.object({
    timeRange: z.enum(['7d', '30d', '90d', '1y']).optional(),
    region: z.string().optional(),
    segment: z.string().optional(),
    metrics: z.array(z.string()).default([])
  }),
  layout: z.enum(['single-card', 'split-view', 'dashboard-grid']),
  componentManifest: z.array(z.string())
});

export type IntentPayload = z.infer<typeof IntentPayloadSchema>;

// api/intent/route.ts
import { NextResponse } from 'next/server';
import { IntentPayloadSchema } from '@/lib/intent-contract';

export async function POST(req: Request) {
  const { prompt, userContext } = await req.json();

  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.ANTHROPIC_API_KEY!,
      'anthropic-version': '2023-06-01',
      'content-type': 'application/json'
    },
    body: JSON.stringify({
      model: 'claude-3-5-haiku-20241022',
      max_tokens: 1024,
      system: `You are an intent parser for an enterprise analytics dashboard. 
Translate user requests into the UI Intent Schema. Available components:
[RevenueTrendChart, RegionalBreakdownTable, RenewalActionBar, ChurnRiskHeatmap].`,
      tools: [
        {
          name: 'render_intent_ui',
          description: 'Renders dynamic UI widgets matching user intent',
          input_schema: {
            type: 'object',
            properties: {
              action: { type: 'string', enum: ['VIEW_ANALYTICS', 'GENERATE_REPORT', 'TRIGGER_WORKFLOW'] },
              confidence: { type: 'number' },
              parameters: { type: 'object' },
              layout: { type: 'string', enum: ['single-card', 'split-view', 'dashboard-grid'] },
              componentManifest: { type: 'array', items: { type: 'string' } }
            },
            required: ['action', 'confidence', 'layout', 'componentManifest']
          }
        }
      ],
      tool_choice: { type: 'tool', name: 'render_intent_ui' },
      messages: [{ role: 'user', content: prompt }]
    })
  });

  const data = await response.json();
  const toolCall = data.content.find((c: any) => c.type === 'tool_use');
  const parsed = IntentPayloadSchema.parse(toolCall.input);

  return NextResponse.json(parsed);
}

// components/intent/IntentWorkspace.tsx
'use client';

import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';
import type { IntentPayload } from '@/lib/intent-contract';

const ComponentRegistry: Record<string, React.ComponentType<any>> = {
  RevenueTrendChart: dynamic(() => import('@/components/charts/RevenueTrendChart')),
  RegionalBreakdownTable: dynamic(() => import('@/components/tables/RegionalBreakdownTable')),
  RenewalActionBar: dynamic(() => import('@/components/actions/RenewalActionBar')),
  ChurnRiskHeatmap: dynamic(() => import('@/components/charts/ChurnRiskHeatmap'))
};

export function IntentWorkspace({ intent }: { intent: IntentPayload }) {
  if (intent.confidence < 0.75) {
    return (
      <div className="p-6 border border-amber-300 bg-amber-50 rounded-lg">
        <p className="font-semibold text-amber-900">Intent Unclear</p>
        <p className="text-amber-700 text-sm">Did you mean to view regional revenue or renewal actions?</p>
      </div>
    );
  }

  const gridStyles = {
    'single-card': 'grid grid-cols-1',
    'split-view': 'grid grid-cols-1 lg:grid-cols-2 gap-6',
    'dashboard-grid': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
  };

  return (
    <div className={`intent-canvas ${gridStyles[intent.layout]}`}>
      {intent.componentManifest.map((componentName) => {
        const Widget = ComponentRegistry[componentName];
        if (!Widget) return null;

        return (
          <Suspense fallback={<div className="h-64 animate-pulse bg-slate-100 rounded-lg" />} key={componentName}>
            <Widget params={intent.parameters} />
          </Suspense>
        );
      })}
    </div>
  );
}