Q2 agent
A powerful, customizable chat library that brings AI-driven code generation and assistance to your apps and docs—enabling your users to interact with your APIs directly and bypass traditional documentation.
- Option selector: For any given API library, methods refer to the available endpoints, while workflows represent a list of predefined or commonly used sequences defined by the library owner. Clicking each tab displays the corresponding items below.
- Language selector: When a language is selected, code is generated in that language. If no language is selected, code is generated in Python by default.
- Method/Workflow search: Search for a particular item in the list
- Custom prompt: Use custom prompts to create your own workflows in any programming language. You can also ask about the steps involved in a workflow or request input/output details for any endpoint.
Customizations
Here are the options that can be passed along with the Swytchcode chat component
Props
| Prop | Type | Default | Description |
|---|---|---|---|
apiKey | string | undefined | Your Swytchcode API key (required) |
borderColor | string | ’#e5e7eb’ | Color of the library border |
height | string | number | ’80vh’ | Height of the library |
width | string | number | ’100%‘ | Width of the library |
initialMessage | string | ’Hello! How can I help you today?‘ | Initial message displayed in the chat |
sendButtonColor | string | ’#2563eb’ | Color of the send button |
userBubbleColor | string | ’#3b82f6’ | Color of user message bubbles |
promptValue | string | ’Ask me for code for any API method or full workflow…’ | Placeholder text for the input field |
highlightTheme | string | ’twilight’ | Theme for code syntax highlighting |
Available Themes
The highlightTheme prop supports the following themes:
| Theme | Description |
|---|---|
default | Clean and minimal theme with a light background |
dark | Dark theme with high contrast |
funky | Vibrant theme with a dark background and colorful syntax |
okaidia | Dark theme with a warm color palette |
twilight | Dark theme with a cool color palette (default) |
coy | Light theme with subtle colors |
solarizedlight | Light theme based on the Solarized color scheme |
tomorrow | Dark theme with a modern color palette |
atom-dark | Dark theme inspired by Atom editor |
vs | Light theme inspired by Visual Studio |
xonokai | Dark theme with a warm, earthy color palette |
duotone-dark | Dark theme with a duotone color scheme |
duotone-light | Light theme with a duotone color scheme |
duotone-sea | Dark theme with a sea-inspired duotone scheme |
duotone-space | Dark theme with a space-inspired duotone scheme |
duotone-earth | Dark theme with an earth-inspired duotone scheme |
duotone-forest | Dark theme with a forest-inspired duotone scheme |
duotone-rose | Dark theme with a rose-inspired duotone scheme |