@speakeasy-api/snippet-ai-react v1.6.0
Snippet-AI React
An AI-powered React component that generates code suggestions. Learn more about Snippet-AI
Features
- AI-powered code suggestions
- Command palette interface (⌘K / Ctrl+K)
- OpenAPI specification integration
- Modern, responsive design
Integration Guide
Install the package via npm:
npm install @speakeasy-api/snippet-ai-react
Implement the component:
import { SnippetAI } from '@speakeasy-api/snippet-ai-react'; function App() { return ( <div> <SnippetAI codeLang="typescript" publishingToken="sample_speakeasy_codewords_publishing_token" /> </div> ); }
Access the command bar using:
- macOS: ⌘K
- Windows/Linux: Ctrl+K
Optional - To open SnippetAI using a button, an onClick handler will be attached to the first element passed into the component:
import { SnippetAI } from '@speakeasy-api/snippet-ai-react'; function App() { return ( <div> <SnippetAI codeLang="typescript" publishingToken="sample_speakeasy_codewords_publishing_token" > <button>Ask AI</button> </SnippetAI> </div> ); }
Configuration
Required Props
publishingToken
: Public access token for authentication and access to the API
Optional Props
children
: This takes an optional element that will be used as a trigger to open SnippetAI. This is very similar to a popover trigger component.baseUrl
: Override the default API endpoint (falls back to spec's server URL if not provided)codeLang
: Set the programming language for suggestion results. One oftypescript
,python
,go
,java
,csharp
, orphp
(defaults totypescript
).toggleShortcut
: Set the keyboard shortcut that opens the Code Words Command Bar. Defaults to Command+K. Example: "$mod+k" (cmd+k / ctrl+k)zIndex
: Override the default z-index of 1000. Useful if you see your content on top of the command barsuggestions
: Sets a searchable list of suggestions to easily access when launching the command bar. Example: suggestions="Create a function that gets all workspaces", "Create a function that gets a user by id"