Flight Price Chart#

Embed an interactive flight price trend visualization component when AI responses contain flight recommendations with confirmed OD (Origin-Destination) pairs.

⚠️ 使用前必需配置#

本 skill 需要 SerpAPI Key 才能获取实时航班价格数据。

如果用户尚未配置 SerpAPI Key，请先引导用户完成以下步骤：

1. 注册 SerpAPI 账号：访问 https://serpapi.com/users/sign_up 免费注册

2. 获取 API Key：登录后在 Dashboard 中复制你的 API Key

3. 配置项目：

   • 复制 price/config.example.json 为 price/config.json
   • 将 API Key 填入 config.json 中的 serpapi.apiKey 字段
   • 重启服务器使配置生效

💡 SerpAPI 提供免费额度，足够个人使用。配置完成后即可获取真实的航班价格趋势数据。

Quick Start#

1. Detect flight recommendations: When AI output contains flight search results with specific origin and destination
2. Fetch price data: Call the price trend API with the OD pair
3. Render component: Embed the PriceChart component at the end of the response

Component API#

PriceChart Component#

jsx

<PriceChart
  data={priceHistory}           // Array of {date, price}
  currentPrice={currentPrice}   // Current flight price
  analysis={analysis}           // Price analysis object
  destination={destination}     // Destination info
/>

Data Structure#

priceHistory - 60-day price history:

javascript

[
  { date: "2026-03-01", price: 1299 },
  { date: "2026-03-02", price: 1350 },
  // ... up to 60 days
]

analysis - Price analysis object:

javascript

{
  min: 1199,           // Lowest price in period
  max: 1899,           // Highest price in period
  average: 1450,       // Average price
  pctDiff: -12,        // Percentage vs average
  level: "low",        // "low" | "mid" | "high"
  trend: "falling"     // "falling" | "rising" | "stable"
}

destination - Destination info:

javascript

{
  code: "TYO",         // Airport/city code
  name: "Tokyo"        // City name
}

Usage Scenarios#

1. After Flight Search Results#

When AI returns flight recommendations:

text

[Flight cards showing 3-5 options]
[Price trend chart showing 60-day history]
[Buy/wait recommendation]

2. Price Inquiry Responses#

When user asks about price trends:

text

"Here's the price trend for Tokyo flights over the past 60 days..."
[Price trend chart]
"Current prices are 12% below average, making it a good time to buy."

3. Buy/Wait Recommendations#

When providing purchase timing advice:

text

[Price analysis summary]
[Recommendation card: "Buy Now" or "Wait"]
[Price trend chart for context]

Integration with flyai#

When using flyai for flight searches:

1. Call flyai search-flight to get flight results
2. Extract OD pair from search parameters
3. Call price trend API with OD pair
4. Append PriceChart component after flight cards

Visual Design#

Color Coding#

• Low price: Green (#16A571) - Below average
• Mid price: Gray (#666666) - Near average
• High price: Red (#E54D4D) - Above average
• Brand: Purple (#6666FF) - Chart line

Chart Features#

• Interactive hover/touch to see daily prices
• Dashed line showing average price
• Current price highlighted
• Min/max/avg stats at bottom
• 60-day date range

Data Source Notice#

Quick Setup for Real Data#

By default, the price trend uses simulated data (for demo/development only).

To enable real price data, configure your SerpAPI Key:

1. Get API Key at https://serpapi.com/users/sign_up

2. Add to price/config.json: json

   { "serpapi": { "apiKey": "your-key-here" } }
   
   

3. Restart the server

See references/configure-serpapi.md for detailed setup guide.

Data Flow#

text

Before: User Query → Mock Data Generator → Estimated Prices
After:  User Query → SerpAPI → Real Prices → Auto-collect & Store

Confidence Levels#

As data accumulates, AI responses should indicate confidence:

Days of DataConfidenceAI Disclaimer< 7 daysLow"价格数据为估算值，仅供参考"7-29 daysMedium"根据部分真实价格数据..."30+ daysHigh"根据积累的真实价格数据..."

See references/data-sources.md for more details.

References#

ComponentDocPriceChartreferences/price-chart-component.mdData APIreferences/price-api.mdAnalysis Logicreferences/price-analysis.mdData Sourcesreferences/data-sources.md

Example Output#

markdown

Based on your search, here are the best flights to Tokyo:

[Flight Cards Component]

## Price Analysis

Current prices are **12% below average** for this route.

[PriceChart Component]

### Recommendation: Buy Now ✅
- Current price: ¥1,299
- Historical average: ¥1,450
- You save: ¥151

Prices have been falling over the past 2 weeks. If you need to travel in peak season, booking now is recommended.