Quick Start

Create and run your first AI agent in minutes.

Your First Agent

Step 1: Import Required Components

import { useAgent } from '@ui-lab/agents';
import { Button } from '@ui-lab/components';

Step 2: Create an Agent

export function MyFirstAgent() {
  const { agent, isLoading, send } = useAgent({
    name: 'assistant',
    systemPrompt: 'You are a helpful assistant.',
  });

  return (
    <div>
      <Button
        onClick={() => send('Hello, agent!')}
        disabled={isLoading}
      >
        Send Message
      </Button>
    </div>
  );
}

Step 3: Handle Agent Responses

const { agent, isLoading, messages, send } = useAgent({
  name: 'assistant',
  systemPrompt: 'You are a helpful assistant.',
  onMessage: (message) => {
    console.log('Agent response:', message);
  },
});

return (
  <div>
    {messages.map((msg) => (
      <div key={msg.id}>
        <strong>{msg.role}:</strong> {msg.content}
      </div>
    ))}
    <Button onClick={() => send('Hello!')}>Send</Button>
  </div>
);

Common Patterns

Simple Question-Answer

Perfect for getting quick answers from your AI agent.

Multi-turn Conversations

Maintain context across multiple exchanges with the agent.

Tool Integration

Connect your agent to external services and data.

Next Steps

Explore Core Concepts to deepen your understanding
Learn about Designing AI Workflows
Check out Examples & Use Cases