Spaces:
Running
Running
HFTools/inference-api # Build on Stripe with LLMs Use LLMs in your Stripe integration workflow. You can use large language models (LLMs) to assist in the building of Stripe integrations. We provide a set of tools and best practices if you use LLMs during development. ## Plain text docs You can access all of our documentation as plain text markdown files by adding `.md` to the end of any url. For example, you can find the plain text version of this page itself at [https://docs.stripe.com/building-with-llms.md](https://docs.stripe.com/building-with-llms.md). This helps AI tools and agents consume our content and allows you to copy and paste the entire contents of a doc into an LLM. This format is preferable to scraping or copying from our HTML and JavaScript-rendered pages because: - Plain text contains fewer formatting tokens. - Content that isn鈥檛 rendered in the default view (for example, it鈥檚 hidden in a tab) of a given page is rendered in the plain text version. - LLMs can parse and understand markdown hierarchy. We also host an [/llms.txt file](https://docs.stripe.com/llms.txt.md) which instructs AI tools and agents how to retrieve the plain text versions of our pages. The `/llms.txt` file is an [emerging standard](https://llmstxt.org/) for making websites and content more accessible to LLMs. ## Model Context Protocol (MCP) The Stripe Model Context Protocol (MCP) defines a set of tools that AI agents can use to interact with the Stripe API and search Stripe鈥檚 knowledge base (including documentation and support articles). These code editor agent automatically detect the tools, which call the relevant tool. Learn more in our [MCP documentation](https://docs.stripe.com/mcp.md). ## VS Code AI Assistant If you鈥檙e a Visual Studio Code user, you can install the [Stripe VS Code extension](https://docs.stripe.com/stripe-vscode.md) to access our AI Assistant. With the Stripe AI Assistant, you can: - Get immediate answers about the Stripe API and products - Receive code suggestions tailored to your integration - Ask follow-up questions for more detailed information - Access knowledge from the Stripe documentation and the Stripe developer community To get started with the Stripe AI assistant: 1. Make sure you have the Stripe VS Code extension installed. 1. Navigate to the Stripe extension UI 1. Under **AI Assistant** click **Ask a question**. - If you鈥檙e a Copilot user, this opens the Copilot chat where you can @-mention `@stripe`. In the input field, talk to the Stripe-specific assistant using `@stripe` followed by your question. - If you鈥檙e not a Copilot user, it opens a chat UI where you can talk to the Stripe LLM directly. ## Stripe Agent Toolkit SDK If you鈥檙e building agentic software, we provide an SDK for adding Stripe functionality to your agent鈥檚 capabilities. For example, using the SDK you can: - Create Stripe objects - Charge for agent usage - Use with popular frameworks such as OpenAI鈥檚 Agent SDK, Vercel鈥檚 AI SDK, Langchain, and CrewAI Learn more in our [agents documentation](https://docs.stripe.com/agents.md). ## See also - [Stripe for Visual Studio Code](https://docs.stripe.com/stripe-vscode.md) - [Add Stripe to your agentic workflows](https://docs.stripe.com/agents.md)Excellent! The DeepSite custom development setup has completed successfully. You've cloned the DeepStudio (BYOK Agentic version) which is a feature-rich variant with custom capabilities. 馃幆 What's Ready: 1. Project Structure: DeepStudio with BYOK (Bring Your Own Keys) functionality 2. Dependencies: All npm packages installed (649 packages) 3. Environment Setup: .env file created with template variables 4. Custom Development Scripts: Enhanced development tools 5. Documentation: DEV_README.md with comprehensive guides 馃殌 Quick Start Commands: ```bash # Start in custom development mode (recommended) npm run dev:custom # Or use standard development mode npm run dev # Build for production npm run build # Start production server npm run start ``` 馃攽 Immediate Next Steps: 1. Edit the .env file with your actual API keys: ```bash nano .env ``` 1. Add your Hugging Face token (required for inference): 路 Get token from: https://huggingface.co/settings/tokens 路 Ensure it has inference permissions 2. Optional API keys to add: 路 OPENAI_API_KEY - For OpenAI models 路 ANTHROPIC_API_KEY - For Claude models 路 Other provider keys as needed 馃搧 Project Location: Your project is located at: /data/data/com.termux/files/home/deepstudio 馃敡 Development Features Enabled: 路 Hot reload for rapid development 路 Debug mode with detailed logging 路 Custom development scripts 路 Enhanced error reporting 馃悰 If You Encounter Issues: 1. Dependency issues: Run npm install again 2. Port conflicts: Change PORT in .env file 3. API errors: Verify your tokens have correct permissions The setup looks clean with only 1 moderate severity vulnerability (which is common in development dependencies). You can run npm audit fix to address it if needed. Ready to start developing?
aab267c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StripeLLM Toolkit</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.2), 0 10px 10px -5px rgba(99, 102, 241, 0.1); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-slate-900/80 backdrop-blur-sm border-b border-slate-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center"> | |
| <i data-feather="zap" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold">Stripe<span class="text-indigo-400">LLM</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#" class="text-gray-300 hover:text-white transition">Documentation</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition">API Reference</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition">SDKs</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition">Community</a> | |
| </div> | |
| </div> | |
| <div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 relative overflow-hidden"> | |
| <div id="globe-bg" class="absolute inset-0 z-0"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| Build Stripe Integrations <span class="gradient-text">Powered by LLMs</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10"> | |
| Leverage large language models to accelerate your Stripe integration development. | |
| Access tools, SDKs, and best practices for AI-powered payment workflows. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg font-medium text-lg transition"> | |
| Explore Tools | |
| </button> | |
| <button class="bg-slate-800 hover:bg-slate-700 text-white px-8 py-3 rounded-lg font-medium text-lg transition"> | |
| View Documentation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-slate-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful AI Integration Tools</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Everything you need to build intelligent Stripe integrations with the power of large language models | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 card-hover border border-slate-700"> | |
| <div class="feature-icon bg-indigo-500/10 mb-5"> | |
| <i data-feather="file-text" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Plain Text Docs</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Access all documentation as clean markdown files optimized for LLM consumption. Perfect for AI agents and tools. | |
| </p> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 card-hover border border-slate-700"> | |
| <div class="feature-icon bg-purple-500/10 mb-5"> | |
| <i data-feather="cpu" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Model Context Protocol</h3> | |
| <p class="text-gray-400 mb-4"> | |
| MCP tools enable AI agents to interact directly with Stripe APIs and search our knowledge base. | |
| </p> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 card-hover border border-slate-700"> | |
| <div class="feature-icon bg-pink-500/10 mb-5"> | |
| <i data-feather="code" class="w-6 h-6 text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">VS Code AI Assistant</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Get immediate answers about Stripe APIs and receive code suggestions directly in your editor. | |
| </p> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 card-hover border border-slate-700"> | |
| <div class="feature-icon bg-blue-500/10 mb-5"> | |
| <i data-feather="tool" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Agent Toolkit SDK</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Add Stripe functionality to your agentic software with our comprehensive SDK for popular frameworks. | |
| </p> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 card-hover border border-slate-700"> | |
| <div class="feature-icon bg-green-500/10 mb-5"> | |
| <i data-feather="layers" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Framework Integrations</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Seamless compatibility with Langchain, CrewAI, OpenAI SDK, and Vercel AI SDK for agentic workflows. | |
| </p> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 card-hover border border-slate-700"> | |
| <div class="feature-icon bg-yellow-500/10 mb-5"> | |
| <i data-feather="book-open" class="w-6 h-6 text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Knowledge Base Access</h3> | |
| <p class="text-gray-400 mb-4"> | |
| AI agents can search through documentation and support articles to solve integration challenges. | |
| </p> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <div class="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 rounded-2xl p-12 border border-indigo-500/20"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build with AI?</h2> | |
| <p class="text-gray-300 text-xl mb-8 max-w-2xl mx-auto"> | |
| Join thousands of developers leveraging LLMs to accelerate their Stripe integration workflows. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg font-medium text-lg transition"> | |
| Get Started with Stripe LLM | |
| </button> | |
| <button class="bg-slate-800 hover:bg-slate-700 text-white px-8 py-3 rounded-lg font-medium text-lg transition"> | |
| View Examples | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-slate-800 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center"> | |
| <i data-feather="zap" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold">Stripe<span class="text-indigo-400">LLM</span></span> | |
| </div> | |
| <p class="text-gray-400"> | |
| Empowering developers to build intelligent payment solutions with the power of AI. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white transition">API Reference</a></li> | |
| <li><a href="#" class="hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="hover:text-white transition">Examples</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Tools</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">VS Code Extension</a></li> | |
| <li><a href="#" class="hover:text-white transition">Agent SDK</a></li> | |
| <li><a href="#" class="hover:text-white transition">MCP Tools</a></li> | |
| <li><a href="#" class="hover:text-white transition">Playground</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Community</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">GitHub</a></li> | |
| <li><a href="#" class="hover:text-white transition">Discord</a></li> | |
| <li><a href="#" class="hover:text-white transition">Twitter</a></li> | |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>漏 2023 StripeLLM Toolkit. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta.js Globe effect | |
| document.addEventListener('DOMContentLoaded', function() { | |
| VANTA.GLOBE({ | |
| el: "#globe-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6366f1, | |
| color2: 0x8b5cf6, | |
| backgroundColor: 0x0f172a, | |
| size: 1.00, | |
| lineHeight: 1.00, | |
| spacing: 1.00, | |
| points: 15.00, | |
| maxDistance: 21.00, | |
| showDots: true | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |