ui

component library for ai-sdk

Examples

See some real-world use cases

AI Chatbot

Full-featured conversation interface

Conversation

AI-powered conversation interface

Hi! Can you help me create a comprehensive storybook for AI SDK components?

10:30 AM

I'd be happy to help you create a comprehensive storybook for AI SDK components! Based on the AI SDK documentation, you'll need to create 31 different components including Actions, Branch, Chain of Thought, and many more. Each component should have: - Multiple layout options - Interactive stories - Proper TypeScript interfaces - Accessibility features - Responsive design Would you like me to start by setting up the Storybook configuration and then we can work through each component systematically?

10:30 AM

That sounds great! Let's start with the Actions component. I want it to support different layouts like horizontal, vertical, and grid arrangements.

10:31 AM

Perfect! Let's create the Actions component with the following features: **Core Features:** - Multiple layout options (horizontal, vertical, grid) - Configurable button sizes (sm, md, lg) - Loading states and disabled states - Icon support with optional labels - Various button variants **Story Variants:** - Default layout with all actions - Individual layout stories - Different sizes - Loading and disabled states - Custom action configurations I'll create the component with proper TypeScript interfaces and comprehensive stories. Would you like me to include any specific actions or keep it generic?

10:31 AM

What would you like to know?

Workflow Planner

Interactive task management and planning with visual workflow representation

Start

Initialize workflow

async function startWorkflow() {
  const context = await initContext();
  return context;
}

Process Data

Transform and validate input

const processData = (input) => {
  const validated = validate(input);
  return transform(validated);
}

Decision Point

Check conditions

if (result.isValid) {
  return handleSuccess(result);
} else {
  return handleError(result);
}

Success Path

Handle successful result

async function handleSuccess(data) {
  await saveResult(data);
  await notify('success');
  return { status: 'complete' };
}

Error Path

Handle errors and retry

async function handleError(error) {
  await logError(error);
  if (canRetry(error)) {
    return retry();
  }
  throw error;
}

Complete

Finalize workflow

async function complete() {
  await cleanup();
  return {
    status: 'done',
    timestamp: Date.now()
  };
}

React Flow

Interactive Workflow: Drag nodes to reposition, connect handles to create edges, or click the lock button to prevent changes. Use the controls to zoom and navigate the workflow diagram.