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

# 简介

> 通过使用集成和外部 API 来扩展你的网站功能。

Lovable 提供原生的无缝集成，用于导出代码和添加后端服务。如果你想为你的网站添加某些特定功能，也可以集成外部 API。

<div id="what-is-an-api">
  ## 什么是 API？
</div>

API 是一种让软件应用之间进行通信并共享数据的方式。
不同的 API 提供不同的功能，例如发送电子邮件或处理支付。
你可以在[我们博客上的这篇文章](https://lovable.dev/blog/2025-01-28-the-power-of-apis)中进一步了解 API 的强大能力。

<div id="native-integrations">
  ## 原生集成
</div>

浏览以下内容，快速上手并进一步了解我们对 GitHub 和 Supabase 的原生集成。

<CardGroup cols="2">
  <Card title="GitHub 集成" icon="github" href="zh/github">
    了解如何将 Lovable 与 GitHub 集成，以导出代码并实现无缝的版本控制。
  </Card>

  <Card title="Supabase 集成" icon="database" href="zh/supabase">
    使用 Supabase 为你的网站添加后端，以支持身份验证和持久化数据存储。
  </Card>
</CardGroup>

<div id="verified-integrations">
  ## 已验证集成
</div>

已验证集成与 Lovable 的配合效果最佳：

<CardGroup cols="3">
  <Card title="Stripe" href="zh/stripe">
    为你的应用添加支付处理功能。
  </Card>

  <Card title="OpenAI" href="https://openai.com/api/">
    使用 OpenAI 的模型为你的应用添加 AI 功能。
  </Card>

  <Card title="Anthropic" href="https://www.anthropic.com/api">
    使用 Anthropic 的 Claude 模型为你的应用添加 AI 功能。
  </Card>

  <Card title="Resend" href="https://resend.com/">
    使用 Resend 的现代电子邮件 API 为你的应用添加邮件功能。
  </Card>

  <Card title="Clerk" href="https://clerk.com/">
    功能全面的用户管理平台。
  </Card>

  <Card title="Three.js" href="https://threejs.org/docs/">
    为你的应用添加交互式 3D 图形。
  </Card>

  <Card title="D3.js" href="https://devdocs.io/d3/">
    创建动态、交互式数据可视化。
  </Card>

  <Card title="Highcharts" href="https://highcharts.com/docs/index">
    创建专业的交互式图表和可视化。
  </Card>

  <Card title="p5.js" href="https://p5js.org/reference/">
    创建创意编程项目和交互式图形。
  </Card>

  <Card title="Runware" href="https://runware.ai/">
    让你的应用可以根据文本提示生成图像。
  </Card>

  <Card title="ElevenLabs" href="https://elevenlabs.io/developers">
    添加文本转语音功能。
  </Card>

  <Card title="Make" href="https://developers.make.com/api-documentation">
    使用可视化平台构建自动化任务和连接应用的工作流。
  </Card>

  <Card title="Replicate" href="https://replicate.com/docs/">
    运行并微调开源 AI 模型。
  </Card>

  <Card title="Stability AI" href="https://platform.stability.ai/docs/api-reference">
    开发跨多种模态的开放式 AI 模型。
  </Card>

  <Card title="Twilio" href="https://www.twilio.com/docs/messaging/api">
    使用 Twilio 为你的应用添加 SMS 功能。
  </Card>

  <Card title="n8n" href="https://docs.n8n.io/api/">
    使用可视化平台为你的应用构建工作流。
  </Card>
</CardGroup>

<div id="using-any-api-with-lovable">
  ## 在 Lovable 中使用任意 API
</div>

所有其他可调用的 API 依然可以集成，但通常需要额外的上下文和使用说明。

你可能会有：

* **带自定义 API 的内部系统**\
  这些可能是你的团队构建的服务（例如库存系统、分析流水线、内部工具），它们暴露了 REST 或 GraphQL 端点，但没有公开文档或不为大众所知。\
  你希望 Lovable 能从这些系统中读取或向其发送数据，用于自动化工作流或驱动用户界面。
* **Lovable 尚未支持的第三方 API**\
  也许你在使用某个小众 SaaS 产品、专业数据服务商，或者 Lovable 目前还没有内置支持的合作集成。\
  即使它尚未被官方支持，你仍然希望 Lovable 能连接这个 API、发起调用并处理返回的数据。

在这两种情况下，挑战是相同的：Lovable 默认并“不认识”这个 API。但只要有完善的文档和认证配置，它仍然可以高效使用该 API。\
无论是哪种情况，思路都是一样的：**Lovable 仍然可以连接它**。具体做法如下。

<Steps>
  <Step title="为 Lovable 提供所需的上下文">
    当 Lovable 充分理解 API 时，它的效果最好。你可以提供：

    * **OpenAPI 规范**（如果有）
    * **复制粘贴的文档或示例**（尤其是端点以及请求/响应示例）

    文档越清晰，Lovable 就越能合理推断应该如何调用这个 API。
  </Step>

  <Step title="安全地处理认证">
    对于需要认证的 API：

    **方案 1：使用 Supabase Edge Functions 作为代理**

    * 在 Supabase 中安全存储机密信息
    * 让 Lovable 通过 Edge Function 调用 API 端点（而不是直接调用 API）

    **方案 2：在你的 Lovable 项目中直接实现 API 集成**

    * 暴露一个认证端点（例如用于将凭据交换为 token 或会话）
    * 让 Lovable 在集成流程中调用该认证端点
    * 在后续的 API 调用中包含 token、请求头或会话信息
  </Step>
</Steps>

示例 API：

<CardGroup cols="3">
  <Card title="Mapbox" href="https://docs.mapbox.com/">
    为世界各地的人、包裹和车辆提供导航支持。
  </Card>

  <Card title="Rive" href="https://rive.app/docs/getting-started/introduction">
    制作并发布交互式动画。
  </Card>

  <Card title="Together.ai" href="https://docs.together.ai/docs/introduction">
    只需几行代码，就能运行或微调领先的开源模型。
  </Card>

  <Card title="PostHog" href="https://posthog.com/docs">
    OS 产品分析，提供用户行为分析、会话回放和 A/B 测试功能。
  </Card>

  <Card title="Firecrawl" href="https://docs.firecrawl.dev/introduction">
    将网站内容转换为适合 LLM 使用的数据。
  </Card>

  <Card title="困惑度" href="https://docs.perplexity.ai/home">
    为你的应用添加强大的 AI 功能。
  </Card>

  <Card title="Zapier" href="https://docs.zapier.com/platform/home">
    用于连接不同 Web 应用的自动化工具。
  </Card>

  <Card title="GoJS" href="https://gojs.net/latest/api/">
    添加流程图，对可视化工作流和流程尤其有帮助。
  </Card>

  <Card title="Transformers.js（HF）" href="https://huggingface.co/docs/transformers.js/en/index">
    在浏览器中直接运行机器学习模型，无需依赖服务器。
  </Card>

  <Card title="Grok / xAI" href="https://docs.x.ai/docs/overview">
    为你的应用添加 AI 功能。
  </Card>

  <Card title="Twilio" href="https://www.twilio.com/docs">
    拨打、接听电话，发送、接收短信。
  </Card>

  <Card title="连接" href="https://www.linkup.so/">
    为你的应用接入 AI 搜索引擎。
  </Card>

  <Card title="Google Workspace" href="https://developers.google.com/docs/api/how-tos/overview">
    由 Google 开发的云端生产力和协作工具。
  </Card>

  <Card title="Lemon Squeezy" href="https://docs.lemonsqueezy.com/api">
    让数字产品销售更简单的电商平台。
  </Card>

  <Card title="Serper.dev" href="https://serper.dev/">
    将 Google 搜索结果集成到你的应用中。
  </Card>

  <Card title="Notion" href="https://developers.notion.com/">
    笔记、任务管理和数据库功能。
  </Card>

  <Card title="Mailgun" href="https://documentation.mailgun.com/docs/mailgun/api-reference/intro/">
    发送、接收和追踪电子邮件。
  </Card>

  <Card title="Calendly" href="https://developer.calendly.com/api-docs">
    简化会议安排的日程工具。
  </Card>

  <Card title="SendGrid" href="https://sendgrid.com/en-us/solutions/email-api">
    用于管理和发送事务性邮件和营销邮件的电子邮件投递服务。
  </Card>

  <Card title="TinyMCE" href="https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.root/">
    提供所见即所得编辑体验的富文本编辑器。
  </Card>

  <Card title="bannerbear" href="https://www.bannerbear.com/">
    自动生成社交媒体所需的图片和视频。
  </Card>

  <Card title="Square" href="https://developer.squareup.com/us/en">
    收款、管理销售，并处理各类商业事务。
  </Card>

  <Card title="HeyGen" href="https://www.heygen.com/api">
    AI 生成视频服务。
  </Card>

  <Card title="GetLago" href="https://getlago.com/docs/api-reference/intro">
    [开源计量与按用量计费](https://www.getlago.com/)
  </Card>

  <Card title="Ticketmaster" href="https://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/">
    嵌入活动及门票信息。
  </Card>

  <Card title="Tenor" href="https://tenor.com/gifapi/documentation">
    在你的应用中添加 GIF 动图。
  </Card>

  <Card title="Ideogram" href="https://developer.ideogram.ai/ideogram-api/api-setup">
    利用 AI 生成排版和图像。
  </Card>

  <Card title="Luma" href="https://docs.lu.ma/reference/getting-started-with-your-api">
    创建或分享事件
  </Card>

  <Card title="Freesound" href="https://freesound.org/docs/api/">
    访问免费音效和循环素材库。
  </Card>

  <Card title="iLovePDF" href="https://www.iloveapi.com/">
    转换、合并和编辑 PDF 文件。
  </Card>

  <Card title="Discord" href="https://discord.com/developers/docs/reference">
    构建 AI 驱动的机器人。
  </Card>

  <Card title="Google Imagen" href="https://cloud.google.com/vertex-ai/generative-ai/docs/image/overview">
    文生图生成器。
  </Card>

  <Card title="Slack" href="https://api.slack.com/">
    实现消息和工作流自动化。
  </Card>

  <Card title="Petfinder" href="https://www.petfinder.com/developers/">
    访问 Petfinder 的数据库，其中包含数十万只宠物。
  </Card>

  <Card title="体育数据库" href="https://www.thesportsdb.com/free_sports_api">
    搜索并访问所有球员、赛事、电视节目表和比分的数据。
  </Card>

  <Card title="天气应用" href="https://openweathermap.org/api">
    获取任意位置的实时天气数据。
  </Card>

  <Card title="YouTube" href="https://developers.google.com/youtube/v3">
    为你的应用集成多种 YouTube 功能。
  </Card>

  <Card title="Findwork" href="https://publicapi.dev/findwork-api">
    访问职位列表和其他职业发展资源。
  </Card>

  <Card title="Pixabay" href="https://pixabay.com/api/docs/">
    搜索并获取免版权费的图片和视频。
  </Card>

  <Card title="Alpha Vantage" href="https://www.alphavantage.co/">
    金融市场的实时和历史数据。
  </Card>

  <Card title="动态" href="https://currentsapi.services/">
    精选并获取来自多种来源的全球实时新闻。
  </Card>

  <Card title="Kofi" href="https://help.ko-fi.com/hc/en-us/articles/360004162298-Does-Ko-fi-have-an-API-or-webhook">
    接受捐赠、销售产品、接收请求，并通过直播赚钱。
  </Card>

  <Card title="GitHub 统计数据" href="https://docs.github.com/en/rest/metrics/statistics?apiVersion=2022-11-28">
    跟踪仓库活动和贡献记录。
  </Card>

  <Card title="TheNews API" href="https://www.thenewsapi.com/">
    在博客中搜索来自全球超过 15 万个来源的新闻和博文。
  </Card>

  <Card title="Tripadvisor" href="https://www.tripadvisor.com/developers">
    集成服务信息，获取预订，并将顾客评价同步到 Trip。
  </Card>

  <Card title="Verifone" href="https://verifone.cloud/api-catalog">
    收集交易数据。
  </Card>

  <Card title="纽约时报" href="https://developer.nytimes.com/apis">
    搜索《纽约时报》文章。
  </Card>

  <Card title="Polygon.io" href="https://polygon.io/">
    查询最新的金融市场数据。
  </Card>

  <Card title="词云" href="https://wordcloudapi.com/">
    生成词云。
  </Card>

  <Card title="二维码生成器" href="https://goqr.me/api/">
    生成、解码和读取二维码图像。
  </Card>

  <Card title="Deezers" href="https://developers.deezer.com/api">
    为你的应用添加音乐相关功能。
  </Card>

  <Card title="Hacker Earth" href="https://www.hackerearth.com/docs/wiki/developers/v4/">
    用多种语言编译并运行代码。
  </Card>

  <Card title="鸡尾酒数据库" href="https://www.thecocktaildb.com/api.php">
    访问大型鸡尾酒配方、原料和图片数据库。
  </Card>

  <Card title="啤酒 API" href="http://beer-api.readthedocs.io/">
    查看各种类型啤酒的介绍，包括艾尔、拉格、波特、世涛等。
  </Card>

  <Card title="话题标签 API" href="https://publicapi.dev/hashtag-api#:~:text=The%20Hashtag%20API%20allows%20users,hashtag%20functionality%20into%20their%20applications.">
    检索、创建、更新和删除话题标签（hashtag）。
  </Card>

  <Card title="USAJobs" href="https://developer.usajobs.gov/">
    在你的网站上发布招聘信息。
  </Card>

  <Card title="SFMTA" href="https://www.sfmta.com/reports/gtfs-transit-data">
    将一条或多条行程数据发送到 SFMTA 电子出租车接入系统。
  </Card>

  <Card title="UPCDatabase" href="https://upcdatabase.org/api">
    访问 UPC 数据库。
  </Card>

  <Card title="时间 API" href="https://timeapi.io/">
    获取时区信息，在不同时区之间转换时间，并追踪夏令时变更。
  </Card>

  <Card title="Plotly" href="https://plotly.com/python-api-reference/">
    绘图库可生成交互式的出版级图表。
  </Card>

  <Card title="Manifest.build" href="https://manifest.build/docs/rest-api">
    微后端。
  </Card>

  <Card title="PayPal" href="https://developer.paypal.com/api/rest/">
    将 PayPal 结账解决方案集成到你的应用中。
  </Card>

  <Card title="4everland" href="https://docs.4everland.org/hositng/hosting-api">
    后端可选方案。
  </Card>

  <Card title="Outseta" href="https://go.outseta.com/support/kb/articles/d1QpxQE7/how-to-integrate-with-outseta-s-rest-api">
    创建和更新用户、账户、订阅和发票。
  </Card>

  <Card title="Recraft" href="https://www.recraft.ai/docs">
    文本生成矢量图像。
  </Card>

  <Card title="n8n" href="https://docs.n8n.io/api/">
    自动化和工作流。
  </Card>

  <Card title="威尼斯" href="https://venice.ai/api-beta">
    无审查的 AI 对话与图像生成。
  </Card>

  <Card title="Shopify" href="https://shopify.dev/docs/api">
    增强你的电商能力。
  </Card>

  <Card title="BuildShip" href="https://buildship.com/">
    后端与自动化。
  </Card>

  <Card title="RunPod" href="https://docs.runpod.io/sdks/python/apis">
    自定义逻辑集成与部署。
  </Card>

  <Card title="Gumloop" href="https://docs.gumloop.com/nodes/advanced/call_api">
    自动化和工作流解决方案。
  </Card>

  <Card title="Odoo" href="https://www.odoo.com/documentation/18.0/developer/reference/external_api.html">
    在你的应用中获取并发送数据。
  </Card>

  <Card title="Tableau" href="https://help.tableau.com/current/api/rest_api/en-us/REST/rest_api.htm">
    数据分析工具。
  </Card>

  <Card title="Power BI" href="https://learn.microsoft.com/en-us/rest/api/power-bi/">
    数据分析工具。
  </Card>

  <Card title="Mermaid" href="https://mermaid.js.org/config/usage.html">
    生成可自定义的示意图、图表和可视化内容。
  </Card>

  <Card title="Stancer" href="https://www.stancer.com/documentation/api/">
    Stripe 替代方案。
  </Card>

  <Card title="Mercado" href="https://www.mercadopago.com.ar/developers/en/docs/checkout-api/landing">
    创建结账流程。
  </Card>

  <Card title="Canva" href="https://www.canva.dev/docs/connect/">
    将 Canva 集成到你自己的 Web 应用中。
  </Card>

  <Card title="Razorpay" href="https://razorpay.com/docs/api/">
    构建印度地区支付界面
  </Card>

  <Card title="Coinbase" href="https://www.coinbase.com/en-fr/developer-platform/products/exchange-api">
    实时市场数据。
  </Card>

  <Card title="GSAP" href="https://gsap.com/docs/v3/">
    动画库。
  </Card>

  <Card title="Cohere" href="https://docs.cohere.com/">
    在你的产品中集成自然语言处理和生成能力。
  </Card>

  <Card title="OpenRouter" href="https://openrouter.ai/docs/quickstart">
    接入数百种 AI 模型。
  </Card>

  <Card title="Fal AI" href="https://docs.fal.ai/">
    部署自定义 AI 模型。
  </Card>

  <Card title="Paystack" href="https://paystack.com/docs/api/">
    在线支付网关（非洲）
  </Card>

  <Card title="Remotion" href="https://www.remotion.dev/docs/api">
    使用 AI 创建视频并导出为 MP4 文件。
  </Card>

  <Card title="Paddle" href="https://developer.paddle.com/api-reference/overview">
    支付、税费和订阅管理。
  </Card>

  <Card title="Polar API" href="https://docs.polar.sh/api-reference">
    从 Polar 设备获取活动量、心率等数据。
  </Card>
</CardGroup>
