|
| 1 | +--- |
| 2 | +title: "Deep research agent using Vercel's AI SDK" |
| 3 | +sidebarTitle: "Deep research agent" |
| 4 | +description: "Deep research agent which generates comprehensive PDF reports using Vercel's AI SDK." |
| 5 | +tag: "v4" |
| 6 | +--- |
| 7 | + |
| 8 | +import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx"; |
| 9 | + |
| 10 | +import UpgradeToV4Note from "/snippets/upgrade-to-v4-note.mdx"; |
| 11 | + |
| 12 | +<UpgradeToV4Note /> |
| 13 | + |
| 14 | +<Info title="Acknowledgements"> |
| 15 | + Acknowledgements: This example project is derived from the brilliant [deep research |
| 16 | + guide](https://aie-feb-25.vercel.app/docs/deep-research) by [Nico |
| 17 | + Albanese](https://x.com/nicoalbanese10). |
| 18 | +</Info> |
| 19 | + |
| 20 | +## Overview |
| 21 | + |
| 22 | +This full-stack project is an intelligent deep research agent that autonomously conducts multi-layered web research, generating comprehensive reports which are then converted to PDF and uploaded to storage. |
| 23 | + |
| 24 | +<video |
| 25 | + controls |
| 26 | + className="w-full aspect-video" |
| 27 | + src="https://github.com/user-attachments/assets/aa86d2b2-7aa7-4948-82ff-5e1e80cf8e37" |
| 28 | +></video> |
| 29 | + |
| 30 | +**Tech stack:** |
| 31 | + |
| 32 | +- **[Next.js](https://nextjs.org/)** for the web app |
| 33 | +- **[Vercel's AI SDK](https://sdk.vercel.ai/)** for AI model integration and structured generation |
| 34 | +- **[Trigger.dev](https://trigger.dev)** for task orchestration, execution and real-time progress updates |
| 35 | +- **[OpenAI's GPT-4o model](https://openai.com/gpt-4)** for intelligent query generation, content analysis, and report creation |
| 36 | +- **[Exa API](https://exa.ai/)** for semantic web search with live crawling |
| 37 | +- **[LibreOffice](https://www.libreoffice.org/)** for PDF generation |
| 38 | +- **[Cloudflare R2](https://developers.cloudflare.com/r2/)** to store the generated reports |
| 39 | + |
| 40 | +**Features:** |
| 41 | + |
| 42 | +- **Recursive research**: AI generates search queries, evaluates their relevance, asks follow-up questions and searches deeper based on initial findings. |
| 43 | +- **Real-time progress**: Live updates are shown on the frontend using Trigger.dev Realtime as research progresses. |
| 44 | +- **Intelligent source evaluation**: AI evaluates search result relevance before processing. |
| 45 | +- **Research report generation**: The completed research is converted to a structured HTML report using a detailed system prompt. |
| 46 | +- **PDF creation and uploading to Cloud storage**: The completed reports are then converted to PDF using LibreOffice and uploaded to Cloudflare R2. |
| 47 | + |
| 48 | +## GitHub repo |
| 49 | + |
| 50 | +<Card |
| 51 | + title="View the Vercel AI SDK deep research agent repo" |
| 52 | + icon="GitHub" |
| 53 | + href="https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-deep-research-agent" |
| 54 | +> |
| 55 | + Click here to view the full code for this project in our examples repository on GitHub. You can |
| 56 | + fork it and use it as a starting point for your own project. |
| 57 | +</Card> |
| 58 | + |
| 59 | +## How the deep research agent works |
| 60 | + |
| 61 | +### Trigger.dev orchestration |
| 62 | + |
| 63 | +The research process is orchestrated through three connected Trigger.dev tasks: |
| 64 | + |
| 65 | +1. `deepResearchOrchestrator` - Main task that coordinates the entire research workflow. |
| 66 | +2. `generateReport` - Processes research data into a structured HTML report using OpenAI's GPT-4o model |
| 67 | +3. `generatePdfAndUpload` - Converts HTML to PDF using LibreOffice and uploads to R2 cloud storage |
| 68 | + |
| 69 | +Each task uses `triggerAndWait()` to create a dependency chain, ensuring proper sequencing while maintaining isolation and error handling. |
| 70 | + |
| 71 | +### The deep research recursive function |
| 72 | + |
| 73 | +The core research logic uses a recursive depth-first search approach. A query is recursively expanded and the results are collected. |
| 74 | + |
| 75 | +**Key parameters:** |
| 76 | + |
| 77 | +- `depth`: Controls recursion levels (default: 2) |
| 78 | +- `breadth`: Number of queries per level (default: 2, halved each recursion) |
| 79 | + |
| 80 | +``` |
| 81 | +Level 0 (Initial Query): "AI safety in autonomous vehicles" |
| 82 | +│ |
| 83 | +├── Level 1 (depth = 1, breadth = 2): |
| 84 | +│ ├── Sub-query 1: "Machine learning safety protocols in self-driving cars" |
| 85 | +│ │ ├── → Search Web → Evaluate Relevance → Extract Learnings |
| 86 | +│ │ └── → Follow-up: "How do neural networks handle edge cases?" |
| 87 | +│ │ |
| 88 | +│ └── Sub-query 2: "Regulatory frameworks for autonomous vehicle testing" |
| 89 | +│ ├── → Search Web → Evaluate Relevance → Extract Learnings |
| 90 | +│ └── → Follow-up: "What are current safety certification requirements?" |
| 91 | +│ |
| 92 | +└── Level 2 (depth = 2, breadth = 1): |
| 93 | + ├── From Sub-query 1 follow-up: |
| 94 | + │ └── "Neural network edge case handling in autonomous systems" |
| 95 | + │ └── → Search Web → Evaluate → Extract → DEPTH LIMIT REACHED |
| 96 | + │ |
| 97 | + └── From Sub-query 2 follow-up: |
| 98 | + └── "Safety certification requirements for self-driving vehicles" |
| 99 | + └── → Search Web → Evaluate → Extract → DEPTH LIMIT REACHED |
| 100 | +``` |
| 101 | + |
| 102 | +**Process flow:** |
| 103 | + |
| 104 | +1. **Query generation**: OpenAI's GPT-4o generates multiple search queries from the input |
| 105 | +2. **Web search**: Each query searches the web via the Exa API with live crawling |
| 106 | +3. **Relevance evaluation**: OpenAI's GPT-4o evaluates if results help answer the query |
| 107 | +4. **Learning extraction**: Relevant results are analyzed for key insights and follow-up questions |
| 108 | +5. **Recursive deepening**: Follow-up questions become new queries for the next depth level |
| 109 | +6. **Accumulation**: All learnings, sources, and queries are accumulated across recursion levels |
| 110 | + |
| 111 | +### Using Trigger.dev Realtime to trigger and subscribe to the deep research task |
| 112 | + |
| 113 | +We use the [`useRealtimeTaskTrigger`](/frontend/react-hooks/triggering#userealtimetasktrigger) React hook to trigger the `deep-research` task and subscribe to it's updates. |
| 114 | + |
| 115 | +**Frontend (React Hook)**: |
| 116 | + |
| 117 | +```typescript |
| 118 | +const triggerInstance = useRealtimeTaskTrigger<typeof deepResearchOrchestrator>("deep-research", { |
| 119 | + accessToken: triggerToken, |
| 120 | +}); |
| 121 | +const { progress, label } = parseStatus(triggerInstance.run?.metadata); |
| 122 | +``` |
| 123 | + |
| 124 | +As the research progresses, the metadata is set within the tasks and the frontend is kept updated with every new status: |
| 125 | + |
| 126 | +**Task Metadata**: |
| 127 | + |
| 128 | +```typescript |
| 129 | +metadata.set("status", { |
| 130 | + progress: 25, |
| 131 | + label: `Searching the web for: "${query}"`, |
| 132 | +}); |
| 133 | +``` |
| 134 | + |
| 135 | +## Relevant code |
| 136 | + |
| 137 | +- **Deep research task**: Core logic in [src/trigger/deepResearch.ts](https://github.com/triggerdotdev/examples/blob/main/vercel-ai-sdk-deep-research-agent/src/trigger/deepResearch.ts) - orchestrates the recursive research process. Here you can change the model, the depth and the breadth of the research. |
| 138 | +- **Report generation**: [src/trigger/generateReport.ts](https://github.com/triggerdotdev/examples/blob/main/vercel-ai-sdk-deep-research-agent/src/trigger/generateReport.ts) - creates structured HTML reports from research data. The system prompt is defined in the code - this can be updated to be more or less detailed. |
| 139 | +- **PDF generation**: [src/trigger/generatePdfAndUpload.ts](https://github.com/triggerdotdev/examples/blob/main/vercel-ai-sdk-deep-research-agent/src/trigger/generatePdfAndUpload.ts) - converts reports to PDF and uploads to R2. This is a simple example of how to use LibreOffice to convert HTML to PDF. |
| 140 | +- **Research agent UI**: [src/components/DeepResearchAgent.tsx](https://github.com/triggerdotdev/examples/blob/main/vercel-ai-sdk-deep-research-agent/src/components/DeepResearchAgent.tsx) - handles form submission and real-time progress display using the `useRealtimeTaskTrigger` hook. |
| 141 | +- **Progress component**: [src/components/progress-section.tsx](https://github.com/triggerdotdev/examples/blob/main/deep-research-agent/src/components/progress-section.tsx) - displays live research progress. |
| 142 | + |
| 143 | +<RealtimeLearnMore /> |
0 commit comments