> ## Documentation Index
> Fetch the complete documentation index at: https://praison.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vision

> Analyze images with AI

Agents can see and understand images - describe content, read text, and answer questions.

```mermaid theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
graph LR
    subgraph "Image Analysis"
        A[👤 User] --> B[🤖 Agent]
        B --> C[🖼️ Image]
        C --> D[📝 Analysis]
    end

    classDef agent fill:#8B0000,color:#fff
    classDef tool fill:#189AB4,color:#fff

    class B agent
    class A,C,D tool
```

## Quick Start

<Steps>
  <Step title="Simple Usage">
    ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
    import { Agent } from 'praisonai';

    const agent = new Agent({
      instructions: 'You describe images in detail',
      llm: 'gpt-4o'  // Vision-capable model
    });

    await agent.chat([
      { role: 'user', content: [
        { type: 'text', text: 'What is in this image?' },
        { type: 'image', url: 'https://example.com/photo.jpg' }
      ]}
    ]);
    ```
  </Step>

  <Step title="With Configuration">
    ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
    await agent.chat([
      { role: 'user', content: [
        { type: 'text', text: 'Describe this image' },
        { type: 'image', path: './my-photo.jpg' }
      ]}
    ]);
    ```
  </Step>
</Steps>

***

## User Interaction Flow

```mermaid theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
sequenceDiagram
    participant User
    participant Agent
    participant Image
    
    User->>Agent: "What's in this image?"
    User->>Agent: [image attachment]
    Agent->>Image: Analyze visual content
    Image-->>Agent: Visual features
    Agent-->>User: "This image shows..."
```

***

## Configuration Levels

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
// Level 1: Bool - Enable with vision model
const agent = new Agent({
  llm: 'gpt-4o',  // Vision-capable
  vision: true
});

// Level 2: String - Specify detail level
const agent = new Agent({
  llm: 'gpt-4o',
  vision: 'high'  // 'low', 'auto', 'high'
});

// Level 3: Dict - Full options
const agent = new Agent({
  llm: 'gpt-4o',
  vision: {
    detail: 'high',
    maxImages: 5
  }
});
```

***

## What You Can Do

| Task             | Example                       |
| ---------------- | ----------------------------- |
| Describe images  | "What is in this photo?"      |
| Read text (OCR)  | "What does the sign say?"     |
| Compare images   | "What changed between these?" |
| Identify objects | "List everything you see"     |

***

## API Reference

<Card title="VisionConfig" icon="code" href="/docs/sdk/reference/typescript/classes/VisionConfig">
  Complete configuration options
</Card>

<Card title="VisionAgent" icon="robot" href="/docs/sdk/reference/typescript/classes/VisionAgent">
  Full class documentation
</Card>

***

## Best Practices

<AccordionGroup>
  <Accordion title="Use vision-capable models">
    Use GPT-4o, Claude 3, or Gemini Pro Vision for image analysis.
  </Accordion>

  <Accordion title="Be specific in questions">
    "What text is on the document?" works better than "What is this?"
  </Accordion>

  <Accordion title="Use high detail for text">
    Set `detail: 'high'` when reading small text or documents.
  </Accordion>
</AccordionGroup>

***

## Related

<CardGroup cols={2}>
  <Card title="Video" icon="video" href="/docs/js/video">
    Analyze videos
  </Card>

  <Card title="OCR" icon="font" href="/docs/js/ocr">
    Extract text from images
  </Card>
</CardGroup>
