Flight Price Advisor with Trend Chart for developer

Embed interactive flight price trend charts into AI responses. Requires SerpAPI key for real-time data. Use when users want to visualize 60-day price history...

Security Scan

The skill largely does what it says (embed price charts) but the metadata, instructions, and docs are inconsistent about credentials and data collection — it asks you to store API keys and persist user search snapshots without declaring those requirements up front.

Purpose & Capability

The component and UI code (React/HTML) match the stated purpose of rendering a 60-day flight price trend. Requiring node makes sense for the provided server snippets and demo. However, the registry metadata lists no required credentials while SKILL.md and the references repeatedly instruct configuring a SerpAPI API key (and even show an example config that includes an OpenAI key and flyai key). That mismatch (declared requirements: none vs runtime instructions: needs SerpAPI and optionally other API keys) is inconsistent and should be clarified.

Instruction Scope

SKILL.md and IMPLEMENTATION_STATUS.md include server-side instructions to auto-collect price snapshots on every flight search, write JSON files to price/data/price-history, and set up a cron job to poll popular routes. Those actions go beyond a pure front-end embeddable component: they persist user queries/search results and perform periodic external API calls. While coherent with 'build historical data', this has privacy/operational implications (data retention, frequency of outbound calls, storage location) that the skill metadata doesn't surface.

Install Mechanism

There is no automatic install spec — the skill is instruction-and-code only. No remote downloads or installers are invoked by the registry metadata, which lowers supply-chain risk. The included files are static and local (React/HTML plus docs).

Credentials

The package metadata declares no required env vars, yet the docs/instructions require a SerpAPI API key (and several docs show a config.json containing serpapi.apiKey, openai.apiKey, and flyai.apiKey). Requesting or recommending storing an OpenAI key or other credentials in the same project config is unnecessary for a chart component and is disproportionate. The skill also instructs creating local storage of search results, which implies access to potentially sensitive data. The credential handling approach (put keys into price/config.json in repo) is risk-prone.

Persistence & Privilege

The skill recommends adding server endpoints and filesystem writes (storePriceSnapshot, price-history JSON files) and a cron job to collect route data. That gives the skill persistent local footprint and ongoing outbound access to SerpAPI. While not using always:true or other special platform privileges, these persistent behaviors increase blast radius and should be approved consciously by the operator.

What to consider before installing

This skill appears to implement the charting functionality it claims, but there are important inconsistencies and operational risks to review before installing or enabling it: 1) Credentials: The registry lists no required environment variables, yet the SKILL.md and docs require a SerpAPI key (and example config files reference OpenAI and flyai keys). Do not commit API keys into repo files (price/config.json) — prefer environment variables or a secrets vault. Remove any unnecessary keys (e.g., OpenAI) from shared config if they are not required. 2) Persistent data collection: The project suggests adding server code to store every flight search into price/data/price-history and to run scheduled collectors. That will persist user search results and increase outbound API usage and storage. Confirm retention policies, where files are stored, access controls, and legal/privacy considerations before enabling. 3) Cron and rate limits: If you enable automated collection, verify SerpAPI quotas and costs and throttle collection to avoid accidental overuse. 4) Scope-check the code: Review the server snippets and any omitted code carefully for endpoints, secrets handling, or unexpected network calls. Ensure the skill only calls SerpAPI (or other intended APIs) and does not post data to unknown external endpoints. 5) Hardening suggestions: store keys in environment variables or a secrets manager; do not check config files with keys into version control; restrict the data directory permissions; add logging and retention limits; consider requiring explicit opt-in before any data collection starts. If you need, I can: (a) list exact files/lines where credentials are referenced, (b) suggest safer config patterns and example env-var based configs, or (c) produce a checklist for reviewing the server-side snippets before deployment.

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

<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:

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

analysis - Price analysis object:

{
  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:

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

Usage Scenarios

1. After Flight Search Results

When AI returns flight recommendations:

[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:

"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:

[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:

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

3. Restart the server

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

Data Flow

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 Data	Confidence	AI Disclaimer
< 7 days	Low	"价格数据为估算值，仅供参考"
7-29 days	Medium	"根据部分真实价格数据..."
30+ days	High	"根据积累的真实价格数据..."

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

References

Component	Doc
PriceChart	references/price-chart-component.md
Data API	references/price-api.md
Analysis Logic	references/price-analysis.md
Data Sources	references/data-sources.md

Example Output

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.