kopia lustrzana https://github.com/transitive-bullshit/chatgpt-api
feat(web): add example usage section to publishing page
Travis Fischer
rodzic
ca4bf959d6
commit
ddc8d499fc
|
|
@ -1,41 +1,16 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
import { highlight } from '@/components/code-block/highlight'
|
||||
import { DemandSideCTA } from '@/components/demand-side-cta'
|
||||
import { DotsSection } from '@/components/dots-section'
|
||||
import { ExampleUsage } from '@/components/example-usage'
|
||||
import { ExampleUsageSection } from '@/components/example-usage-section'
|
||||
import { GitHubStarCounter } from '@/components/github-star-counter'
|
||||
import { HeroSimulation2 } from '@/components/hero-simulation-2'
|
||||
import { MCPMarketplaceFeatures } from '@/components/mcp-marketplace-features'
|
||||
import { PageContainer } from '@/components/page-container'
|
||||
import { SupplySideCTA } from '@/components/supply-side-cta'
|
||||
import { githubUrl, twitterUrl } from '@/lib/config'
|
||||
import {
|
||||
defaultConfig,
|
||||
getCodeForDeveloperConfig
|
||||
} from '@/lib/developer-config'
|
||||
import { globalAgenticApiClient } from '@/lib/global-api'
|
||||
|
||||
export default async function TheBestDamnLandingPageEver() {
|
||||
const projectIdentifier = '@agentic/search'
|
||||
const tool = 'search'
|
||||
|
||||
const initialProject =
|
||||
await globalAgenticApiClient.getPublicProjectByIdentifier({
|
||||
projectIdentifier,
|
||||
populate: ['lastPublishedDeployment']
|
||||
})
|
||||
|
||||
// TODO: this should be loaded in `ExampleUsage`
|
||||
const initialCodeSnippet = getCodeForDeveloperConfig({
|
||||
config: defaultConfig,
|
||||
project: initialProject,
|
||||
deployment: initialProject.lastPublishedDeployment!,
|
||||
identifier: projectIdentifier,
|
||||
tool
|
||||
})
|
||||
const initialCodeBlock = await highlight(initialCodeSnippet)
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
{/* Hero section */}
|
||||
|
|
@ -52,43 +27,10 @@ export default async function TheBestDamnLandingPageEver() {
|
|||
<DemandSideCTA />
|
||||
</section>
|
||||
|
||||
{/* How it works section */}
|
||||
<section className='flex flex-col gap-8 mb-16'>
|
||||
<h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
|
||||
Agentic tools that{' '}
|
||||
<span className='font-semibold'>work everywhere</span>
|
||||
</h2>
|
||||
|
||||
<ExampleUsage
|
||||
projectIdentifier={projectIdentifier}
|
||||
project={initialProject}
|
||||
tool={tool}
|
||||
initialCodeBlock={initialCodeBlock}
|
||||
/>
|
||||
|
||||
<div className='flex flex-col gap-4 text-sm max-w-2xl text-center'>
|
||||
<p>
|
||||
This example uses the{' '}
|
||||
<Link
|
||||
href={`/marketplace/projects/${projectIdentifier}`}
|
||||
className='link'
|
||||
>
|
||||
{projectIdentifier}
|
||||
</Link>{' '}
|
||||
tool to provide an LLM access to the web.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
All Agentic tools are exposed as both{' '}
|
||||
<span className='font-semibold'>MCP servers</span> as well as simple{' '}
|
||||
<span className='font-semibold'>HTTP APIs</span>. MCP is important
|
||||
for interop and future-proofing, whereas simple HTTP POST requests
|
||||
make tool use easy to debug and simplifies integration with existing
|
||||
LLM tool calling.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/* Example usage section */}
|
||||
<ExampleUsageSection />
|
||||
|
||||
{/* Features section */}
|
||||
<section className='flex flex-col items-center gap-8 text-center mb-16'>
|
||||
<h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
|
||||
Agentic tools are{' '}
|
||||
|
|
@ -98,6 +40,7 @@ export default async function TheBestDamnLandingPageEver() {
|
|||
<MCPMarketplaceFeatures />
|
||||
</section>
|
||||
|
||||
{/* MCP section */}
|
||||
<section className='flex flex-col items-center gap-8 text-center mb-16 max-w-2xl'>
|
||||
<h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
|
||||
Agentic makes <span className='font-semibold'>MCP fun!</span>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Link from 'next/link'
|
|||
import Zoom from 'react-medium-image-zoom'
|
||||
|
||||
import { DotsSection } from '@/components/dots-section'
|
||||
// import { ExampleAgenticConfigs } from '@/components/example-agentic-configs'
|
||||
import { ExampleUsageSection } from '@/components/example-usage-section'
|
||||
import { GitHubStarCounter } from '@/components/github-star-counter'
|
||||
import { MCPGatewayFeatures } from '@/components/mcp-gateway-features'
|
||||
import { PageContainer } from '@/components/page-container'
|
||||
|
|
@ -59,30 +59,8 @@ export default function PublishingMCPsPage() {
|
|||
</p>
|
||||
</section>
|
||||
|
||||
{/* Config section (TODO) */}
|
||||
{/* <section className='flex flex-col gap-8 mb-16'>
|
||||
<h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
|
||||
Simple, Declarative Configuration
|
||||
</h2>
|
||||
|
||||
<ExampleAgenticConfigs />
|
||||
|
||||
<p className='text-sm max-w-2xl text-center'>
|
||||
<Link href='https://docs.agentic.so/publishing/config' className='link'>
|
||||
Configuring your Agentic project
|
||||
</Link>{' '}
|
||||
is straightforward , regardless of whether your origin is an MCP
|
||||
server or an OpenAPI service. For TS projects, you can use a
|
||||
fully-typed <span className='font-semibold'>agentic.config.ts</span>{' '}
|
||||
file, or fall back to using an{' '}
|
||||
<span className='font-semibold'>agentic.config.json</span> file to
|
||||
configure your project.{' '}
|
||||
<Link href='https://docs.agentic.so/publishing' className='link'>
|
||||
Learn more
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</section> */}
|
||||
{/* Example usage section */}
|
||||
<ExampleUsageSection />
|
||||
|
||||
{/* Features section */}
|
||||
<section className='flex flex-col gap-8 md:gap-12 mb-16'>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
import { highlight } from '@/components/code-block/highlight'
|
||||
import { ExampleUsage } from '@/components/example-usage'
|
||||
import {
|
||||
defaultConfig,
|
||||
getCodeForDeveloperConfig
|
||||
} from '@/lib/developer-config'
|
||||
import { globalAgenticApiClient } from '@/lib/global-api'
|
||||
|
||||
export async function ExampleUsageSection() {
|
||||
const projectIdentifier = '@agentic/search'
|
||||
const tool = 'search'
|
||||
|
||||
const initialProject =
|
||||
await globalAgenticApiClient.getPublicProjectByIdentifier({
|
||||
projectIdentifier,
|
||||
populate: ['lastPublishedDeployment']
|
||||
})
|
||||
|
||||
// TODO: this should be loaded in `ExampleUsage`
|
||||
const initialCodeSnippet = getCodeForDeveloperConfig({
|
||||
config: defaultConfig,
|
||||
project: initialProject,
|
||||
deployment: initialProject.lastPublishedDeployment!,
|
||||
identifier: projectIdentifier,
|
||||
tool
|
||||
})
|
||||
const initialCodeBlock = await highlight(initialCodeSnippet)
|
||||
|
||||
return (
|
||||
<section className='flex flex-col gap-8 mb-16'>
|
||||
<h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
|
||||
Agentic tools that{' '}
|
||||
<span className='font-semibold'>work everywhere</span>
|
||||
</h2>
|
||||
|
||||
<ExampleUsage
|
||||
projectIdentifier={projectIdentifier}
|
||||
project={initialProject}
|
||||
tool={tool}
|
||||
initialCodeBlock={initialCodeBlock}
|
||||
/>
|
||||
|
||||
<div className='flex flex-col gap-4 text-sm max-w-2xl text-center'>
|
||||
<p>
|
||||
This example uses the{' '}
|
||||
<Link
|
||||
href={`/marketplace/projects/${projectIdentifier}`}
|
||||
className='link'
|
||||
>
|
||||
{projectIdentifier}
|
||||
</Link>{' '}
|
||||
tool to provide an LLM access to the web.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
All Agentic tools are exposed as both{' '}
|
||||
<span className='font-semibold'>MCP servers</span> as well as simple{' '}
|
||||
<span className='font-semibold'>HTTP APIs</span>. MCP is important for
|
||||
interop and future-proofing, whereas simple HTTP POST requests make
|
||||
tool use easy to debug and simplifies integration with existing LLM
|
||||
tool calling.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
1
todo.md
1
todo.md
|
|
@ -32,6 +32,7 @@
|
|||
- marketplace project page; replace tabs with links
|
||||
- too much of a delay on individual pages and makes no sense to have these imports on the other tab pages
|
||||
- add a basic page + docs on pricing
|
||||
- update social image to have a lil more padding around the agentic logo
|
||||
|
||||
## TODO: Post-MVP
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue